jquery - プレビューを変更したjCarouselを使用したjQueryイメージギャラリー

Question

私はこのスクリプトを見つけました：http ：//www.queness.com/post/3036/create-a-custom-jquery-image-gallery-with-jcarousel

これには、1つを除いて必要なものがすべて揃っています。右側の選択は変更されていますが、左側のプレビューは常に同じです。

誰かがこれを変更する方法を知っていますか？

Answer 1

itemFirstInCallbackのコールバックを利用して、jCarousalこのようにプレビューを変更できます

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');
        }

次に、上記のコールバックを使用してjCarousalを呼び出すことができます

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

デモ

ZIPバンドル