How do I use jquery to adjust slideshow captions on the fly?

Question

Hi,

I'm still learning jquery and javascript so please bear with me. I've used a tutorial in jquery to create a slideshow using jquery's cycle function.

It's great and allows me to rotate individual divs containing an image and a caption.

$(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>   

The problem is that the caption width remains that of the container. It is okay with images that span the whole container width, but not if they are narrow.

I've been trying to tweak the <p> tag within the div so that its width is the same as the image, but it only sets the width property once for every <p> in all "credit" class divs, rather than cycling through each in turn.

Answer 1

You should give your container a set min-width in the CSS, and maybe set the width:auto. Hope that helps.

Play around with your CSS, it sounds like you might be able to fix this generically using CSS rather than individually for each slide using jQuery.