0

ギャラリーをfancybox2に更新したいと思います。バージョン1.3.4ですべてが機能する前は、スライドショーに次の画像を表示することはできません。常に最初に表示されます。ただし、前と次に戻ると、すべてが機能します。

ここを見てください：http：//f.cl.ly/items/3Z1W0t2Z0U1U39452Z1a/fancybox_error.m4v

<script type="text/javascript">
    $(function() {
        var images = [];
        $.getJSON("/json/235", function(data) {
            images = data.items;
        }).error(function(e) { console.log( e ); });

        $(".fancybox").click(function(e) {
            e.preventDefault();
            $.fancybox(images, {
                "zoomSpeedIn":0,
                "zoomSpeedOut":0,
                "padding":10,
                "overlayShow":true,
                "nextEffect":"none",
                "nextClick":true,
                "helpers":{
                    "overlay":{
                        "opacity":0.5,
                        "css": { "background-color":"#000" }
                    },
                    "thumbs":{ "width":50, "height":50 }
                },
                index : $(this).attr("rel"),
                prevEffect : "slideOut",
                nextEffect : "slideIn",
                nextClick : true,
                type: "image" 
            });
        });
    }); 
</script>

jsonファイルは次のようになります

{"items":[{
    "href":"\/images\/get\/resize\/1200\/1200\/gallery\/2010-12-12_Fraport_Werft\/SES_6880_01.JPG",
    "title":"Fraport Werft"}, {
    "href":"\/images\/get\/resize\/1200\/1200\/gallery\/2010-12-12_Fraport_Werft\/SES_6888_01.JPG",
    "title":"Fraport Werft"}
]}
4

1 に答える 1

0

コメントの1つで述べたように、このrel属性は、同じギャラリーに属する要素を決定するためにfancyboxによって使用されることに注意してください。rel属性を使用してindexviaを取得しているという事実は、index : $(this).attr("rel"),fancyboxがギャラリーの正しい順序を取得するのを混乱させているようです。

ギャラリーをfancyboxv2.xに更新/アップグレードする場合はDOCTYPE、HTML5にアップグレードすることも検討してください。このようにして、属性を使用してギャラリー要素data-*の権利を設定できます（属性はそのままにします） 。indexrel

したがって、たとえばあなたの例では、これを変更します：

<a rel="0" class="fancybox" .....

これに：

<a data-index="0" class="fancybox" .....

などなど。次に、スクリプトで次の行を変更します。

index : $(this).attr('rel'),

これに

index: $(this).data("index"),

...そしてそれはほとんど問題を解決します。

ここでデモを見る

于 2012-07-28T00:37:58.807 に答える