1

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

4 回答 4

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/

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

于 2012-06-13T20:36:00.523 回答
2

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

            $.fancybox.open(imgs,
                {
                    href:this.href,
                    title:curImg.attr("title")
                }
            );
于 2012-06-13T21:27:33.947 回答
1

尝试改变这个

$.fancybox.open(imgs)

这样

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

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

在任何情况下，我都建议您添加一个class，<a>否则您页面中可能拥有的任何其他锚点都会尝试打开fancybox。

于 2012-06-13T20:37:39.250 回答
0

I believe Fancybox prefers wrapping your images in an anchor. This is important to note as Fancybox removes the anchor when activating a slide show to prevent clicking on the anchor when the modal is active.

Calling FB from the thumb behaves like you have experienced by deleting the thumb and not recovering it after the modal is closed.

This is my typical FB setup (not a thumb gallery):

<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-01T22:04:19.577 回答