jQuery 如何将自定义 HTML 添加到 Fancybox?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11355635/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:31:17  来源:igfitidea点击:

How do I add custom HTML to Fancybox?

jqueryfancybox

提问by John Anderson

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:

我有一个简单的图片库,用户可以在其中单击缩略图,Fancybox 将打开全尺寸图片。太好了,它有效。现在,我想添加一些自定义 HTML,以便图像包含在底部有标题的包装器中,照片右侧有照片评论(想想 facebook)。我该怎么做呢?我已经尝试了几个小时来弄清楚如何做到这一点,我所能做的就是用 Fancybox 打开原始照片。这是我正在使用的代码:

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

How would I do this?

我该怎么做?

回答by Aximili

To popup custom HTML on Fancybox 2:

在 Fancybox 2 上弹出自定义 HTML:

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

回答by Kishore

Look at this demo

看看这个演示

are you looking for something like this?

你在寻找这样的东西吗?

回答by JFK

Did you say "think facebook" ? then you could also consider my fancybox "a la" Facebook :

你说“想脸书”吗?那么你也可以考虑我的fancybox“a la”Facebook:

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

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

It requires fancybox v2.x

它需要fancybox v2.x