Triggers FancyBox缩略图助手在缩略图的末尾创建新的缩略图，而不是直接调用它_Triggers_Fancybox_Gallery_Thumbnails

Triggers FancyBox缩略图助手在缩略图的末尾创建新的缩略图，而不是直接调用它

triggers

Triggers FancyBox缩略图助手在缩略图的末尾创建新的缩略图，而不是直接调用它,triggers,fancybox,gallery,thumbnails,Triggers,Fancybox,Gallery,Thumbnails,我试图使用FancyBox创建36幅图像的图库，但每当我点击图像触发FancyBox时，缩略图辅助程序都会做两件非常奇怪的事情： 1）加载我在图库缩略图末尾单击的图像的额外缩略图 <div style="width: 820px; height: 546px;" id="content"></div> 2）缩略图辅助对象不会转到单击图像的相应缩略图。取而代之的是，它转到了我在图库末尾制作的图像的新缩略图以下是到目前为止我所拥有的链接：在底部，您将看到将图像触发到

我试图使用FancyBox创建36幅图像的图库，但每当我点击图像触发FancyBox时，缩略图辅助程序都会做两件非常奇怪的事情：

1）加载我在图库缩略图末尾单击的图像的额外缩略图

<div style="width: 820px; height: 546px;" id="content"></div>

2）缩略图辅助对象不会转到单击图像的相应缩略图。取而代之的是，它转到了我在图库末尾制作的图像的新缩略图

以下是到目前为止我所拥有的链接：

在底部，您将看到将图像触发到显示区域的缩略图。显示在该显示区域中的图像是随后触发FancyBox的链接

其他一切都在按预期运行；我可以在我的图像之间导航，我可以关闭FancyBox，当我点击我想要的缩略图时，会出现正确的对应图像

正是这种讨厌的东西让原本平滑的功能变得糟糕

任何形式的帮助都将不胜感激，提前感谢

Fancybox将为每个链接生成一个缩略图，其中类绑定到该链接，因此如果您有此脚本

$('.fancybox').fancybox({});

与绑定到fancybox的选择器具有相同类的6个链接

<a class="fancybox" href="{target}" .... etc

但是，当您单击页面底部的任何（非fancybox）缩略图时，带有

id=“content”

的容器将填充带有

class=“fancybox”

的第7个链接，根据您单击的缩略图，复制一个原始链接。。。因此，在该操作之后，fancybox中将生成7个缩略图

由于此链接附加在桩的末端，因此它也将放置在库的末端

您正在使用另一个插件（thumbnailScroller），我相信它正在向DOM添加额外的元素

编辑：提出的新问题：

我仍然不完全理解点击滚动缩略图会如何用第七个链接填充#content div。在保留滚动条的所有功能的同时，如何阻止它这样做

您的代码需要一些调整：首先，您正在复制您的fancybox自定义脚本。。。你只需要一次。其次，您只需要加载jquery.fancybox.js或jquery.fancybox.pack.js，但不能同时加载两者

关于您询问的功能，我会做的是：

1：将隐藏链接从DIV id=“load”移动到DIV id=“content”
2：将css更改为

#content a {
position:absolute;
visibility: hidden;
}

3：更改此脚本

$(function(){
        $('.image').live('click',function(){
            var href = $(this).attr('href');
                if ($('#content').is(':visible')) {
                    $('#content').css('visibility','hidden');
                    }
                $('#content').load('#load #'+href,function(){
                    $('#content').css('visibility','visible').hide().fadeIn('3000');
                });
        });
        return true;
})

进入这个

$(function(){
        $('.image').each(function(i){
            $(this).bind('click', function(){
                $("#content a").css('visibility','hidden').eq(i).css('visibility','visible').hide().fadeIn('3000');
            }); // bind
        }); // each
        return false;
});

假设缩略图的顺序与

DIV

中带有

id=“content”

的链接的顺序相同

我还没有测试过代码，但这基本上就是解决问题的方法

编辑2：代码改进了对css和js的一些更改

新css：

#content a {
position:absolute;
display: none; /* was visibility: hidden; */
}

new js：在页面加载时显示第一个大缩略图

$(function(){
 $("#content a").eq(0).show();
 $('.image').each(function(i){
  $(this).bind('click', function(){
   $("#content a").hide().eq(i).fadeIn('3000');
  }); // bind
 }); // each
 return false;
});

顺便说一句，我不会添加内联样式（使用

style

属性），而是使用样式表。

Fancybox将为绑定了类的每个链接生成缩略图，因此如果您有此脚本

$('.fancybox').fancybox({});