Div-fired galleries in Fancybox

问题

I'm using Fancybox two and instead of using the <a> tags to fire Fancybox I'm using div tags and within my Javascript I'm using this code:

$('#portfolio>#project').click(function(){
    $background_image = $(this).css("background-image");
    $background_image = $background_image.replace('url(','').replace(')','');
    $.fancybox({
        href: $background_image
    });
});

However, by following the Fancybox documentation to create a gallery (by adding rel="gallery1" to your images, or in my case, divs), there is no slideshow and you can't navigate from one image to the other when the Fancybox is fired and an image appears.

回答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">open first 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();

回答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 rel="gallery1" 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
        });     
    });
};

来源：https://stackoverflow.com/questions/21341979/div-fired-galleries-in-fancybox

标签

jquery

html

fancybox