Tra le molteplici soluzioni di miniature e ingrandimenti di foto e immagini, quelle che usano l’ingrandimento nella stessa pagina sono forse le più efficaci e per diversi motivi: riducono i tempi di interazione con l’utente, restano accessibili con Javascript disabilitato e soprattutto non necessitano del tasto indietro della navigazione del browser.

Un po’ di tempo fa ho presentato un piccolo script per avere una galleria con
ingrandimento nella stessa pagina
. Recentemente, poi, è comparso LightBox, una soluzione leggermente
differente ma altrettanto notevole. La cosa interessante è che si può applicare a qualsiasi immagine
(basta aggiungere un attributo nell’HTML), che compare un’icona di attesa durante il caricamento
e che l’ingrandimento compare a centro pagina, indipendentemente dalla larghezza dello
schermo.

A parer mio l’unico neo dell’esempio è che la pagina si oscura un po’ troppo quando viene mostrato l’ingrandimento, ma il CSS dovrebbe essere facilmente modificabile e
adattabile ai propri gusti.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
20 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

Ciao a tutti nel sito che ho appena fatto (www.intagliofirenze.it), un sito su una bottega di intaglio e restauro del legno a firenze, ho notato che quando apro le immagini, usando lightbox con internet explorer accade questa strana cosa. la prima volta che clicco sull'immagine il browser reindirizza all'immagine, solo una volta che torno indietro sia apre correttamente il box di lightbox.

Spina
Spina

Ciao volevo porvi una domanda, sto provando ad utilizzare questo JS, e non ho però capito se consente o meno il salvataggio delle immagini, e se si, come si può fare per attivarlo. Mentre per spostarsi vengono fuori i pulsanti "prev" e "next" , per chiudere viene visualizzata la "X", per salvare non ho trovato nulla. Qualcuno ne sa di più ? Grazie

ivan
ivan

Scusate ma a me funziona con firefox mentre su IE mi fa sparire completamente il sito sullo sfondo... mi spiegate più dettagliatamente come fate a farlo funzionare anche con IE7? Io uso la versione 2!!

Lou
Lou

Interessante, grazie, ciao!

Francesco Ongaro
Francesco Ongaro

Grazie mille della dritta..

Folla4
Folla4

Folla4, potresti considerare le varie alternative presentate qui sul blog. Ad esempio l'ultima versione di ThickBox dovrebbe avere già  implementata la caratteristica che cerchi insieme a molte altre.

Alessandro Fulciniti
Alessandro Fulciniti

Sapete se é possibile ridimensionare l'immagine oggetto di ingrandimento con Lightbox. Ad esempio se l'immagine ingrandita é troppo grande, visualizzarla più piccola e magari mantenendo le proporzioni. C'é qualche riga del .js che si può personalizzare a tal proposito?

Folla4
Folla4

Salve a tutti ho un problema e spero di poter aver un pò di aiuto da tutti voi. io ho un negozio online su ebay e da qualche tempo sto lavorando per migliorare la grafica della mie inserzioni.in particolare mi interessava un meccanismo per avere gli ingrandimenti delle mie foto nella stessa pagina.. dopo un po di ricerche e di lavoro sono riuscito a fare qualcosa utilizzando il linguaggio java,non sapendo però che la piattaforma ebay non accetta alcun tipo di linguaggio java,e cosi dopo tanto lavoro sono ancora al punto di partenza. ora sto leggendo di questo LIGHT BOX ma se non ho capito male anche questo richiede parti di linguaggio java.. vorrei sapere da tutti voi se c'é qualche altro linguaggio o meccanismo da poter usare per risolvere il mio problema.. come posso far ad avere gli ingrandimenti nella stessa pagina senza utilizzare il linguaggio java?? spero di ricevere una vostra risposta.. contattatemi anche alla mia mail vmrvmr@fastwebnet.it grazie a tutti per l'attenzione aspetto le vostre risposte un saluto da Roberto

Roberto
Roberto

Fabio, immagino il difetto di cui parli sia rilevabile in Internet Explorer 5.x e 6... niente da fare credo in merito. E' lo stesso problema che si riscontra sui menu dropdown e che vanno sotto gli input dei form. Ne approfitto per segnalare questo mini-tutorial su HTML.it preparato da Cesare.

Alessandro Fulciniti
Alessandro Fulciniti

Una gran figata, unico neo é che se la pagina contiene anche elementi in flash, questi "bucano" mettendosi davanti all'overlay.png e all'immagine stessa ingrandita. :-(

sonofabio
sonofabio