Introduzione
Il web ha condiviso con me tantissimi strumenti. Le persone hanno condiviso con me tanti segreti, trucchi. Volevo inaugurare questa rubrica con un plugin jQuery che spero possiate includere nei vostri prossimi progetti.
Che cos’è
È un plugin jQuery che vi permette di visualizzare e navigare a tutto schermo, un insieme di immagini passate tramite selettore (es.: .gallery img).
Storia
Dopo aver con successo usato Piclens della Coolris con Nexgengallery, ho avuto la necessità di utilizzare un plugin proprietario per la gestione delle gallerie in WordPress. Piclens si interfaccia molto bene con i feed di immagini (specialmente quelli Flickr), ma non mi andava di smanettare per convertire le immagini in feed, ho così cercato un plugin javascript. A questo punto ho trovato Galleria, un plugin in jQuery davvero ben fatto, che purtroppo però non era adatto al mio caso.
Galleria non viene lanciato molto bene da un evento e soprattutto, chiudendo la finestra a tutto schermo, veniva compromette il codice html.
Mi sono quindi armato di texteditor, una tazza di latte e miele visto il mal di gola e ho iniziato a scrivere un plugin tutto mio.
Demo
Per adesso è disponibile una sola demo
Demo1 – immagini sparse – miniature create dagli originali
Requisiti
L’unico requisito è la fantastica libreria jQuery! Scaricatela da qui
Come si usa
Inserire nell’head lo script con il css
<script type="text/javascript" src="js/jquery.js" />
<script type="text/javascript" src="js/jquery.gallerizr.packed.js" />
<link rel="stylesheet" type="text/css" href="js/gallerizr.css" media="all" >
poi basta inserire (in riferimento al demo1) nel tag script
$(function(){
$('.allrandom').click(function(){
$('.randomclass img').gallerizr();
return false;
});
$('.onlylist').click(function(){
$('.randomclass li img').gallerizr();
return false;
});
});
in questo caso si attiva al click, ma potete farlo attivare anche al caricamento della pagina.
Ho passato come selettore css .randomclass img, ma se avessi anche le miniature ridimensionate basterebbe passare il selettore con i link che contengono le miniature ma i link devono puntare all’immagine ad alta risoluzione.
Un esempio integrato con successo lo trovate qui:
Galleria Istituto Nazionale del Dramma Antico
2 commenti
Grazie per la condivisione, utilissimo
Una domanda… C’è un modo per impostare i parametri delle thumb (a parte stretchando via css)?
Che parametri devi gestire, vedo come posso aiutarti!