How do I add custom HTML to 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>'}
        }
    });
});

How would I do this?

回答1:

To popup custom HTML on Fancybox 2:

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

回答2:

Look at this demo

are you looking for something like this?

回答3:

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

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

It requires fancybox v2.x

来源：https://stackoverflow.com/questions/11355635/how-do-i-add-custom-html-to-fancybox

标签

jquery

fancybox