2

在标准情况下，我们可以通过执行以下操作来创建照片库（照片组）：

$( '.fancybox' ).fancybox();

在 HTML 中，我们必须将标签 'a'的属性rel设置为相同的值：

<a rel="group" title="" href="/profile/photos/files/74.jpeg" class="fancybox no-tooltip" id="photo-link-74"><img class="image-curving" style="display: block;" alt="" src="/profile/photos/files/74_thumb.jpeg"></a>
<a rel="group" title="" href="/profile/photos/files/74.jpeg" class="fancybox no-tooltip" id="photo-link-74"><img class="image-curving" style="display: block;" alt="" src="/profile/photos/files/74_thumb.jpeg"></a>

当我们想使用 jQuery 的 each() 时，情况会怎样呢？

        $(".fancybox").each(    
            function()
            {
                var parentId = $( this ).parent().parent().attr( 'id' );
                var id = parentId.substring( parentId.indexOf( '-' ) + 1, parentId.length );

                $( this ).fancybox(
                    {
                        minWidth: 600,
                        afterShow: function() { afterShow( id ); },
                        title: "<img href='/pics/indikator.gif'>",
                        helpers: 
                        {
                            title: 
                            {
                                type : 'inside'
                            }
                        }
                    }
                );
            }
        );

在最后一种情况下，照片不会被分组。如何处理该功能each()并使所有 rel 属性相同的照片分组？

4

2 回答 2

1

下一个不是通用的，但当我们在页面上有一个画廊时有效：

        var ids = [];
        var index = 0;

        $( '.fancybox' ).each(
            function()
            {
                var parentId = $( this ).parent().parent().attr( 'id' );
                var id = parentId.substring( parentId.indexOf( '-' ) + 1, parentId.length );
                ids[ index ] = id;
                index++;
            }
        );

        $( ".fancybox" ).fancybox(
            {
                minWidth: 600,
                afterShow: function() { afterShow( ids[ $.fancybox.current.index ] ); },
                title: "<img href='/pics/indikator.gif'>",
                helpers: 
                {
                    title: 
                    {
                        type : 'inside'
                    }
                }
            }               
        );

感谢 Asad 给了我迭代的想法。

如果有人有更明确的决定（没有外部变量，但仅使用闭包变量），请在此处发布。

于 2012-12-03T12:57:43.920 回答
1

您不需要，只需在常规的 fancybox 自定义脚本中动态each()获取父级，使用像这样的 fancybox 回调id

$(".fancybox").fancybox({
   afterShow: function(){
       var parentId = $(this.element).parent().parent().attr('id');
       // do something with that variable
   }
});

...注意我使用$(this.element)了，因为这是$(this)在fancybox回调中引用的方式。您还可以在脚本顶部声明所有变量，以便随时访问它们。

于 2012-12-05T18:55:30.657 回答