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