1

私のウェブページにはFancybox 2のサムネイルがあります。

片方の親指は機能していますが、もう一方の親指は機能していません。代わりに、ブラウザー タブで 2 番目の親指を開きます。

Fancybox で 2 番目の親指が正しく機能するようにするにはどうすればよいですか?

HTML: 

<script>
      $('.slideshow-thumbs2').fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        closeBtn: false,
        arrows: false,
        nextClick: true,
        helpers: {
          thumbs: {
            width: 50,
            height: 50
          }
        }
      });
</script>

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev1.jpg" title="Superjet 100">
  <img src="/SSJ100/Prev1.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt="" class="active"/>
</a>

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev2.jpg" title="Superjet 100">
  <img src="/SSJ100/Prev2.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt=""/>
</a>

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev3.jpg" title="Superjet 100">
  <img src="/SSJ100/Prev3.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt=""/>
</a>

<a class="slideshow-thumbs2" rel="slideshow-thumbs2" href="/SSJ100/Prev4.jpg" title="Superjet 100">
  <img src="/SSJ100/Prev4.jpg" width="220px" height="200px" style=" box-shadow: 0 0 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; " alt=""/>
</a>
4

2 に答える 2

6

jsFiddle DEMO: Fancybox v2.1.3 と Thumbnail Helper

貼り付けたコードは、最初の Fancybox アイテムにclass="active"他のサムが機能しない可能性があることを示しています。

ただし、それが問題でない場合、1 つの親指でのみ機能し、もう 1 つの親指では機能しない理由を判断するのに十分な情報はありません。

少なくともjQuery v1.6.4をロードし、 4 つの Fancybox2 ファイルを使用していることを確認してください。

2 つのファイルは Fancybox 用で、残りの 2 つのファイルは関数に示されているようにThumbnail Helper.fancybox()機能用です。これらのヘルパー ファイルは、ダウンロードしたFancybox 2インストール ファイルのヘルパー フォルダーにあります。

以下のFancybox 2 スクリーンショット内に表示されている4 つのミニサムネイルは、とのサムネイル ヘルパーファイルを使用したものです。jquery.fancybox-thumbs.cssjquery.fancybox-thumbs.css


ここに画像の説明を入力

于 2013-01-06T04:12:27.857 に答える
0

ready()次のようにメソッド内にコードをラップする必要があります。

<script>
 $(document).ready(function(){
      $('.slideshow-thumbs2').fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        closeBtn: false,
        arrows: false,
        nextClick: true,
        helpers: {
          thumbs: {
            width: 50,
            height: 50
          }
        }
      });
 });
</script>
于 2013-01-06T01:34:57.470 に答える