2012-04-10 64 views
2

我正在用的jCarousel(http://sorgalla.com/projects/jcarousel/)圖片預覽,但面臨着一個問題:我不知道我怎麼能重新加載/刷新jCarousel動態列表。的jCarousel初始化/清爽/重裝每次點擊圖像

我有幾個類別的圖像。當我點擊其中一個圖片時,我需要創建列表並預覽從那個元素開始。我有一些代碼,但不知道如何在點擊預覽從其他圖像開始的其他圖像後重新創建所有列表。 這裏是我的代碼:

$(document).ready(function(){ 
$("ul#stage li").live('click', function() { 

    var ul = $(this).parent(); 
    var index = +(ul.children().index(this))+1; 

    var mycarousel_itemList = [ ]; 

    $('li[data-id]').each(function() { 
     var $this = $(this); 
      mycarousel_itemList.push({ 
       url : $this.attr("data-img"), 
       title : $this.attr("data-title") 
      }); 
    }); 

    function mycarousel_itemLoadCallback(carousel, state) { 
     for (var i = carousel.first; i <= carousel.last; i++) { 
      if (carousel.has(i)) { 
       continue; 
      } 
      if (i > mycarousel_itemList.length) { 
       break; 
      } 
      carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1])); 
     } 
    }; 

    function mycarousel_getItemHTML(item) { 
     return '<img src="' + item.url + '" width="800" height="600" alt="' + item.url + '" />'; 
    }; 
     alert(index); 
    jQuery('#mycarousel').jcarousel({ 
     itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}, 
     size: mycarousel_itemList.length, 
     scroll: 1, 
     start: index, 
     wrap: 'last', 
     animation: 'fast', 
     visible: 1 
    }); 

    document.getElementById('popup-content').style.background='url('+$(this).attr("data-img")+') no-repeat center'; 
    document.getElementById('fades').style.display='block'; 
    document.getElementById("light").style.display = "block"; 
    $("#light").fadeTo("slow", 1); 
}); 
}); 

一切就是這樣:有圖像>我點擊的那些>彈出窗口顯示與和的jCarousel一個可見的圖像之一,然後我可以通過其他的圖像滾動。

它運行良好,但只是第一次。當我點擊其他圖像時(關閉彈出框後),視圖以最後打開的圖像開始。

如果有些事情不夠清楚 - 請問。我會盡力使它更精確。 感謝您的幫助!

回答

1

您可以重新創建jCarousel,首先使用$('#mycarousel')。remove();然後再次初始化jCarousel。我並沒有真正理解你想做什麼,但是這在大多數情況下都可以幫助,當然jCarousel應該有Destroy方法,但是它沒有。

爲什麼你在某些情況下不使用jquery選擇器?

+0

我在這一天回來的時候很新鮮。這就是我無法應對這個問題的原因,在某些情況下使用JavaScript代替jQuery選擇器。 – Gereby 2015-01-21 13:37:35

+0

非常有趣,你接受了我的回答,並且在2年多後解釋了你自己:) – 2015-01-21 14:01:44

+0

我沒有很快得到答案,所以我完全忘了它,並在昨天發現它。 :) – Gereby 2015-01-22 09:58:20