1

8枚の写真のギャラリーを表示するようにFancyboxをセットアップしました。最初の 1 つがページに表示され、クリックするとギャラリーが開きます。

私が今やろうとしているのは、別のギャラリーを追加することです。ただし、画像ではなく HTML コンテンツを使用することを除きます。ギャラリーをナビゲートするときに本をめくるようなものです。しかし、画像をクリックしても何も表示されません。

これが私のFancyboxスクリプトです：

  <script type="text/javascript">
     $(document).ready(function(){   
        $("a.fancybox").fancybox({
           openEffect    :   'none',
           closeEffect   :   'none',
           nextEffect    :   'none',
           prevEffect    :   'none',
           nextSpeed     :   0,
           prevSpeed     :   0,
           preload       :   3,
           'padding'     :   15,
           'speedIn'     :   0, 
           'speedOut'    :   0, 
           'overlayShow' :   true
        });
     });
  </script>

HTML は次のとおりです。

<a class='fancybox' rel='{$id}' href=#popuptext><img src='galleryimage.jpg'></a>
<div style='display: none'><div id='popuptext'>Page 1 text</div></div>
<a class='fancybox' rel='{$id}' href=#popuptext'></a>\n
<div style='display: none'><div id='popuptext'>Page 2 text</div></div>
<a class='fancybox' rel='{$id}' href=#popuptext'></a>\n
<div style='display: none'><div id='popuptext'>Page 3 text</div></div>
<a class='fancybox' rel='{$id}' href=#popuptext'></a>\n
<div style='display: none'><div id='popuptext'>Page 4 text</div></div>
4

1 に答える 1

1

IDは一意である必要があるため、複数の要素で同じID を共有することはできません。#popuptext

実際には、各ページに異なるIDを割り当て、それぞれの異なるセレクター ( ID ) にリンク ターゲティングを割り当てる必要があります。

<a class="fancybox" href="#page1" rel="gallery"><img src="galleryimage.jpg" alt=""/></a>

<div style="display: none"> 
    <a class="fancybox" href="#page2" rel="gallery"></a>
    <a class="fancybox" href="#page3" rel="gallery"></a>

    <div id="page1">page 1 text lorem ipsum</div>
    <div id="page2">page 2 content and more content</div>
    <div id="page3">page 3 text blah, blah, blah</div>
</div>

最初のリンク (画像のサムネイル付き) はギャラリーを開きます。他のリンクは、サムネイルを表示するために表示する必要はありません。

その後、スクリプトが機能します

$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    nextEffect: 'none',
    prevEffect: 'none',
    nextSpeed: 0,
    prevSpeed: 0,
    preload: 3,
    padding: 15
    // 'speedIn'    :   0, // not a valid option for v2.x
    //'speedOut'    :   0, // not a valid option for v2.x
    //'overlayShow' :   true // not a valid option for v2.x
});

v2.x では無効ないくつかのオプションをコメントアウトしたことに注意してください。v2.x で使用する必要があるオプションについては、ドキュメントを確認してください。

JSFIDDLEを参照してください

于 2013-06-10T16:15:18.817 に答える