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

次は普遍的ではありませんが、ページに 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 コールバックを使用して、通常の fancybox カスタム スクリプト内でその場でeach()親を取得するだけです。id

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

...ファンシーボックスのコールバック内を参照する方法であるため、私が使用したことに注意してください。また、スクリプトの先頭ですべての変数を宣言して、いつでもアクセスできるようにすることもできます。$(this.element)$(this)

于 2012-12-05T18:55:30.657 に答える