fancybox拇指不工作

Question

我的网页 Fancybox 2 缩略图。

一只拇指正在工作，但第二只拇指没有。相反，它会在浏览器选项卡中打开第二个拇指。

如何修复此问题，以便第二个拇指在Fancybox中正常工作？

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>

Answer 1

jsFiddle DEMO: Fancybox v2.1.3 and Thumbnail Helper

您的粘贴代码显示第一个Fancybox项目有class="active"，这可能会影响其他拇指不工作。

然而，没有足够的信息可以确定为什么它仅适用于1个拇指，而不是另一个拇指，如果不是问题。

确保您已加载至少 jQuery v1.6.4 并使用 4个Fancybox2文件。

两个文件用于Fancybox， ，其余两个文件 用于 Thumbnail Helper 功能，如.fancybox()所示功能。您可以从已下载的 Fancybox 2 安装文件中找到这些帮助文件位于帮助文件夹中。

下面Fancybox 2屏幕截图中显示的 4迷你缩略图是使用jquery.fancybox-thumbs.css和jquery.fancybox-thumbs.css的缩略图助手文件。

Answer 2

您必须将代码包装在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>