CODEWITHSUNDEEP
jqueryhtmlclickfancybox
Lewis
Lewis

Reputation: 14866

Open fancybox when click on a div

I often use <a> tag with href in order to call fancybox. Now, I'm thinking about opening fancybox (ver1) with a div click.

<div id="content"></div>

Is this possible?

Upvotes: 0

Views: 5060

Answers (1)

JFK
JFK

Reputation: 41143

It's possible to bind any element other than the <a> tag to fancybox (v2.x) using (HTML5) data-fanncybox-* attributes.

Unfortunately, data-fanncybox-* attributes are not an option for fancybox v1.3.x, however you still can use standard data-* attributes in your <div> and extend fancybox (v1.3.x) functionality within the onStart callback.

So assuming that you want to call fancybox from a div like :

<div class="fancybox" data-href="image.jpg">This DIV should open fancybox</div>

Notice the data-href attribute that will tell fancybox where it should get the content from (similar to href attribute of the <a> tag)

Then, you can use this script :

$(".fancybox").fancybox({
    type: "image",
    onStart: function (el, index) {
        var thisElement = $(el[index]);
        $.extend(this, {
            href: thisElement.data("href")
        });
    }
});

See JSFIDDLE

On the other hand, building fancybox (v1.3.x) galleries with elements other than <a> is not as easy as just adding a rel attribute to the <div> element because it will trigger a js error.

As a workaround, you are pushed to build the gallery manually within the script. You could do that using the .each() method like :

var gallery = [];
jQuery(document).ready(function ($) {
    $(".fancybox").each(function (i) {
        gallery[i] = {
            href: $(this).data("href"),
            title : "image "+ (i+1)
        };
        $(this).on("click", function () {
            $.fancybox(gallery, {
                // API v1.3.x options here
                type: "image",
                index: i, // IMPORTANT to open from clicked div
                cyclic: true
            }); // fancybox
            return false;
        }); // on
    }); // each
}); // ready

See JSFIDDLE

NOTES:

  • this solutions is for fancybox v1.3.x
  • .on() requires jQuery 1.7+

Upvotes: 2

Related Questions