如何将自定义HTML添加到Fancybox？

Question

我有一个简单的图库，用户可以点击缩略图，然后Fancybox会打开全尺寸图像。很好，它起作用了。现在，我想添加一些自定义 HTML 以便将图像包含在一个包装器中，该包装器在底部具有标题，并且照片评论位于照片的右侧（类似 Facebook）。我该如何做？我已经试了几个小时，但我只能让原始照片在 Fancybox 中打开。这是我正在使用的代码:

$(document).ready(function() {
    $(".fancybox-button").fancybox({
        padding     : 0,
        prevEffect  : 'none',
        nextEffect  : 'none',
        closeBtn    : false,
        helpers : { 
            title       : { type : 'inside' },
            buttons     : {}
        }
    });
});

我正在寻找类似以下的内容（请注意最后一行）：

$(document).ready(function() {
    $(".fancybox-button").fancybox({
        padding     : 0,
        prevEffect  : 'none',
        nextEffect  : 'none',
        closeBtn    : false,
        helpers : { 
            title       : { type : 'inside' },
            buttons     : {},
            html : {'<div>my custom html</div>'}
        }
    });
});

我该如何做这件事？

- John Anderson

---

请查看fancybox网站上的此页面。您将在那里找到所需示例。 - madfriend

@madfriend：链接错误，他正在使用版本2（我猜你知道v1.x和v2.x有两个不同的网站，对吗？） - JFK

抱歉，链接。 - madfriend

Answer 1

要在Fancybox 2上弹出自定义HTML：

$.fancybox({ content: '<div>my custom html</div>' });

- Aximili

Answer 2

看看这个演示

你是否在寻找像这样的东西？

- Kishore

---

是的！我正在努力理解你做了什么。我想我明白了？ - John Anderson

只需隐藏您想在fancy box中显示的div。使用锚标记的href等于div，并在onclick上调用锚标记上的fancy box函数。就这样。 - Kishore

Answer 3

你是说“像Facebook一样思考”吗？那么你也可以考虑我的fancybox，“a la” Facebook：

http://www.picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html

需要使用fancybox v2.x版本

- JFK