Soyez le premier à donner votre avis sur cette source.
Vue 28 633 fois - Téléchargée 4 560 fois
<HTML> <HEAD> <TITLE>Galerie d'images (Exemple)</TITLE> <SCRIPT language="Javascript"> //Titre de la galerie galerie var titre = "Titre de la galerie"; //Ensemble des données : image miniature | image agrandi | desciption de l'images var image = new Array () image[0] = "images/01small.jpg|images/01.jpg|description 1" ; image[1] = "images/02small.jpg|images/02.jpg|description 2" ; image[2] = "images/03small.jpg|images/03.jpg|description 3" ; image[3] = "images/04small.jpg|images/04.jpg|description 4" ; image[4] = "images/05small.jpg|images/05.jpg|description 5" ; image[5] = "images/06small.jpg|images/06.jpg|description 6" ; image[6] = "images/07small.jpg|images/07.jpg|description 7" ; //Paramètres des images (facultatif) var bordure = 1 // (0/1) // Paramètres du tableau var grandeur_bordure = 3 var nb_colonnes = 3 var couleur_bordure = "#999999" var espace_cellule = 4 var espace_tableau = 0 //Paramètres des fenêtres (facultatif) var hauteur_fen = 360 var largeur_fen = 430 var arriere_plan = "#CCCCCC" var position_x = 0 var position_y = 0 var barre_detat = "no" // (yes/no) var barre_doutils = "no" // (yes/no) function agrandir(numero) { //Création de la fenetre proprietes = "toolbar=" + barre_doutils + ", status=" + barre_detat; proprietes += ", width=" + largeur_fen + ", height=" + hauteur_fen + ", top=" + position_y + ", left=" + position_x; fenetre = window.open("" , "", proprietes); split = image[numero].split("|") //Code se retrouvant dans la fenetre code = "<HTML>\n"; code += "<HEAD>\n"; code += "<TITLE>" + titre + "</TITLE>\n"; code += "<SCRIPT language='Javascript'>\n"; //transmet le tableau image() pour etre utilisé code += "var image = new Array ()\n"; for (z = 0 ; z < image.length ; z++) { split = image[z].split('|'); code += "image[" + z + "] = \"" + split[1] + "\";\n"; } code += "var description = new Array ()\n"; code += "\n"; for (z = 0 ; z < image.length ; z++) { split = image[z].split('|'); code += "description[" + z + "] = \"" + split[2] + "\";\n"; } code += "\n"; code += "var image_courrante = " + numero + "\n"; code += "\n"; //pour passer à la prochaine image code += "function suiv()\n"; code += "{\n"; code += " image_courrante++\n" code += " if (image_courrante > image.length-1)\n"; code += " {\n"; code += " image_courrante = 0;\n" code += " }\n"; code += " document.imageAff.src = image[image_courrante] ;\n"; code += " document.getElementById('description').innerHTML = description[image_courrante]"; code += ""; code += "}\n"; code += "\n"; //Pour passer à l'image précédante code += "function prec()\n"; code += "{\n"; code += " image_courrante--\n" code += " if (image_courrante < 0)\n"; code += " {\n"; code += " image_courrante = image.length-1;\n" code += " }\n"; code += " document.imageAff.src = image[image_courrante] ;\n"; code += " document.getElementById('description').innerHTML = description[image_courrante]"; code += "}\n"; code += "\n"; code += "<"; code += "/SCRIPT>\n"; code += "\n"; code += "</HEAD>\n"; code += "<BODY bgcolor='" + arriere_plan + "'>\n"; //Dans l'ordre: les bouttons précédante / suivante, l'image et sa description code += "<CENTER><TABLE><TR><TD align='center'>\n"; code += "<INPUT type='BUTTON' value='Précédente' onclick='javascript:prec();\n'>"; code += "<INPUT type='BUTTON' value='Prochaine' onclick='javascript:suiv();\n'>"; code += "</TD></TR><TR><TD align='center'>\n"; split = image[numero].split('|'); code += "<IMG name='imageAff' SRC='" + split[1] + "' border='" + bordure + "'>\n"; code += "</TD></TR><TR><TD align='center'>\n"; code += "<DIV ID='description'>" + split[2] + "</DIV>\n"; code += "</TD></TR></TABLE></CENTER>\n"; code += "</BODY>\n"; code += "</HTML>\n"; //ecriture du code fenetre.document.write(code) } </SCRIPT> </HEAD> <BODY> <SCRIPT language="Javascript"> document.write("<CENTER>") document.write("<H2>" + titre + "</H2>"); document.write("<TABLE border='" + grandeur_bordure + "' bordercolor='" + couleur_bordure + "' ") document.write("cellpadding='" + espace_cellule + "' cellspacing='" + espace_tableau + "'>") var nb_lignes = image.length / nb_colonnes var numero_case = 0 // création des rangés ... for (x = 0 ; x < nb_lignes ;x++) { document.write("<TR>") // création des cases ... for (y = 0 ; y < nb_colonnes ; y++) { if (numero_case < image.length) { //contenu des cases //séparation des informations du tableau split = image[numero_case].split("|"); document.write("<TD>"); document.write("<A href='javascript:agrandir(\"" + numero_case + "\");'"); document.write(" onmouseover='window.status=\"" + split[2] + "\";return true;'"); document.write(" onmouseout='window.status=\"\";return true;'>"); document.write("<IMG src='" + split[0] + "' alt='Cliquez pour agrandir l´image' "); document.write(" border='0'></A>"); document.write("</TD>") numero_case += 1; } } document.write("</TR>") } document.write("</TABLE>") document.write("</CENTER>") </SCRIPT> </BODY> </HTML>
7 juin 2007 à 18:49
Elle correspond totalement a mes attentes.
Petit bonus pour les photos mises par défaut ^^.
25 mai 2006 à 19:10
2 avril 2006 à 10:47
Comment modidier le script pour que les images s' affichent dans un frame et non pas dans une nouvelle fenêtre?
Merci
22 sept. 2005 à 18:39
26 juin 2005 à 23:15
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.