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

第一次使用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不是链接的图像，在它的lightcarbon事情的中间小，什么是真正烦人的是，点击缩略图页面本身现在已经完全从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>

来源

2012-06-13 Alex

可以从CMS的HTML不只是在格式的fancybox？即'' – CWSpear

可悲的是它不是一个预先要求回应蹩脚的设备 – Alex

我回答并投票了前两个，因为他们都帮助，但不是确定的答案。该documentation并不清楚，如果你只使用“组”为jQuery的数组，你还必须指定选项因此correnct答案是这样做（传递两个参数）：

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

来源

2012-06-13 21:27:33 Alex

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

注：我没有导入演示的样式或图像，所以它将是无风格的，但它仍然有效。

来源

2012-06-13 20:36:00 CWSpear

是的，这是一个大的MVC JavaScript应用程序，它没有任何内容开始，所以它不能做所有的设置就绪/加载等 – Alex

不过，我的解决方案有它。如果你只是操纵你的DOM看起来像那样，那么你需要一个简单的jQuery调用。我的小提琴有一个它的工作样本（把你的HTML和操纵它看起来像我的''，然后只是一个快速的fancybox调用）。这有点古怪，因为CSS没有加载（所以它没有注册一个关闭点击或任何东西），但我用本地测试它的所有css和来自fancybox的图像，它的工作。 – CWSpear

尝试改变这种

$.fancybox.open(imgs)

本

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

因为imgs是您的缩略图（所有<img>元素），它被移动到的fancybox上click但不收集结束后搬回。

在任何情况下，我建议你添加一个class到<a>否则任何其他锚，你可能在你的网页将尝试打开的fancybox。

来源

2012-06-13 20:37:39 JFK

是的，做href的方式会忽略'群'悲伤，这意味着没有回/下一个等 – Alex

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

来源

2015-04-01 22:04:19

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

回答

相关问题