CODEWITHSUNDEEP
jqueryfancybox-2
Phantom
Phantom

Reputation: 688

Fancybox to show inline content by function

how can I assign a fancybox to show inline content by function? For certain reasons I don't want to / can't use:

<a class="various" href="#inline">Inline</a>

How can I do it with a function?

Simplified example (which does not work):

$(document).on('click', '#test a', function()
{
        $.fancybox(
        {
            type: "inline",
            href: "#dialog"
        });
});

Upvotes: 0

Views: 995

Answers (1)

JFK
JFK

Reputation: 41143

Your code (like) :

jQuery(document).ready(function ($) {
    $(document).on('click', '#test a', function () {
        $.fancybox({
            type: "inline",
            href: "#dialog"
        });
    });
}); // ready

... works perfectly fine, but it's assumed you have :

1). a (hidden) div with an id="dialog" attribute like :

<div id="dialog" style="display:none">
    <h3>Inline Content</h3>
    <p>Lorem Ipsum</p>
    <p>more inline content</p>
</div>

2). an anchor <a> tag as a descendant of an element with an id="test" attribute like :

<div id="test">
    <a href="javascript:;" >some link here</a>
</div>

Notice you could also target the <a> descendant elements of #test with this delegated form :

jQuery(document).ready(function ($) {
    $("#test").on('click', 'a', function () {
        $.fancybox({
            type: "inline",
            href: "#dialog"
        });
    });
}); // ready

... instead of binding the click event to the entire document.

JSFIDDLE

Upvotes: 1

Related Questions