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

第一次使用fancybox，结果不是很好。。我开始希望我没有为此烦恼

我有一些缩略图排成一行，很好，然后当我单击其中一个时，它会打开缩略图而不是链接。更糟糕的是，它会从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)
    }

var imgs=this.$el.find（“img”）；/：上面img元素的jquery组
this.content=this.$el.find（“span.postcontent”）；
//空电流
this.content.empty（）；
//更换
对于（i=0；i我从未见过像这样使用Fancybox。通常，您不需要触发
$.Fancybox。像那样打开
。您只需将
Fancybox（）
绑定到

注意：我没有为演示导入样式或图像，因此它将没有样式，但它仍然可以工作。
我从未见过这样使用Fancybox。通常，您不需要触发
$.Fancybox。像那样打开
。您可以将
Fancybox（）
绑定到

注意：我没有为演示导入样式或图像，因此它将被取消样式，但仍然有效。
尝试更改此选项

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

由此

$.fancybox.open(imgs)

因为
imgs
是您的缩略图（所有
元素）的集合，它们在
单击时被移动到fancybox，但在关闭后不会移回

在任何情况下，我都建议您将
类添加到
中，否则页面中的任何其他锚都会尝试打开fancybox。
尝试更改此选项

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

由此

$.fancybox.open(imgs)

因为
imgs
是您的缩略图（所有
元素）的集合，它们在
单击时被移动到fancybox，但在关闭后不会移回

无论如何，我建议你在
中添加一个
类
，否则你的页面中的任何其他锚都会尝试打开fancybox。
我回答并投票支持前两个，因为它们都有帮助，但不是最终的答案。不清楚是否只使用“组”作为jquery数组，还必须指定选项，因此正确的答案是这样做（传递两个参数）：

我回答并投票支持前两个，因为它们都有帮助，但不是最终答案。不清楚的是，如果仅将“组”用作jquery数组，则还必须指定选项，因此正确的答案是这样做（传递两个参数）：

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

从thumb调用FB的行为与您在模式关闭后删除thumb而不恢复它的经历类似

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


...
我认为Fancybox更喜欢将图像包装在锚定中。这一点很重要，因为Fancybox在激活幻灯片放映时会移除锚定，以防止在模式激活时单击锚定

从thumb调用FB的行为与您在模式关闭后删除thumb而不恢复它的经历类似

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


...
来自CMS的HTML不仅仅是Fancybox格式吗？也就是说，
不幸的是，它不是响应蹩脚设备的预请求。来自CMS的HTML不仅仅是Fancybox格式吗？也就是说，
不幸的是，它不是响应蹩脚设备的预请求。是的，它是一个大型MVC javascript应用程序，没有任何内容可供选择但是，我的解决方案有它。如果您只是操纵DOM使其看起来像那样，那么您需要一个简单的jQuery调用。My Fiddle有一个它工作的示例（获取HTML并操纵它使其看起来像我的
，然后只需要一个快速的fancybox调用）.这有点奇怪，因为CSS没有加载（所以它没有注册关闭点击或任何东西），但我用fancybox中的所有css和图像对它进行了本地测试，它成功了。是的，它是一个大型MVC javascript应用程序，没有任何内容可供使用，因此它无法在ready/load etcMy解决方案上完成所有设置。不过，我的解决方案有它。如果你只是操纵DOM使其看起来像那样，那么你需要一个简单的jQuery调用。我的Fiddle有一个sampl这是一个有点奇怪的问题，因为CSS没有加载（所以它没有注册一个关闭的点击或任何东西），但我用fancybox的所有css和图像在本地进行了测试，结果成功了。是的，使用href方式会很遗憾地忽略“组”，这意味着没有后退/下一步等等，使用href方式会很遗憾地忽略“组”，这意味着没有后退/下一步等等
$.fancybox.open(imgs)

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

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

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