1

jQuery Supersized プラグイン ( 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'}

最後に末尾のコンマがありません。

4

2 に答える 2

4

この 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 /

于 2012-05-01T06:57:07.860 に答える
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>​​​​​​​​​
于 2012-05-01T06:58:10.240 に答える