0

1）fancyboxの2つのギャラリーに分割された画像がたくさんあります。以下のコードを使用して、タイトルを別々の行に分割しています。私の HTML には、タイトルを含む個別の div があり、それぞれが div にも含まれています。機能しますが、両方のギャラリーに同時にタイトルを追加しているため、画像 1 は両方のギャラリーで同じ名前になります。

2 つのギャラリーに別々のタイトルを挿入するにはどうすればよいですか?

$(document).ready(function() {
    $(".fancybox").fancybox({
            openEffect  : 'elastic',
            closeEffect : 'elastic',
            arrows :    true,
            helpers : { 
                    title   : { type : 'inside' },
                    buttons : {}
            }, // helpers
            afterLoad : function() {
                this.title = $("#fancyboxTitles div").eq(this.index).html();
            } // afterload
    }); // fancybox
}); // ready

2) また、画像が複数行のタイトルと共に表示され、[次へ] をクリックして戻ると、タイトルが消えます。どうすれば修正できますか？ありがとう！

4

1 に答える 1

0

あなたのコードは、私がここに投稿したもののほとんどのコピーですが、そのような投稿が書かれた時点では、fancybox のバージョンは 2.0.1 でした。それ以来、いくつかの変更 (主に改善とバグ修正) が行われているため、カスタム スクリプトとhtml構造にいくつかの変更を加える必要があります。また、fancybox の最新バージョン (現在は 2.0.6) に更新する必要がある場合があります。

rel次のような別の属性を設定してギャラリーをグループ化したとします。

<a class="fancybox" rel="gallery1" href="images/01a.jpg">image 1 - gallery 1</a>
<a class="fancybox" rel="gallery1" href="images/02a.jpg">image 2 - gallery 1</a>

<a class="fancybox" rel="gallery2" href="images/01b.jpg">image 1 - gallery 2</a>
<a class="fancybox" rel="gallery2" href="images/02b.jpg">image 2 - gallery 2</a>
<a class="fancybox" rel="gallery2" href="images/03b.jpg">image 3 - gallery 2</a>

1)。次のように、各ギャラリーのタイトルをさまざまな部門にグループ化します。

<div id="gallery1">
 <div>title image 1 / gallery 1</div>
 <div>title image 2 / gallery 1</div>
</div>
<div id="gallery2">
 <div>title image 1 / gallery 2</div>
 <div>title image 2 / gallery 2</div>
 <div>title image 3 / gallery 2</div>
</div>

重要:各ギャラリーの属性IDと等しい親コンテナーにを割り当てたことに注意してください。rel

2)。現在、バージョン 2.0.6 では、afterLoadv2.0.1 で行ったようにコールバックを使用できません (これにより、タイトルが消えます)...beforeShow代わりに使用します。

したがって、スクリプトのこの部分を置き換えます。

afterLoad : function() {
 this.title = $("#fancyboxTitles div").eq(this.index).html();
} // afterload

これで：

beforeShow  : function() {
 var gallery = $(this.element).attr("rel");
 this.title = $("#"+gallery+" div").eq(this.index).html();
} // beforeShow

これでうまくいくはずです。

PS。v2.0.6については別の投稿に追記します

于 2012-06-03T08:07:36.627 に答える