Use image alt attribute value as heading in carousel

Question

Here is my fiddle.

http://jsfiddle.net/yX5vr/3/

What I want to do is, simply set h1 using currently active image's alt. It must be set on both situations: when you click on thumb, or when you just enter to the page it must be set to initial value (first image's alt).

Because of JS's a bit difficult form, I can't figure out where to place code. Any suggestions?

Answer 1

Use a callback on the scroll event:

http://jsfiddle.net/isherwood/yX5vr/36

$('.carousel-stage').on('jcarousel:scrollend', function(event, carousel) {
    $('.wrapper h1').text( $(this).jcarousel('visible').find('img').attr('alt') );
});

http://sorgalla.com/jcarousel/docs/reference/events.html#scrollend

---

To get the initial title, add this somewhere after your init:

$('.wrapper h1').text( $('.carousel-stage').jcarousel('visible')
    .find('img').attr('alt') );

http://jsfiddle.net/isherwood/yX5vr/37/

Answer 2

You can do it like this

item.on('jcarouselcontrol:active', function() {
    carouselNavigation.jcarousel('scrollIntoView', this);
    item.addClass('active');
    $('.wrapper h1').html($('.carousel-stage img').eq(item.index()).prop('alt'));
});

Check here