Script javascript: Galleria fotografica con thumb e pop-up di dimensione immagine
difficoltà:
Demo
Script simili
29/1/2007
Script inviato da: Alberto Tartaglione
Questo script creato in Javascript permette di creare una galleria fotografica con thumbnails nelle quali cliccandoci sopra verrà aperto un pop-up di dimensioni uguali alla grandezza dell'immagine.
Istruzioni:
- creare due cartelle
-> img : contenente le immagini delle dimensioni normali
-> thumb : contenente le immagini rimpicciolite
- inserire il codice nella pagina destinata alla galleria fotografica
Questa parte di codice va inserito tra i tag <head> e </head>
<script type="text/javascript" language="JavaScript">Questa parte di codice va inserita tra i tag <BODY> e </BODY>
function afficheVignette(cheminVignette,cheminMaxi)
{
document.write('<A HREF="javascript:afficheMaxi(\''+cheminMaxi+'\')"><IMG _fcksavedurl=""javascript:afficheMaxi(\''+cheminMaxi+'\')"><IMG" SRC="'+cheminVignette+'" HSPACE=0 VSPACE=0 BORDER=1 ALT=""></A>');
}
function afficheMaxi(chemin)
{
i1 = new Image;
i1.src = chemin;
html = '<HTML>\n<HEAD>\n<TITLE>Image</TITLE>\n</HEAD>\n<BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0>\n<CENTER><IMG SRC="'+chemin+'" BORDER=0 NAME=imageTest onLoad="window.resizeTo(document.imageTest.width+14,document.imageTest.height+32)"></CENTER>\n</BODY>\n</HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=0');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close()
};
</script>
<SCRIPT LANGUAGE="JavaScript">da notare:
afficheVignette("thumb/1.jpg","img/1.jpg");
document.write(' ')
afficheVignette("thumb/2.jpg","img/2.jpg");
document.write(' ')
afficheVignette("thumb/3.jpg","img/3.jpg");
document.write(' ')
document.write('<br>')
</SCRIPT>
-> "thumb/1.jpg" contiene il nome dell'immagine rimpicciolita per cui sostituire il nome "1.jpg" con il nome della propria immagine
-> "img/1.jpg" contiene il nome dell'immagine ingrandita per cui sostituire il nome "1.jpg" con il nome della propria immagine
-> document.write(' ') è un semplice spazio bianco per non avere le immagini attaccate. N.B è una cosa puramente estetica e facoltativa
-> document.write('<br>') è un "a capo" per separare righe di immagini
in questa parte di script ho messo sole 3 righe di immagini affiancate, qualora si vogliano mettere più immagini basta copiare questa sequenza di codice: "afficheVignette("thumb/1.jpg","img/1.jpg");"
Permalink:
Tag:
Script Simili:
Script php: Resize immagini a dimensione fissa o proporzionale
Script javascript: Ridimensionare popup come immagine contenuta
Script php: Upload file con filtro estensione e dimensione massima
Script javascript: Anteprima immagine per upload
Link utili:
Vota:
Commenti
19/2/2007 13:55:34
che tipo di errore? hai messo i file immagine nelle cartelle come sopra descritto? se guardi la demo funziona.
23/2/2007 22:11:21
se come ha detto Fabio ci dici che errore è possiamo risolvere
24/2/2007 17:01:09
è possibile inserire un timer perima di fare apparire le immagini?
mi speigo: prima che si carichi una immagine si può mettere una immagine tipo una clessidra che appaia prima che l'immagine si carichi per un tempo stabilito da noi?
grazie
25/2/2007 19:25:45
puoi prendere spunto da qui:
Loading di attesa caricamento pagina
31/5/2007 15:58:55
Ciao,
l'apertura delle immagini originali avviene senza problemi.
Nella pagina html che contiene i thumbs, invece, le due immagini non vengono visualizzate.
Ho creato le due cartelle come descritto con le immagini come descritto.
Grazie mille per l'aiuto,
Andrea
1/6/2007 15:29:08
le immagini nelle 2 cartelle img e thumb hanno lo stesso nome?
La thumb thumb/1.jpg dve avere come ingrandimento img/1.jpg.
Hai dato un occhio alla demo? ti funziona correttamente?
21/11/2007 12:15:47
ho seguito tutti i passi descritti. Se lancio su IE il file mi da schermata bianca.
come risolvo?
21/11/2007 12:23:30
@Rocco:
su IE dovrebbe funzionare. Hai provato a vedere la demo:
http://demo.free-script.it/gallery_javascript/
se la vedi correttamente vuol dire che nn hai seguito il codice correttamente.
Prova al max a copiare il sorgente della demo (a pare sotto alla scritta 'non copiare il codice qui sotto' :-) )
14/11/2008 20:53:01
ragazzi scusate ma io non riesco a vedere piu le immagine in grandezza reale ma le vedo tutte rimpicciolite e sotto ogni immagine appare thumbs cosa dovrei fare? non voglio cancellare le foto
13/5/2009 23:39:59
Le cartelle img e thumb dove devono essere aperte sotto la root del sito o si possono creare delle sottocartelle con nomi diversi, cambiando poi chiaramente il percorso anche nel codice della pagina HTML? Grazie
13/5/2009 23:46:01
@kkri
certo puoi personalizzare com credi
13/5/2009 23:47:47
Non mi funzia, mi aiuti? Chiedimi tu, io non so più cosa controllare
13/5/2009 23:55:59
Sviluppi: non mi visualizza le thumbs (mi dà i soliti quadratini di quando non trova le immagini) ma cliccando sui quadratini appaiono i popup con le immagini grandi. Cosa può essere?
13/5/2009 23:59:28
afficheVignette("thumb/2.jpg","img/2.jpg");
il primo è il percorso della thumb e il secondo dell'immagine grande.
Prova al massimo col tasto desto le proprietà dell'immagine che non visualizza per capire dove va a cercare l'immagine che nn c'è
14/5/2009 0:11:03
Con il tasto dx mi dice "Non disponibile", questo è il collegamento "javascript:afficheMaxi('images/fotogallery/img/foto_00.jpg')" e sotto il codice nella pagina:
<SCRIPT LANGUAGE="JavaScript">
afficheVignette("images/fotogallery/thumb/foto_00.jpg","images/fotogallery/img/foto_00.jpg"); document.write(' ')
afficheVignette("images/fotogallery/thumb/foto_01.jpg","images/fotogallery/img/foto_01.jpg"); document.write(' ')
afficheVignette("images/fotogallery/thumb/foto_02.jpg","images/fotogallery/img/foto_02.jpg"); document.write(' ')
document.write('<br>')
</SCRIPT>
Feed Rss
19/2/2007 13:00:23
A me da errore :(