LightBox, ingrandimenti nella stessa pagina
Martedì 10 Gennaio 2006 - 09:00
di Alessandro Fulciniti
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.
Categoria: Scripting | Permalink
Commenti
1
Figata. Soprattutto perchè è semplicissimo da usare, quindi utile nel caso di voler utilizzare un effetto del genere al volo, senza tanti sbattimenti.
Peccato che a me su IE6 non mi stia funzionando.Per far scurire di meno, basta cambiare il file overloay.png e agire sui css (per colpa di IE che non supporta i png trasparenti)
# - postato da miki - 10 Gennaio 2006 - 09:58
2
a me su IE6 funziona normalmente tanto da stupirmi del fatto che funzionasse il png trasparente…
3
Veramente bello! Molto interessante il fatto che funzioni anche con IE.
4
Davvero interessante e molto semplice da utilizzare. Grazie della segnalazione.
# - postato da Luca Togni - 10 Gennaio 2006 - 11:13
5
Funziona grazie a questo passaggio
#overlay{ background-image: url(overlay.png); }* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png" , sizingMethod="scale");
}In effetti credevo nn fosse possibile utilizzare png semistrasparenti anche con IE, buono a sapersi!
6
Fantastico :)))
7
Davvero utile e figoso!
# - postato da Andrea - 14 Gennaio 2006 - 16:31
8
Utile, credo che lo userò per un progetto che ho nel cassetto da tempo
# - postato da Paolo Dodet - 14 Gennaio 2006 - 18:01
9
ciao,
l’ho provato e ho anche scaricato tutti i file:
lightbox.js
lightbox.css lightbox.css
overlay.png
loading.gif
close.gifho inserito il javascript e il css nell’head, e l’attributo rel=”lightbox” nel a href.
Ma non riesco a farlo funzionare. Mi si apre l’immagine in un’altra finestra sia con IE 6 che con Firefox 1.5# - postato da francesco - 18 Gennaio 2006 - 12:26
10
In effetti l’unico neo è che la pagina si oscura un po’ troppo nell’ingrandimento, per il resto il sistema è davvero eccezziunale…
Per modificare l’opacità basta aprire il file “overlay.png” con un comune prg di image editing tipo Photoshop, cambiare l’opacità del livello a valori + bassi e salvare per il web con il formato PNG-24
11
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. :-(
# - postato da sonofabio - 30 Giugno 2006 - 17:03
12
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.
# - postato da Alessandro Fulciniti - 30 Giugno 2006 - 22:28
13
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# - postato da Roberto - 13 Luglio 2006 - 23:22
14
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?
# - postato da Folla4 - 29 Settembre 2006 - 22:30
15
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.
# - postato da Alessandro Fulciniti - 30 Settembre 2006 - 01:02
16
Grazie mille della dritta..
# - postato da Folla4 - 01 Ottobre 2006 - 16:59
17
Interessante, grazie, ciao!
# - postato da Francesco Ongaro - 17 Gennaio 2008 - 14:42
18
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!!
19
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# - postato da ivan - 18 Aprile 2008 - 17:34
20
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.