0

モジュールfancyboxを使用して、モーダルページ（fancybox）にフォトギャラリーを表示しようとしています。

問題は、画像が11回表示されていることですが、その理由はわかりません。私はすでに検索していて、正しい構文を使用しています。

これが私のコードです：

JQUERY

$(".testGatorade[rel=group1]").fancybox({
            'speedIn'        :    200,
            'speedOut'        :    200,
            'overlayShow'    :    false,
            'modal'          : true,
            'showCloseButton' : true,
            'titleShow'       : true,
            'titlePosition'   : 'over',
            'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + currentIndex + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });

HTML

<div id="slider1">
                <a class ="testGatorade" href = "images/eagle.jpg" rel="group1" title = "Test de titre">
                    <img src = "images/eagle.jpg" width = "300" height = "300"/>
                </a>
                <a class ="testGatorade" href = "images/ring.jpg" rel="group1"></a>
                <a class ="testGatorade" href = "images/tarantula.jpg" rel="group1"></a>
            </div>

助けてくれてありがとう、

私は4日からそれに取り組んでいます。

4

2 に答える 2

0

同様の問題があり、私の場合は a-tag の非標準準拠の使用が原因です。a-tag 内に非インライン タグ (div と imgs) がありますが、これは html5 標準では問題ないはずです (こちらを参照してください: http://html5doctor.com/block-level-links-in-html-5 ) 、しかしそれ以前は無効です。Mozilla と Chrome は、a-tag を複製/乗算することにより、これを標準準拠の a-tag にレンダリングします。(DOM インスペクタで確認できます)

そして、a-tags の重複は、fancybox ギャラリーの画像の重複を意味します...

解決策は、標準準拠の a-tags を使用することです。そのため、これの代わりに:

<div>
 <a href="..." class="fancybox" rel="gallery1">
  <img src="..." alt="..." />
  <div class="overlay">
   <div class="overlay_title">...</div>
   <div class="overlay_text"><p>...</p></div>
  </div>
 </a>
</div>

これを使って：

<div>
 <a href="..." class="fancybox" rel="gallery1" style="position: absolute; top: 0px; width: 100%; height: 100%; z-index: 100;">
  <span>&nbsp;</span>
 </a>
 <img src="..." alt="..." />
 <div class="overlay">
  <div class="overlay_title">...</div>
  <div class="overlay_text"><p>...</p></div>
 </div>
</div>

多分私はこれを手伝うことができます...

于 2015-09-11T20:22:15.453 に答える