chiama fancybox gallery con altro link

Question

Ho una situazione abbastanza unica. Ecco il mio scenario: 4 miniature che collegano alla galleria + 1 immagine media (che punta alla stessa fonte della prima miniatura). Vorrei aprire la stessa galleria facendo clic sull'immagine media, ma quando li collego con l'attributo "rel" ho la prima immagine due volte nel loop (5 grandi immagini nel loop). C'è un modo per chiamare la galleria di fancybox specificata all'interno di un link esterno? In questo modo potrei attivare la funzione click sull'immagine media e avere ancora solo 4 grandi immagini nel loop. Per favore aiuto, non riesco a trovare una soluzione per questo.

UPDATE

qui è il mio 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> 

voglio innescare la galleria "dettagli" quando si fa clic sull'immagine "a metà" ...

Answer 1

Cosa vorrei fare è quello di modificare il collegamento dell'immagine "mid" per attivare la galleria onclick senza far parte della galleria stessa come:

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

il metodo .eq() assicura che la galleria inizi dalla prima immagine perché altrimenti inizierebbe dall'ultimo elemento associato a fancybox. Puoi però specificare di iniziare da un altro elemento della galleria.

Answer 2

<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>