Triggering fancybox from a link on page - Image gallery with multiple albums

问题

I made an image gallery with multiple albums each album containing different number of photos. I am trying to get two fancybox behavior

Req 1 - Clicking on the primary image of the album opens up a fancy box and navigates through the primary images of all albums. I got this part working

Req 2 - Beneath every album I have an anchor tag which displays the count of photos in the album. When I click on this anchor tag, fancy box should navigate through the photos of that particular album only. I am not sure how to bind this anchor tag to the trigger fancybox and navigate through the images in the album. I have a static json file and i have two attributes primaryPhoto and imagesContained(array).

Could someone please help me with how to get through this?

$.each(data.gallery,function(i,item) {
 $.each(item.albums, function(i,photos) {
        imageFolder = sec.mediumUrl;
        imgInsert += '<a href="' + photos + '" class="grouped_elements" rel="Gallery' + count + '" class="big_img"'  +'">';
    });
    '<a href="' + imgThumb + '" class="description2" title="Hello world">' + count + '</a></div>'; 
    count++;
});

I am trying to access it like this

$("a.description2").click(function() {
 $("a.grouped_elements").fancybox({
                'transitionIn': 'none',
                'transitionOut': 'none',
                'titlePosition': 'over',
                'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

});

回答1:

For Your Request 2

I have been working on this issue for my own project all day, I just came up with a solution.

Say this is a gallery on your page:

<a id="Gallery_1" rel="gallery1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a rel="gallery1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>

*Notice I have added an ID called "Gallery_1" to the first link in gallery 1*

Then, for the text you have below the gallery, use the following javascript:

<a style="cursor: pointer;" onclick='$("a#Gallery_1").trigger ("click");'>Your Link Text</a>

This worked perfectly for me. Hope it helps!

回答2:

Basically your html rendered code should be something like that:

Album 1:

<a class="grouped_elements" rel="gallery1" href="image01.jpg" title="title01"><img src="thumb01.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery1" href="image02.jpg" title="title02"><img src="thumb02.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery1" href="image03.jpg" title="title03"><img src="thumb03.jpg" alt="" /></a>

etc.

Album 2:

<a class="grouped_elements" rel="gallery2" href="image10.jpg" title="title10"><img src="thumb10.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery2" href="image11.jpg" title="title11"><img src="thumb11.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery2" href="image12.jpg" title="title12"><img src="thumb12.jpg" alt="" /></a>

etc.

Album 3:

<a class="grouped_elements" rel="gallery3" href="image20.jpg" title="title20"><img src="thumb20.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery3" href="image21.jpg" title="title21"><img src="thumb21.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery3" href="image22.jpg" title="title22"><img src="thumb21.jpg" alt="" /></a>

etc.

Notice that each album has been set with a different rel attribute regardless that all of them share the same class so we can use $("a.grouped_elements").fancybox({// options here}) to fire fancybox for any album.

Now, in order to launch each album from a different link (an anchor tag which displays the count of photos in the album as in your example), we will set an anchor for each album sharing the same class but with a different ID (@RevCocnept suggestion wasn't a bad idea.)

<a id="gallery1" class="description2" href="javascript:;">open album 1</a>
<a id="gallery2" class="description2" href="javascript:;">open album 2</a>
<a id="gallery3" class="description2" href="javascript:;">open album 3</a>

Notice that each ID has exactly the same value as the rel value of the corresponding album.

Now we can use a single script for those three anchors, targeting their shared class :

$(".description2").click(function(){
 $('.grouped_elements[rel="'+this.id+'"]').eq(0).trigger("click");
});

Notice that we used .eq(0) to start the gallery from the first element, otherwise it would start from the last element added in the DOM

来源：https://stackoverflow.com/questions/11189373/triggering-fancybox-from-a-link-on-page-image-gallery-with-multiple-albums

标签

javascript

jquery

json

fancybox

image-gallery