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

时间:2012-06-13 19:43:22

标签: javascript jquery fancybox

使用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>

4 个答案:

答案 0 :(得分:2)

我从来没有见过像这样的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/

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

答案 1 :(得分:2)

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

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

答案 2 :(得分:1)

尝试更改此

$.fancybox.open(imgs)

由此

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

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

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

答案 3 :(得分:0)

我相信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>