Script javascript: Galleria fotografica con thumb e pop-up di dimensione immagine

   difficoltà:  script script script script script

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">
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>
Questa parte di codice va inserita tra i tag <BODY> e </BODY>
<SCRIPT LANGUAGE="JavaScript">
afficheVignette("thumb/1.jpg","img/1.jpg");
document.write('&nbsp;')
afficheVignette("thumb/2.jpg","img/2.jpg");
document.write('&nbsp;')
afficheVignette("thumb/3.jpg","img/3.jpg");
document.write('&nbsp;')
document.write('<br>')
</SCRIPT>
da notare:
-> "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('&nbsp;') è 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");"




Commenti


  Giorgia

19/2/2007 13:00:23

A me da errore :(

  Fabio

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.

  Alberto Tartaglione

23/2/2007 22:11:21

se come ha detto Fabio ci dici che errore è possiamo risolvere

  marco

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

  Fabio

25/2/2007 19:25:45

puoi prendere spunto da qui:

Loading di attesa caricamento pagina

  adele

9/5/2007 20:53:28

complimenti all'autore di questo script

  Andrea

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

  Fabio

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?

  Rocco

21/11/2007 12:15:47

ho seguito tutti i passi descritti. Se lancio su IE il file mi da schermata bianca.
come risolvo?


  Fabio

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' :-) )

  massimo

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

  kkri

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

  Fabio

13/5/2009 23:46:01

@kkri
certo puoi personalizzare com credi

  kkri

13/5/2009 23:47:47

Non mi funzia, mi aiuti? Chiedimi tu, io non so più cosa controllare

  kkri

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?

  Fabio

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'è

  kkri

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>



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.