Question

I found this script: http://www.queness.com/post/3036/create-a-custom-jquery-image-gallery-with-jcarousel

which has everything I need except one thing. On right side selection is changing but preview on left side is same all the time.

Does anyone knows how to change this?

Answer 1

You can utilize the itemFirstInCallback callback of jCarousal to change the preview like this

function mycarousel_itemFirstInCallbackBeforeAnimation(carousel, item, idx, state) {

    $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
    $('div#slideshow-carousel li a').each(function () {

       if ($('a',item).has('span').length) 
          $('a',item).children('img').css({'opacity': '1.0'});

    });
    if (!$('a',item).has('span').length) {
       $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
       $('a',item).stop(true, true).children('img').css({'opacity': '1.0'});
    }

    $('div#slideshow-main li').removeClass('active');        
    $('div#slideshow-main li.' + $(item).find('a').attr('rel')).addClass('active');
        }

Then you can call jCarousal with the above callback

$('#carousel').jcarousel({
    vertical: true,
    scroll: 1,
    auto: 2,
    wrap: 'last',
    itemFirstInCallback: {
     onBeforeAnimation: mycarousel_itemFirstInCallbackBeforeAnimation
    },
    initCallback: mycarousel_initCallback
});

DEMO

ZIP Bundle