Question

使用fancybox的拳头时间并没有那么顺利...开始希望我没有打扰它。

我连续都有一些缩略图，很好，然后当我点击一个它打开THUMBNAIL而不是链接时更糟糕的是从DOM中删除缩略图。我已经在fancybox src中挖掘了这个问题，但是它有很多并且我可能最终会杀死功能所以我想我会在这里发布。

继承人代码：

原始HTML来自CMS，如下所示：

<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">

然后我在骨干视图渲染中运行一些东西，重要的是这个：

    var imgs = this.$el.find("img"); //:a jquery group of the img elements above
    this.content = this.$el.find("span.postcontent");
    //empty current
    this.content.empty();
    //make replacement
    for(i= 0;i<imgs.length;i++)
    {

        var curImg = $(imgs[i]);
        var curLink = $("<a/>");
        curLink.attr("href",curImg.attr('data-orig'))
        curLink.append(curImg);
        curLink.on("click",function(e){
            e.preventDefault();
            $.fancybox.open(imgs)
        });
        this.content.append(curLink)
    }

我现在已经渲染了这样的HTML：

   <a href="http://blah..blah..flickr..big..001_b.jpg">
    <img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
   </a>
   <a href="http://blah..blah..flickr..big..002_b.jpg">
    <img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
   </a>

到目前为止一切都那么好......现在，当我点击链接/拇指时它会做fancybox的东西，但是显示THUMBNAIL而不是链接的图像，在它的中间是微小的，它是什么样的黑色东西，真的很烦人的是点击的缩略图在页面本身已经完全从dom即：。

中删除

       <a href="http://blah..blah..flickr..big..001_b.jpg"> 
         ///THIS IS MISSING COMPLETELY..... ggggggrrrrr 
       </a>
       <a href="http://blah..blah..flickr..big..002_b.jpg">
        <img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
       </a>

Answer 1

我从来没有见过像这样的Fancybox。通常，您不需要像这样触发$.fancybox.open。您只需将fancybox()绑定到<a>代码即可。

HTML：

<a href="big-image.jpg" class="fancybox">
    <img src="thumbnail.jpg">
</a>

JavaScript的：

$('.fancybox').fancybox();

在让DOM看起来像这样之后，尝试使用该功能。

[编辑]

我无法让你的DOM操作完全正常工作，但我用这个小提琴进行测试，它似乎正在起作用：http://jsfiddle.net/haRnQ/4/

注意：我没有为演示导入样式或图片，所以它会没有样式，但它仍然有效。

Answer 2

我正在回答并对前两个进行投票，因为他们都有所帮助，但并不是最终答案。 documentation并不清楚如果你只使用“group”作为jquery数组，你还必须指定选项，因此corlenct答案是这样做（传递两个参数）：

            $.fancybox.open(imgs,
                {
                    href:this.href,
                    title:curImg.attr("title")
                }
            );

Answer 3

尝试更改此

$.fancybox.open(imgs)

由此

$.fancybox({
 href: this.href
});

因为imgs是缩略图的集合（所有<img>元素），它们会移到click上的fancybox，但不会在关闭后移回。

无论如何，我建议您将class添加到<a>，否则您页面中可能包含的任何其他锚点都会尝试打开fancybox。

Answer 4

我相信Fancybox更喜欢将图像包装在一个锚中。这一点很重要，因为Fancybox 在激活幻灯片放映时移除锚点，以防止在模态处于活动状态时单击锚点。

从拇指中调用FB的行为就像您在删除拇指时所遇到的那样，并且在模态关闭后没有恢复它。

这是我典型的FB设置（不是拇指库）：

<a href="image1.jpg" class="fb" rel="fb1"><img src="image1.jpg" alt="" /></a>
<div style="display: none">
    <a href="image2.jpg" class="fb" rel="fb1"></a>
    <a href="image3.jpg" class="fb" rel="fb1"></a>
    ...
</div>

如何防止fancybox删除点击的缩略图

4 个答案: