Как использовать jquery для настройки титров слайд-шоу на лету?

Question

Я все еще участвую в jquery и javascript, поэтому, пожалуйста, несите меня. Я использовал учебник в jquery для создания слайд-шоу с использованием функции цикла jquery.

Это замечательно и позволяет мне вращать отдельные div, содержащие изображение и подпись.

$(document).ready(function() { 
$('#gallery').cycle({ 
    fx: 'scrollRight', 
    timeout: 5000, 
    speed: 500, 
    delay: -2000, 
    pager: '#pager', 
    next: '#next', 
    prev: '#prev' 
}); 




$('#playControl').text('Play'); 

$('.credit imAgE (I had to change this because of rules for newbies').each(function(){ 
var widthSpacer = $(this).attr('width'); 
$('.credit p').css('width', widthSpacer + 10); 
}); 


$('#playControl').toggle(

     function() { 
      $('#gallery').cycle('resume'); 
      $(this).text('Pause'); 

     }, 
     function() { 
      $('#gallery').cycle('pause'); 
      $(this).text('Play'); 

     }); 

}); // end ready() 
</script> 

<div style="width: 640px;"> 


    <div id="contentWrap"> 
    <div id="main"> 

    <div id="controls"> 
    <span id="prev" class="control">Previous</span> 
    <span id="pager"></span> 
    <span id="next" class="control">Next</span> 
    <span id="playControl" class="control">Pause</span> 
    </div> 
    <div id="gallery"> 

<div class="credit"><image tag 1> 
    <p>Pic one caption</p> 
    </div> 

    <div class="credit"><image tag n"> 
    <p >Pic caption n</p> 
    </div> 

Проблема в том, что ширина надписи остается таковой в контейнере. Это нормально с изображениями, которые охватывают всю ширину контейнера, но не являются узкими.

Я пытался настроить <p> тег внутри DIV так, чтобы его ширина такая же, как изображение, но оно устанавливает только свойство ширины один раз для каждого <p> во всех «кредит» класса div с, а не циклически перемещаясь по очереди.

Answer 1

Вы должны указать свой контейнер min-width в CSS и, возможно, установить width:auto. Надеюсь, это поможет.

Играйте со своим CSS, похоже, что вы можете исправить это в общих чертах, используя CSS, а не отдельно для каждого слайда с помощью jQuery.