Use image alt attribute value as heading in carousel

Question

Here is my fiddle.

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?

isherwood · Accepted Answer · 2014-03-11T19:11:23.720

2

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/

edited Mar 11 '14 at 19:11

answered Mar 11 '14 at 18:33

isherwood

58,414
16
114
157

what about first time when you open page? – demonoid Mar 11 '14 at 18:37
You'd do the same on init. You'll also have to get the index of the image. Right now it only grabs the first image's alt value. – isherwood Mar 11 '14 at 18:43
what about initial value? – demonoid Mar 11 '14 at 18:59
Updated to use current slide index and `this`. – isherwood Mar 11 '14 at 19:11
Updated again to provide cake and help you eat it, too. :-) – isherwood Mar 11 '14 at 19:15

score 0 · Answer 2 · edited Mar 11 '14 at 19:14

0

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

edited Mar 11 '14 at 19:14

Michael

3,982
4
30
46

answered Mar 11 '14 at 18:35

tliokos

3,606
3
28
28

Use image alt attribute value as heading in carousel

2 Answers2