CODEWITHSUNDEEP
jqueryfancybox-2
Peter
Peter

Reputation: 99

Fancybox through multiple inline DIvs

Fancybox allows us to trigger a modal based on hidden inline HTML 

<div id="inline1" style="width:400px;display: none;">
<p>Modal content 1</p>
</div>

But what I can't figure out is how to make several inline DIVs part of the same gallery.

Fancybox says to add rel="gallery" to images to make them part of a gallery but the same doesn't work for DIVs.

Upvotes: 2

Views: 2317

Answers (1)

JFK
JFK

Reputation: 41143

You should add rel="gallery" to the anchors that trigger fancybox regardless what those anchors are targeting to (images, inline divs, etc) like :

html :

<a class="fancybox" href="#inline1" rel="gallery">open inline 1</a>
<a class="fancybox" href="#inline2" rel="gallery">open inline 2</a>
<a class="fancybox" href="#inline3" rel="gallery">open inline 3</a>

<div id="inline1" style="width:400px;display: none;">
    <p>Modal content 1</p>
</div>
<div id="inline2" style="width:400px;display: none;">
    <p>Modal content 2</p>
</div>
<div id="inline3" style="width:400px;display: none;">
    <p>Modal content 3</p>
</div>

js :

$(".fancybox").fancybox({
    //API options
});

See JSFIDDLE

On the other hand, if you just want a single anchor that triggers the full gallery instead of having an anchor for each inline div, then your best bet is to trigger fancybox programmatically like :

html :

<a class="fancybox" href="#nogo">open gallery of inline divs</a>

<div id="inline1" style="width:400px;display: none;">
    <p>Modal content 1</p>
</div>
<div id="inline2" style="width:400px;display: none;">
    <p>Modal content 2</p>
</div>
<div id="inline3" style="width:400px;display: none;">
    <p>Modal content 3</p>
</div>

Notice we don't need the rel attribute because we are not grouping anchors.

js :

$(".fancybox").on("click", function () {
    // set gallery targets
    var gallery = [{
        href: "#inline1"
    }, {
        href: "#inline2"
    }, {
        href: "#inline3"
    }];
    // triggers fancybox programmatically
    $.fancybox(gallery, {
        // API options here
    });
    return false; // prevents default and stops propagation 
});

See JSFIDDLE

Upvotes: 3

Related Questions