Question

我想将我的画廊更新到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"}
]}

Answer 1

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

如果您愿意将图库更新/升级到fancybox v2.x，您可以考虑将DOCTYPE升级为HTML5，这样您就可以使用data-*属性设置正确您的图库元素index（并留下rel属性）

例如，在your example中，更改此内容：

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

到此：

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

依此类推。然后在您的脚本中更改以下行：

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

到这个

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

......这几乎可以解决问题。

SEE DEMO HERE

带有json图像组的Fancybox2不显示下一张图像

1 个答案: