1

我的网页中有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>
4

2 回答 2

6

jsFiddle DEMO：Fancybox v2.1.3 和缩略图助手

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

但是，没有足够的信息来确定为什么它只适用于 1 个拇指而不是另一个拇指（如果这不是问题）。

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

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

下面Fancybox 2 屏幕截图中显示的4 个迷你缩略图是使用和的Thumbnail Helper文件。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 回答