Search code examples
jqueryjcycle

JQuery Cycle and Title Image

I need help, I would like to change the title in a div when rotating the image.

$('.pics').cycle({
fx:     'fade',
timeout: 6000,
after:   function() {
    var title = $('.image').attr('alt');
    $('.image_title').html(title);
}
});

....

<div class="pics"> 
<img src="01.jpg" alt="Picture 1" class="image"/>
    <img src="02.jpg" alt="Picture 2" class="image"/>
    <img src="03.jpg" alt="Picture 3" class="image"/>
</div>
<div class="image_title"></div>

but this does not work, it displays only the first attribute

Solution

  • I beleive the only thing you'll need to change is to use the $(this) keyword in order to reference the current image item.

    after:   function() {
    var title = $(this).attr('alt');
    $('.image_title').html(title);
}

    Every time you executed $('.image').attr('alt');, all you got was the alt property of the first element that matches the selector. $('.image') could very well match several elements on your page.