|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 GALERIE D'IMAGES - GESTION DE DESCRIPTIONS ET DES MINIATURES
 Information sur la source
 Description
Utilisation - Pour changer les images de la galerie, changer les valeurs du tableau - Par la suite, modifer au besoin les paramètres qui suivent
 Source
<HTML>
<HEAD>
<TITLE>Galerie d'images (Exemple)</TITLE>
<SCRIPT language="Javascript">
//Script conçu par Philippe Arteau
//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>
 Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
 Télécharger le zip
 Historique
- 16 mars 2005 14:58:44 :
- Correction d'un bug. La série de boucle dans le <BODY> dépassait la longeur du tableau de 1.
- 20 janvier 2006 06:21:31 :
- Mot-clés ajoutés...
 Sources du même auteur
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
Création d'une galerie d'images dynamique [ par joujou0000 ]
j ai besoin de votre aide s-v-p, je suis debutant et je veux créer un site web contenant une galrie de photos dynamique avec du XHTML et du JAVASCRIPT
Problème galerie d'images générée en js [ par way2web ]
Bonjour,j'ai créé une galerie photo générée via javascript qui affiche 5 ou 7 photos par page en fonction de la résolution du visiteur, avec des liens
Galerie d'images [ par ginie_e ]
Bonjour à toutes et à tous, Je suis en train de réaliser une galerie sur ma page web, mais je ne sais la faire qu'en mettant des imagettes sur lesquel
codage galerie... [ par jarlaath ]
Bonjour,je decouvre mootools et j'aimerais utiliser une fonction :le fx.elements. Je vous mets en lien ma page pour plus de clarté (galerie). Voici do
galerie photo en javascript, erreur [ par siraniadam ]
Bonjour, pourriez vous m 'aider , voici ma galerie photo , sur onmouseover , l image s affiche en grand !mais voila , plus rien ne marche message d er
pb de préchargement des images [ par loblobloblob ]
Bonjour,j'ai créer une galerie, mais j'aimerais que mes images soient charger dans la galerie sans devoir faire une ligne par image.On m'a dis de pass
php +javascript [ par voyages ]
bonjour,j'ai des images stocker dans sql et je veux que lorsque le visiteur passe la souris sur l'image que la grosse image change pour celle que la s
Affichage aléatoire d'images avec effet de fondu [ par chabgyver ]
Bonjour, J'ai récupéré un script qui affiche des images avec un effet de fondu, le seul truc, c'est que je voudrai que les images s'affichent de faço
fonction afin d'afficher plusieurs images [ par nIcoOolas ]
Bonjour...je suis débutant en javascript et je suis un peu perdu ici ! ^^Voila mon petit probleme, je souhaite créer un code javascript qui, en foncti
image [ par napoleonienes ]
Bonjour,voilà, je suis administrateur d'une ligue de jeu backgammon je désirerais mettre des images sur la page officielle de case ladder mais ne sais
|
 Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
|