jQuery的圖片廊帶的jCarousel不斷變化的預覽

Question

我發現這個腳本：http://www.queness.com/post/3036/create-a-custom-jquery-image-gallery-with-jcarousel

其中有我需要的一切，除了一兩件事。在右側選擇正在改變，但左側預覽始終是相同的。

有誰知道如何改變這個？

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

DEMO

ZIP Bundle