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

Я все еще изучаю 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, вместо того, чтобы циклически перебирать каждый по очереди. .