0

我想将我的画廊更新到 fancybox 2。在 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

正如我在其中一条评论中提到的，您应该记住，relfancybox 使用该属性来确定哪些元素属于同一个画廊。似乎您使用该rel属性来获取indexvia的事实index : $(this).attr("rel"),混淆了 fancybox 以获得画廊的正确顺序。

如果您愿意将您的画廊更新/升级到fancybox v2.x，您也可以考虑将您的画廊升级DOCTYPE到HTML5，这样您就可以使用该data-*属性来设置index您的画廊元素的权利（并且不用理会该rel属性）

因此，例如，在您的示例中，更改此：

<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 回答