CODEWITHSUNDEEP
jqueryfancybox
user2278752
user2278752

Reputation: 41

Fancybox: Would like to use different element than a/anchor

I'd like to use Fancybox for previews of images on my site, which is a bit more complex than a bucket of images. I'd like to apply Fancybox to a div instead of an a/anchor, and use some other attribute to assign the image URL. Is this possible in Fancybox?

The format I'd like is, for example:

<div fancyimage="URL" class="fancybox">
    <img src="THUMB" />
    <a href="STANDARD IMAGE LINK">CAPTION</a>
<div>

This way, if the user doesn't have Javascript enabled (or there's a bug, etc.), they'd still be able to access the image. Thanks in advance.

Upvotes: 2

Views: 1386

Answers (2)

JFK
JFK

Reputation: 41143

You can bind fancybox to any element other than an anchor (a div in the example below) making use of fancybox's data-fancybox-* attributes like

<div class="fancybox" data-fancybox-href="http://fancyapps.com/" data-fancybox-type="iframe" data-fancybox-group="gallery">
    <img src='http://fancyapps.com/fancybox/demo/1_s.jpg' />
</div>
<div class="fancybox" data-fancybox-href="http://fancyapps.com/fancybox/demo/2_b.jpg" data-fancybox-type="image" data-fancybox-group="gallery">
    <img src='http://fancyapps.com/fancybox/demo/2_s.jpg' />
</div>

And using a simple script without any callback like :

$(".fancybox").fancybox();

See JSFIDDLE

Upvotes: 4

Esko
Esko

Reputation: 4207

Hmm could you do something like this

<div data-fancyimage="http://fancyapps.com/fancybox/demo/2_b.jpg" 
     data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" 
     class="fancybox">
         <a href='http://fancyapps.com/fancybox/demo/2_b.jpg'>
            <img src='http://fancyapps.com/fancybox/demo/2_s.jpg' />
         </a>
</div>

JS:

$("a").on("click", function(e) {
    e.preventDefault();
});

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    afterLoad: function () {
        this.content.find("img").attr("src", this.content.data("fancyimage"));
    },
    afterClose: function (current) {
        this.content.find("img").attr("src", this.content.data("thumbnail"));
        $(current.element).show();
    }
});

Here is a fiddle you can check.

Upvotes: 0

Related Questions