3

重複の可能性：重複
のない同じギャラリーへのFancyboxの複数のリンク

jQuery1.8.3でfancybox2.1.0を使用して画像のギャラリーをロードしていますが、希望どおりに機能していません。大きなメイン画像があり、その下にギャラリーのサムネイルのセットがあります。メイン画像またはサムネイルのいずれかをクリックすると、fancyboxギャラリーが開きます。

問題は、メイン画像がサムネイルにも表示されることです。ギャラリーを起動すると、最初の画像が繰り返されます：1.jpg、1.jpg、2.jpg、3.jpgなど。

メイン画像でギャラリーライトボックスをトリガーしたいのですが、含まれていませんが、正しく表示されないようです。何か提案をいただければ幸いです。

私のマークアップ：

<a class="product-image fancybox" data-fancybox-group="gallery" id="main-image" title="" href="1.jpg">
  <img id="image" src="1.jpg" height="320" width="320" alt="" title="" />
</a>

<ul>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="1.jpg" title="Image 1">
      <img src="1.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="2.jpg" title="">
      <img src="2.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="3.jpg" title="">
      <img src="3.jpg" width="100" height="100" alt="" />
    </a>
  </li>

</ul>

私のスクリプト：

var $j = jQuery.noConflict(); 
$j(document).ready(function() {
    $j('.fancybox').fancybox({
        nextEffect: 'fade',
        prevEffect: 'fade',
        helpers: {
            title : {
                type : 'float'

            }
        }
    });
});
4

1 に答える 1

2

これを試してください：html（fancyboxメインimgのクラスを削除）そしてにrel追加data-fancybox-group

    <a class="product-image" data-fancybox-group-rel="gallery" id="main-image" title="" href="1.jpg">
  <img id="image" src="1.jpg" height="320" width="320" alt="" title="" />
</a>

<ul>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="1.jpg" title="Image 1">
      <img src="1.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="2.jpg" title="">
      <img src="2.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="3.jpg" title="">
      <img src="3.jpg" width="100" height="100" alt="" />
    </a>
  </li>
</ul>

js

  $('a.product-image').click(openFancybox);

function openFancybox(){
 $.fancybox.open($(this).attr('data-fancybox-group-rel'));
}

ここのドキュメントを参照してくださいAPIメソッド[かっこいい、このコードはテストされていません];）]頑張ってください

于 2013-01-15T13:21:51.327 に答える