FancyBox缩略图助手在缩略图的末尾创建新缩略图，而不是直接调用它 [英] FancyBox Thumbnail Helper creates new thumbnail at end of thumbnails instead of calling it directly

问题描述

我正在尝试使用FancyBox来显示36张图片，但是每当我单击该图片触发FancyBox时，缩略图助手都会做2件非常奇怪的事情：

I'm trying to use FancyBox for a gallery of 36 images, but whenever I click on the image to trigger FancyBox, the thumbnail helper does 2 really odd things:

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

1) loads an extra thumbnail of the image I clicked at the END of the gallery thumbnails

2）缩略图助手不会转到单击的图像的相应缩略图。而是转到我在画廊尽头制作的那张图像的新缩略图。

2) the thumbnail helper does not go to clicked image's corresponding thumbnail. instead, it goes to the new thumbnail of that image I made at the end of the gallery.

以下是我到目前为止所拥有内容的链接： http://lalalichan.com/temp/process_test6.html

here is a link to what I have so far: http://lalalichan.com/temp/process_test6.html

在底部，您将看到将图像触发到显示区域的缩略图。

At the bottom, you'll see the thumbnails that trigger the images into a display area. the images that appear in that display area are links that then trigger FancyBox.

其他所有内容都按预期的方式工作；我可以在图像之间导航，可以关闭FancyBox，然后单击缩略图时希望显示正确的对应图像。

everything else is working like it's supposed to; i can navigate between my images, i can close out of FancyBox, and when I click on the thumbnail that I want the correct corresponding image appears.

正是这种麻烦

感谢任何形式的帮助，

推荐答案

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

Fancybox will generate a thumbnail for each link with the class bound to it so if you have this script

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

以及6个与选择器绑定到同一类的链接绑定到fancybox上，例如

and 6 links with the same class as the selector bound to fancybox like

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

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

then fancybox will generate 6 thumbnails ... so far so good.

您的情况情况下，当您加载（演示）页面时，有6个（隐藏的）链接带有 class = fancybox 。还有一个空容器（ id = content ），您可以在其中显示较大的缩略图

What is happening in your case, when you load your (demo) page, there are 6 (hidden) links with class="fancybox". Also there is an empty container (id="content") where you display your bigger thumbnails

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

但是，当您单击页面底部的任何（非花式框）缩略图时，带有 id = content 的容器中填充了带有 class = fancybox 的第七个链接，其中您的原始链接，具体取决于您单击的缩略图...因此在执行此操作后，fancybox中将生成7个缩略图。

but when you click on any of the (non-fancybox) thumbnails at the bottom of your page, the container with id="content" is populated with a 7th link with class="fancybox", duplicating one of your original links, depending on which thumbnail you clicked ... so 7 thumbnails will be generated in fancybox after this action.

由于此链接附加在

您正在使用另一个插件（thumbnailScroller），我相信这是在DOM中添加了额外的元素。

Your are using another plugin (thumbnailScroller), which I believe is adding the extra element to the DOM.

编辑：提出新问题：

我仍然不喜欢不能完全理解单击滚动缩略图将如何在第七个链接中填充#content div。在保留滚动条的所有功能的同时，如何停止它？

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

Your code needs a bit of tweaks: first, you are duplicating your fancybox custom script ... you just need it once. Second, you just need to load either jquery.fancybox.js or jquery.fancybox.pack.js but not both.

关于您要求的功能，我会怎么做是：

Regarding the functionality you ask, what I would do is:

1：将隐藏的链接从DIV id = load移至DIV id = content

2：更改CSS

1: Move the hidden links from the DIV id="load" to DIV id="content"
2: change the css to

#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

EDIT 2: code improved Some changes to the css and js

新CSS：

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

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

new js: displays the first big thumbnail on page load

$(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，我不会添加内联样式（使用样式属性），我会改用样式表。

BTW, I wouldn't add inline styles (using the style attribute), I would use style sheets instead.

这篇关于FancyBox缩略图助手在缩略图的末尾创建新缩略图，而不是直接调用它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！