2012-02-24 11 views
5

Tengo una situación bastante única. Aquí está mi escenario: 4 miniaturas que enlazan con la galería + 1 imagen mediana (apuntando a la misma fuente que la primera miniatura). Me gustaría abrir la misma galería haciendo clic en la imagen del medio, pero cuando los vinculo con el atributo "rel" tengo la primera imagen dos veces en el ciclo (5 imágenes grandes en el ciclo). ¿Hay alguna manera de llamar a la galería de fancybox especificada dentro de un enlace externo? De esa forma podría activar la función de clic en la imagen del medio y aún tener solo 4 imágenes grandes en el ciclo. Por favor ayuda, no puedo encontrar una solución para esto.llamando galería de fancybox con otro enlace

ACTUALIZACIÓN

aquí es mi 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> 

quiero para disparar el "detalles" galería al hacer clic en "medio" de la imagen ...

Respuesta

13

Lo que quiero hacer es modificar el enlace de la imagen "mid" para activar la galería onclick sin ser parte de la propia galería como:

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

El método .eq() garantiza que la galería comience desde la primera imagen porque, de lo contrario, comenzaría desde el último elemento vinculado a fancybox. Sin embargo, podría especificar comenzar desde otro elemento de la galería.

+0

esto es exactamente lo que necesitaba! ¡gracias! – lokers

+0

por favor, no olvide marcar esto como la respuesta correcta, gracias;) – JFK

+0

hecho:) gracias! – lokers

5
<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> 
Cuestiones relacionadas