動態重新加載實現圖像滑塊照片

我試圖讓我的MaterializeCSS圖像滑塊在用戶切換到另一個專輯時動態地重新加載來自不同文件夾的照片。這裏是我的方法：動態重新加載實現圖像滑塊照片

<script> 
    function showPhotos(album) { 
     alert("Show photos function is called"); 
     var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       var contents = ""; 
       var count = parseInt(xmlhttp.responseText); 
       for (i = 1; i <= count; i++) { 
        contents += "<li>"; 
        contents += ("<img src=\"images/album_" + album + "/" + ("00" + i).slice(-2) + ".jpg\" />"); 
        contents += "</li>\r\n"; 
       } 
       document.getElementById("photo-slide").innerHTML = contents; 
      } 
     } 
     xmlhttp.open("GET", "/php/gethint.php?q=" + album, false); 
     xmlhttp.send(); 
    } 
</script>

其中gethint.php Q =基本上返回一個特定的文件夾中的文件數量。

<script> 
    $(document).ready(function(){ 
     $("#album1").click(function(){ 
      showPhotos(1); 
      $('.slider').slider({full_width: true, height: 600}); 
     }); 
     $("#album2").click(function(){ 
      showPhotos(2); 
      $('.slider').slider({full_width: true, height: 600}); 
     }); 
     $("#album3").click(function(){ 
      showPhotos(3); 
      $('.slider').slider({full_width: true, height: 600}); 
     }); 
    }); 
</script>

其中album1，album2和album3是我的下拉列表中的3個項目。

結果對第一張專輯的選擇效果很好。一切都按預期工作。但是，當我試圖切換專輯時，新圖片也被加載，轉換沒問題，但底部的指示器開始變得怪異。我需要爲我的方法修復，或者爲我所需要的更好的解決方案。

謝謝 -Tom

來源

2015-07-18 Tom N

剛剛發現一個類似的話題，在github上沒有回答就關閉了。 https://github.com/Dogfalo/materialize/issues/1259。我認爲那傢伙有和我一樣的問題 –

Hi @Tom，您是否找到解決問題的方法？ – Desprit

的MaterializeCSS轉盤似乎並不具有「重新初始化」功能。我想這樣做我自己，所以我發現這個工作不夠好，我的需求：

$('.carousel').removeClass('initialized'); 
$('.carousel').carousel();

它是一種哈克，但如果你看看傳送帶src你會看到一個檢查，以避免重複初始化。所以基本上，你從傳送帶div中刪除初始化的類，然後像在文檔準備好時那樣初始化傳送帶。

請注意，這違背了作者的意圖，所以最有可能是惡魔。

來源

2016-10-17 00:44:23 Kevin

謝謝兄弟，它適合我 –

動態重新加載實現圖像滑塊照片

回答

相關問題