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

【问题标题】：how to prevent fancybox from deleting the clicked thumbnail如何防止fancybox删除点击的缩略图
【发布时间】：2012-06-16 20:13:12
【问题描述】：

第一次使用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>

到目前为止一切都很好...现在，当我单击链接/拇指时，它会做花式框的事情，但会显示 THUMBNAIL 而不是链接的图像，在它的 lightboxy 中中间很小，真正令人讨厌的是单击的缩略图页面本身现在已完全从 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>

【问题讨论】：

CMS 中的 HTML 是否可以不只是 Fancybox 格式？即<a href="big-image.jpg><img src="small-image.jpg"></a>
遗憾的是，这不是响应蹩脚设备的先决条件

标签： javascript jquery fancybox

【解决方案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/

注意：我没有为演示导入样式或图像，因此它不会设置样式，但它仍然有效。

【讨论】：

是的，它是一个大型的 MVC javascript 应用程序，它没有任何内容开始，因此它无法完成所有准备就绪/加载等设置
我的解决方案有它。如果您只是将 DOM 操作成这样，那么您需要一个简单的 jQuery 调用。我的 Fiddle 有一个工作示例（获取您的 HTML 并对其进行操作，使其看起来像我的 <a><img></a>，然后只需一个快速的 fancybox 调用）。这有点古怪，因为 CSS 没有加载（所以它没有注册关闭点击或任何东西），但我在本地使用来自 fancybox 的所有 CSS 和图像对其进行了测试，它工作正常。

【解决方案2】：

尝试更改此设置

$.fancybox.open(imgs)

通过这个

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

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

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

【讨论】：

是的，使用 href 方式会遗憾地忽略“组”，这意味着没有后退/下一个等

【解决方案3】：

我正在回答并投票赞成前两个，因为它们都有帮助，但不是确定的答案。 documentation 不清楚，如果您只使用“组”作为 jquery 数组，您还必须指定选项，因此正确的答案是这样做（传递两个参数）：

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

【讨论】：

【解决方案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>

【讨论】：