Div-fired Galleries In Fancybox

I'm using Fancybox two and instead of using the tags to fire Fancybox I'm using div tags and within my Javascript I'm using this code: $('#portfolio>#project').click(f

Solution 1:

You can always bind any html element to fancybox other than the <a> tag (and create a gallery without the rel attribute), using fancybox's special data-fancybox-* attributes like :

<div data-fancybox-group="gallery" data-fancybox-href="#inline1" class="fancybox">openfirst fancybox item</div>

See JSFIDDLE

BTW, if binding fancybox to more than one element, use classes instead of IDs

NOTE: if you use the method .click() to fire fancybox, the gallery should be manually passed to fancybox within the script. You still can bind a click to the element (to populate the content of the target element) before binding fancybox to it like :

$(".fancybox").click(function(){
    // populate the target inline element here
}).fancybox();

Solution 2:

Since nobody really had the answer to my question I decided to sit back and take a long and hard look at my code; I came to the decision that I needed to create a plugin for this to work.

When I was developing my portfolio (http://mrconnor.co.uk) I developed it so that instead of Fancybox being fire from <a> tags I'd fire it from <div> tags: I did this so that my code could be cleaner, plus it would be easier for me to good back and edit and style.

However, I came across the problem (which is why I posted) that making a gallery or a slideshow from this cannot work the normal way by adding to all items that I want in my gallery, so I created a jQuery plugin.

Test it here:http://jsfiddle.net/cranavvo/u3U23/

$.fn.fancyGallery = function($gallery_name){
    $(this).each(function(){
        $background_image = $(this).css("background-image");
        $background_image = $background_image.replace('url(','').replace(')','');

        $(this).attr({
            "data-fancybox-group": $gallery_name,
            "data-fancybox-href": $background_image
        });     
    });
};