galería de Fancybox sin un href?

Question

Quiero hacer una galería de fancybox con img sin usar enlaces (a href)? como puedo hacer eso?

HTML:

<div id="foo2"> 
     <img src="/images/banners/001.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/002.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/003.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/004.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/005.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/006.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/007.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/008.jpg" rel="downslider" alt="" width="80" height="80" /> 
..... 
</div> 

JS (ahora se trabaja con imágenes individuales, sin efecto galería):

$("#foo2 img").click(function(e) { 
     var url = $(this).attr('src'); 
     var rel = $(this).attr('rel'); 
     var content = '<img src="' + url + '" rel="'+ rel + '" />'; 
     $.fancybox({ 
      'transitionIn' : 'elastic', 
      'transitionOut' : 'elastic', 
      'speedIn'  : 600, 
      'speedOut'  : 200, 
      'overlayShow' : false, 
      'content' : content 
     }); 
    }); 

Answer 1

no se puede tener una galería utilizando el método manual .click() menos que haya ajustado todos los elementos de la galería interior de la propia escritura de FancyBox gustaría:

$("#foo2 img").click(function(e) { 
$.fancybox([ 
    'images/01.jpg', 
    'images/02.jpg', // etc 
    ],{ 
    // fancybox options 
    'type': 'image' // etc. 
}); // fancybox 
}); // click 

Sin embargo, para que funcione de la manera deseada y simular un FancyBox regulares galería sin utilizar enlaces (<a> etiquetas con atributos href), necesitaría crear su propia función con sus propios métodos de navegación personalizados.

Sin cambiar su HTML, probar este JS:

<script type="text/javascript"> 
function fancyBoxMe(index){ 
var gallerySize = $("#foo2 img").size(); 
if((index+1) == gallerySize){ nexT = 0 } else { nexT = index+1} 
if(index == 0){ preV = (gallerySize-1) } else { preV = index-1} 
var tarGet = $('#foo2 img').eq(index).attr('src'); 
$.fancybox({ 
    'transitionIn' : 'elastic', 
    'transitionOut' : 'elastic', 
    'speedIn' : 600, 
    'speedOut' : 200, 
    'overlayShow' : false, 
    'href': tarGet, 
    'titlePosition': 'inside', 
    'titleFormat' : function(){ 
    return 'Image '+(index+1)+' of '+gallerySize+'<a id="preV" href="javascript:;" onclick="fancyBoxMe('+preV+')">prev</a> <a id="nexT" href="javascript:;" onclick="fancyBoxMe('+nexT+')">next</a>'; 
    } 
}); // fancybox 
} // fancyBoxMe 
$(document).ready(function() { 
$("#foo2 img").each(function(i){ 
    $(this).bind('click', function(){ 
    fancyBoxMe(i); 
    }); //bind   
}); //each 
}); // ready 
</script> 

Eso crea una galería FancyBox de los <img> etiquetas, con un bonito efecto de ciclismo. Además, con un poco de CSS podemos tener los controles de navegación usando los íconos de flechas de la caja de fantasía. See a working example here.

Dado que el control de navegación es totalmente manual, en realidad no necesita el atributo rel en la etiqueta <img>.

Tenga en cuenta que el código anterior es para Fancybox v1.3.x (asumí que está utilizando v1.3.x porque las opciones de la API).

Answer 2

Que tiene que hacer la llamada FancyBox en las imágenes:

$('#foo2 img').fancybox({ 
    'transitionIn' : 'elastic', 
    'transitionOut' : 'elastic', 
    'speedIn'  : 600, 
    'speedOut'  : 200, 
    'overlayShow' : false 
}); 

debería funcionar pero no lo he probado ...

Answer 3

Esto funcionó para mí:

$(".CLASSNAME").each(function(){ 

    $(this).fancybox({ 

     href : $(this).attr('src') 

    }); 


}); 

Answer 4

$(document).ready(function(){ 

    $(".fancy").each(function() { 
     $(this).replaceWith('<a class="fancybox" href="'+$(this).attr('src')+'">'+$(this)[0].outerHTML +'</a>'); 
    }).promise().done(function(){ $('.fancybox').fancybox(); }); 

}); 

a continuación:

<img class="fancy" src="1.jpg" alt="" /> 
<img class="fancy" src="2.jpg" alt="" /> 

y luego con una mayor personalización

<img class="fancy" src="2.jpg" data-small-image="small2.jpg" alt="" /> 

Answer 5

el camino más fácil, puede agregar anclaje/a etiqueta en cada img de id = 'foo2'.

$('#foo2 img').each(function(){ 
var currentImage = $(this); 
currentImage.wrap("<a class='fancybox' href='" + currentImage.attr("src") + "'</a>"); }); 

Y luego:

$(".fancybox").fancybox({ 
    openEffect : 'none', 
    closeEffect : 'none', 
    beforeShow : function() { 
    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + ' '+(this.title ? '' + this.title + '' : ''); 
    }, 
    helpers : { 
     thumbs : { 
      width : 50, 
      height : 50 
     } 
    } 
});