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>'}
        }
    });
});

我该怎么做？

Answer 1

在Fancybox 2上弹出自定义HTML：

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

Answer 2

看看这个demo

你正在寻找这样的东西吗？

Answer 3

您是否说过“ think facebook ”？那么你也可以考虑我的fancybox“a la”Facebook：

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

它需要fancybox v2.x

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

3 个答案: