将图像动态添加到SlideJS
问题描述:
我使用http://www.slidesjs.com库为移动网站创建幻灯片。问题在于图像是从Web服务获取的,然后添加到控件中。当我出现的相似图片:将图像动态添加到SlideJS
下面是执行:
<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');
}
});
});
如果我不喂动态幻灯片元素,并添加它作为静态图像/然后硬编码它工作正常,我可以滑过所有的图像。
答
(这是一些猜测,因为我不知道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得到了一个回调来更新滑块的图像添加之后或移除。在这种情况下,您的初始化可能会保留在现在的位置,您只需在加载图像后调用更新方法即可。
+1
你先生是个天才!我喜欢你!它工作真棒! – 2014-09-12 21:12:11
该图像并不能真正帮助您理解问题。 – lxg 2014-09-12 20:47:46
img元素垂直添加,而不是作为幻灯片出现。 – 2014-09-12 20:56:51