jQuery的超大型：从李加载图像(jQuery Supersized: Load images f

我使用了jQuery插件超大型（ http://buildinternet.com/project/supersized/ ）。

我试图做到的，是采取自动生成的列表如下：

<ul>
    <li><span class="image">/images/image1.jpg</span> <span class="title">My Title</span> <span class="thumb">/images/image-thumb1.jpg</span></li>
    <li><span class="image">/images/image2.jpg</span> <span class="title">My Title</span> <span class="thumb">/images/image-thumb2.jpg</span></li>
    <li><span class="image">/images/image3.jpg</span> <span class="title">My Title</span> <span class="thumb">/images/image-thumb3.jpg</span></li>
</ul>

并考虑相关选项并将其添加到幻灯片：

<script type="text/javascript">
jQuery(function($){
    $.supersized({
        ...
        slide_links : false,
        slides : [
            {image : '/images/image1.jpg', title : 'My title', thumb : '/images/image-thumb1.jpg'},
            {image : '/images/image2.jpg', title : 'My title', thumb : '/images/image-thumb2.jpg'},
            {image : '/images/image3.jpg', title : 'My title', thumb : '/images/image-thumb3.jpg'}
        ]
    });
});
</script>

该系统被用于不允许服务器端代码，所以我不得不做这一切的JS。

我已经成功地创建这样的一个简单的方法，但它只能有一个结尾逗号，这会导致预IE8的突破来实现的。

因此，这是唯一的解决办法，我能想出但一直没能迄今为止安排。

或多或少：

我可以在列表中的细节，并利用它们在幻灯片中产生的超大型背景图像？

如

这个：

`<li><span class="image">/images/image.jpg</span> <span class="title">My Title</span> <span class="thumb">/images/image-thumb.jpg</span></li>`

为此：

{image : '/images/image.jpg', title : 'My title', thumb : '/images/image-thumb.jpg'}

随着最后有没有尾随逗号。

Answer 1:

你可以建立一个幻灯片数据结构与这个jQuery的：

var slides = [];           
$("ul .image").each(function() {
    var this$ = $(this);
    var obj = {};
    obj.image = this$.text();
    obj.title = this$.nextAll(".title").text();
    obj.thumb = this$.nextAll(".thumb").text();
    slides.push(obj);
});​​​​​​​​​​​​​​​

工作演示： http://jsfiddle.net/jfriend00/bYs​​4x/

Answer 2:

<script type="text/javascript">
    myApp = {};
    myApp.doSupersize = function() {

        var slides = new Array();

        $("li").each(function(){
            var obj = {
                image: $(".image", this).html(),
                title: $(".title", this).html(),
                thumb: $(".thumb", this).html()
            };
            slides.push(obj);
        });

        $.supersized({
            slide_links : false,
            slides : slides
        });
    }

    jQuery(function(){
        myApp.doSupersize();
    });

</script>​​​​​​​​​

文章来源: jQuery Supersized: Load images from LI