将图像动态添加到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

回答

相关问题