Fullscreen jQuery Gallery – una galleria fullscreen senza flash in javascript

Una splendida galleria in jQuery a tutto schermo facile da integrare in soli 1.6 kb!

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

Passiamo ai Downloads!

Versione packed

Codici sorgenti



2 commenti

  • | 28.02.11 - h 15.12

    Grazie per la condivisione, utilissimo ;)
    Una domanda… C’è un modo per impostare i parametri delle thumb (a parte stretchando via css)?

    • |02.03.11 - h 11.33

      Che parametri devi gestire, vedo come posso aiutarti!


Lascia un commento








We
  • Wordpress
  • Ford Focus
  • Monitor Samsung
;-) Grazie per la visita