Question

我正在尝试将FancyBox用于36个图像的图库，但每当我点击图像触发FancyBox时，缩略图助手就会做两件非常奇怪的事情：

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

2）缩略图帮助器不会转到点击图像的相应缩略图。相反，它会转到我在画廊末尾制作的图像的新缩略图。

这是我到目前为止的链接：http://lalalichan.com/temp/process_test6.html

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

其他一切都像它应该的那样工作;我可以在我的图像之间导航，我可以关闭FancyBox，当我点击我想要的缩略图时，会出现正确的相应图像。

正是这种令人讨厌的东西正在制造一个平稳的功能。

任何形式的帮助都会受到赞赏，非常感谢！

Answer 1

Fancybox会为每个链接生成一个缩略图，并绑定到该类，如果你有这个脚本

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

和6个链接与绑定到fancybox的选择器相同的类，如

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

然后fancybox将生成6个缩略图......到目前为止一直很好。

在您的案例中发生了什么，当您加载（演示）页面时，有class="fancybox"的6个（隐藏）链接。还有一个空容器（id="content"），您可以在其中显示更大的缩略图

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

但是当您点击页面底部的任何（非花式框）缩略图时，带有id="content"的容器会填充第7个链接class="fancybox"，并复制其中一个原件链接，取决于您点击的缩略图...因此，在此操作后，将在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;
});

BTW，我不会添加内联样式（使用style属性），我会使用样式表。

FancyBox Thumbnail Helper在缩略图末尾创建新缩略图，而不是直接调用它

1 个答案: