Galleria Fancybox senza un href?

Question

Voglio creare una galleria di fancybox con img senza utilizzare i collegamenti (a href)? Come posso farlo?

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 (ora funziona con le singole immagini, senza alcun effetto galleria):

$("#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

Non si può avere una galleria con il metodo manuale .click() se non si imposta tutti gli elementi della galleria all'interno dello script fancybox se stesso come:

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

Tuttavia, per farlo funzionare nel modo desiderato e simulare un fancybox regolare galleria senza utilizzare collegamenti (tag <a> con attributi href), è necessario creare la propria funzione con i propri metodi di navigazione personalizzati.

senza cambiare la vostra HTML, provate questo 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> 

che crea una galleria fancybox dalle <img> tag, con un piacevole effetto ciclismo. Inoltre, con un po 'di CSS possiamo avere i controlli di navigazione usando le icone delle frecce di fancybox. See a working example here.

Poiché il controllo di navigazione è totalmente manuale, non è effettivamente necessario l'attributo rel nel tag <img>.

Si prega di notare che il codice di cui sopra è per Fancybox v1.3.x (ho assunto che stai usando v1.3.x perché le opzioni API).

Answer 2

Hai bisogno di fare la chiamata fancybox sulle immagini:

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

dovrebbe funzionare ma non l'ho provato ...

Answer 3

questo ha funzionato per me:

$(".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(); }); 

}); 

poi:

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

e poi con un'ulteriore personalizzazione

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

Answer 5

il modo più semplice, è possibile aggiungere ancoraggio/a etichetta in ogni img da id = 'foo2'.

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

E poi:

$(".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 
     } 
    } 
});