动态添加图像到SlideJS

Question

我正在使用http://www.slidesjs.com库为移动网站创建幻灯片。问题是图像是从Web服务获取的，然后添加到控件中。当我这样做时，图像显示如下：

以下是实施：

<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');

            }

        });

    });

如果我没有动态地提供slide元素并将其添加为静态图像/硬编码，那么它可以正常工作，我可以浏览所有图像。

Answer 1

（这有点猜测，因为我不知道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可能还有一个回调来更新滑块。在这种情况下，您的初始化可能会保持现在的状态，您只需在加载图像后调用更新方法。