CODEWITHSUNDEEP
jqueryfancyboxgallery
lokers
lokers

Reputation: 2198

Calling fancybox gallery with other link

I have quite unique situation. Here is my scenario:

4 thumbnails linking to the gallery + 1 medium image (pointing to the same source as the first thumbnail).

I want to open the same gallery by clicking on the medium image, but when I link them with the rel attribute I have the first picture twice in the loop (5 big images in the loop).

Is there a way to call the specified fancybox gallery within the external link? That way I could trigger the click function on the medium image and still have only 4 big images in the loop. Please help, I cannot find a solution for this.

UPDATE

here is my HTML

<div class="details_gallery">
 <a href="max/1.jpg" class="fancybox"><img src="mid/1.jpg" /></a>
 <div class="details_gallery_min">
  <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a>
  <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a>
  <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a>
  <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a>
 </div>
</div>

I want to trigger the "details" gallery when clicking on the "mid" image.

Upvotes: 6

Views: 14712

Answers (2)

Cristiano G Carvalho
Cristiano G Carvalho

Reputation: 51

<div class="details_gallery">
 <a href="#" class="manualfancybox">Manual Call Fancybox</a>
 <div class="details_gallery_min">
  <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a>
  <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a>
  <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a>
  <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a>
 </div>
</div>

<script>

$(document).ready(function(){
    $(".manualfancybox").click(function() {
        var photos  = new Array();

        $(".details_gallery_min a").each(function(){

            href = $(this).attr("href"); 
            title = $(this).attr("title"); 
            photos.push({'href': href, 'title': title})         

        });

        jQuery.fancybox(photos , 
            {   'transitionIn' : 'elastic', 
                'easingIn' : 'easeOutBack', 
                'transitionOut' : 'elastic', 
                'easingOut' : 'easeInBack', 
                'opacity' : false, 
                'titleShow' : true, 
                'titlePosition' : 'over',
                'type'              : 'image',          
                'titleFromAlt' : true 
            }
        );
    });
});

</script>

Upvotes: 5

JFK
JFK

Reputation: 41143

What I would do is to modify the link of the "mid" image to trigger the gallery onclick without being part of the gallery itself like:

<a href="max/1.jpg" onclick="$('a.fancybox').eq(0).trigger('click'); return false;"><img src="mid/1.jpg" alt="mid image" /></a>

the .eq() method ensures that the gallery starts from the first image because otherwise it would start from the last element bound to fancybox. You could specify to start from another element of the gallery though.

Upvotes: 13

Related Questions