display a new content in the jquery fancybox

Question

I have a jQuery fancybox popup that works just fine. Let's say the popup contains a link <a href="http://example.com/foo/bar.html">show another content of this fancybox</a>

When you click on that link, the fancybox popup disappears, the whole browser displays http://example.com/foo/bar.html page (makes sense).

This solution doesn't work either:

<a href="#" onclick="alert('we are on the way to change the content of the fancybox');self.parent.location='http://example.com/foo/bar.html';alert('new content should be applied already');return false;">You are clicking on the link in the fancybox to apply a new content to this fancybox</a>

Any suggestions how to replace the old content with a new content in the same fancybox popup? Thank you.

Just added: Seems like I'm on the half of the way with using:

$(".fancybox-inner").load("http://example.com/foo/bar.html");

Am I on the right track or it might be done in a better way? Thank you.

Answer 1

If you want to use your own content and not the one set in the div you can use the content or href content (content for any content and href for an image)

$('.my-lightbox').click(function () {
    $('.my-lightbox').fancybox({
        padding: 20,
        prevEffect: 'none',
        nextEffect: 'none',
        href: "your image here",
        //content: "your content here"
    });

});