Nell’articolo di oggi vediamo come aprire una gallery di immagini con fancybox senza però visualizzare le relative thumb. Utile per gallery tematiche.
Panoramica generale
Questa tecnica può risultare molto utile qualora vogliate far visualizzare una determinata gallery “tematica” senza però costringere l’utente a cliccare su una particolare thumb. Personalmente ho utilizzato questa tecnica per far visualizzare tutte le foto relative a un determinato alloggio in affitto all’interno di un sito a tema “residence”. Cliccando su un trigger di apertura ad esempio ho fatto in modo che si aprisse la gallery fotografica relativa solo a un determinato alloggio “guidando” quindi la visualizzazione con un maggior focus.
Impostiamo Fancybox senza thumb
Al posto del solito setting per la gallery che siamo abituati a usare, siccome le thumb non saranno visualizzabili, dobbiamo predisporre un trigger di apertura che, una volta cliccato, dovrà far apparire la gallery fotografica completa relativa a quella tematica. Ecco un esempio pratico:
<a href="javascript:void(0)" id="apriGallery"> <h3>Apri galleria tematica</h3></a>
Come faccio a impostare le immagini da far visualizzare dalla gallery? Bhè per creare fisicamente la gallery ci basterà usare questo codice:
$("#apriGallery").click(function() {
$.fancybox([
'images/img001.jpg',
'images/img002.jpg',
'images/img003.jpg',
'images/img004.jpg'
], {
'padding' : 0,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'image',
'changeFade' : 0
});
});//Click
Come vedete subito dopo aver specificato le immagini da visualizzare possiamo anche impostare eventuali parametri e opzioni come siete abituati.
Conclusioni
[button link=”http://fancyapps.com/fancybox/” color=”blue” target=”blank” size=”large”]Scarica Fancybox[/button] [button link=”http://www.casavacanzeceriale.it/monolocali-e-bilocali-ceriale-per-le-tue-vacanze.php” color=”blue” target=”blank” size=”large”]Esempio di applicazione[/button]
Questo metodo può essere molto interessante e avere applicazioni molto varie in quanto possiamo facilmente creare delle gallery tematiche senza visualizzare di fatto le thumb e “teleguidando” in questo modo il nostro cliente nella visualizzazione diretta di quello che vogliamo comunicargli.
Se questo articolo ti è stato utile condividilo sui tuoi social network preferiti!
