如何将自定义HTML添加到Fancybox? [英] How do I add custom HTML to Fancybox?

问题描述

我有一个简单的图像库，用户可以在其中单击缩略图图像，Fancybox将打开完整尺寸的图像.太好了，它有效.现在，我想添加一些自定义HTML，以便将图像包含在包装中，该包装的底部具有标题，照片的注释位于照片的右侧(请考虑使用facebook).我该怎么做呢?我已经尝试了几个小时，以找出解决方法，而我所能做的就是让原始照片在Fancybox中打开.这是我正在使用的代码:

I have a simple image gallery, where users can click on thumbnail images and Fancybox will open up the full-size image. Great, it works. Now, I want to add some custom HTML so the image is contained in a wrapper that has the title at the bottom, and photo comments to the right of the photo (think facebook). How do I do this? I've been trying for hours now to figure out how to do this, and all I can do is get the original photo to open up with Fancybox. Here is the code I am using:

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

我正在寻找这样的东西(注意最后一行):

I'm looking for something like this (note the last line):

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

我该怎么做?

推荐答案

在Fancybox 2上弹出自定义HTML:

To popup custom HTML on Fancybox 2:

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

这篇关于如何将自定义HTML添加到Fancybox?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！