將圖像動態添加到SlideJS

我使用http://www.slidesjs.com庫爲移動網站創建幻燈片。問題在於圖像是從Web服務獲取的，然後添加到控件中。當我出現的相似圖片：將圖像動態添加到SlideJS

enter image description here

下面是執行：

<div id="slides"> 
</div> 
$(document).ready(function() { 

     $.get(window._resources["load-gallery"], { productId: productId, siteId: 2, presentation: "Media Gallery,Main Image" }).done(function (data) { 

      for (i = 0; i < data.length; i++) 
      { 
       var url = "http://someurl.com/" + data[i].MediaDocument.Url; 

       var img = $('<img>'); 
       img.attr('src', url); 
       img.appendTo('#slides'); 

      } 

     }); 

    });

如果我不喂動態幻燈片元素，並添加它作爲靜態圖像/然後硬編碼它工作正常，我可以滑過所有的圖像。

來源

2014-09-12 john doe

該圖像並不能真正幫助您理解問題。 – lxg 2014-09-12 20:47:46

img元素垂直添加，而不是作爲幻燈片出現。 – 2014-09-12 20:56:51

（這是一些猜測，因爲我不知道SlideJS，和你的代碼缺少滑塊的初始化，但是我們可以嘗試...）

由於每SlideJS」的主頁，你必須調用以下來初始化滑塊。

$("#slides").slidesjs({ 
    width: 940, 
    height: 528 
});

我假設您在從服務器加載圖像之前執行此操作。我還假設SlideJS不會對庫的更新作出反應，但只能在初始化時訪問它們。

所以，你必須做的是調用初始化加載了圖片後：

$.get(window._resources["load-gallery"], { productId: productId, siteId: 2, presentation: "Media Gallery,Main Image" }).done(function (data) { 

    for (i = 0; i < data.length; i++) 
    { 
     // insert images and stuff 
    } 

    // NOW apply slidejs 
    $("#slides").slidesjs({ 
     width: 940, 
     height: 528 
    }); 
});

這也可能是SlideJS得到了一個回調來更新滑塊的圖像添加之後或移除。在這種情況下，您的初始化可能會保留在現在的位置，您只需在加載圖像後調用更新方法即可。

來源

2014-09-12 21:08:47 lxg

你先生是個天才！我喜歡你！它工作真棒！ – 2014-09-12 21:12:11

將圖像動態添加到SlideJS

回答

相關問題