begin process at 2012 02 12 00:10:44
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > GALERIE D'IMAGES - GESTION DE DESCRIPTIONS ET DES MINIATURES

GALERIE D'IMAGES - GESTION DE DESCRIPTIONS ET DES MINIATURES


 Information sur la source

Note :
7,55 / 10 - par 11 personnes
7,55 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :galerie, images, imagerie Niveau :Initié Date de création :16/03/2005 Date de mise à jour :04/11/2009 20:16:16 Vu / téléchargé :25 507 / 4 283
Auteur : PhiL666

Ecrire un message privé
Site perso
Commentaire sur cette source (14)
Ajouter un commentaire et/ou une note

 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">
  • //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&#180;image' ");
  • document.write(" border='0'></A>");
  • document.write("</TD>")
  • numero_case += 1;
  • }
  • }
  • document.write("</TR>")
  • }
  • document.write("</TABLE>")
  • document.write("</CENTER>")
  • </SCRIPT>
  • </BODY>
  • </HTML>
<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&#180;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

Les Membres Club peuvent 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...
04 novembre 2009 20:16:17 :
nom masqué

 Sources du même auteur

Source avec Zip Source avec une capture (OBJET) SCROLLBAR
Source avec Zip Source avec une capture QUESTIONNAIRE SUPPORTANT DIFF. TYPES DE QUESTIONS
Toutes les sources de PhiL666

 Sources de la même categorie

Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS par kazma
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

GALERIE PHOTO DYNAMIQUE EN JAVASCRIPT "JQUERY" par zertyx
Source avec Zip Source avec une capture SCRIPT DE PRÉCHARGEMENT D'IMAGES par heycraft
Source avec Zip Source avec une capture FAIRE DEFILER DES IMAGE A LA MOLETTE OU SOURIS par kazma
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3

Commentaires et avis

Commentaire de crashtest le 16/03/2005 10:29:15

il est bien mais il existe une erreur
"ligne 148 caractere 7
'image[...]' a la valeur Null ou n'est pas un objet"
Voila c'est tout sinon il est bien.

Commentaire de crashtest le 16/03/2005 10:29:24

il est bien mais il existe une erreur
"ligne 148 caractere 7
'image[...]' a la valeur Null ou n'est pas un objet"
Voila c'est tout sinon il est bien.

Commentaire de PhiL666 le 16/03/2005 15:02:06

c'est fait !
le dernier update conserne cette erreur.

Commentaire de crashtest le 16/03/2005 17:13:21

ouai il est sympa j'aime bien. vu que rien me dérange dedans je te met 10

Commentaire de fg85 le 16/03/2005 18:56:58

Pas mal de bug :
- Lors de l'ouverture de la fenêtre, tout ce décalle vers la droite sous firefox.
- Tout les "code +=" aurait largement pus être allégé (pour quelqu'un supprimé) , cela ralentit le chargement de la page (j'ai tester sur 2 vieux bousin et sa à prix vraiment trop de temps)
- Etc...

Sinon niveau personnalisation ça va, mais dans cette catégorie on peut toujours faire mieux ;-)

Script simple pour les débutants qui pourront le modifier à leur gré .

je te donne un 7/10 (pour le bug)

Commentaire de PhiL666 le 16/03/2005 21:31:17

J'ai gardé les "code +=" pour garder le code lisible (un script se trouve dans la fenêtre ouverte)

IMPORTANT: si vous décidez de réduire les "code +=" vous devez garder les lignes :
    code += "<";
    code += "/SCRIPT>\n";
de façon à ce que le script ne soit pas interrompu

Commentaire de lecok5 le 18/03/2005 00:54:45

Très bonne source, elle va m'être très utile après quelques modifications. merci 10/10

Commentaire de meh le 21/03/2005 19:40:54

Pas mal !

Commentaire de stephfnar le 12/04/2005 22:46:32

Très bien ce script.
J'essaye de l'adapter à mes besoins mais j'ai un peu du mal... Pourriez-vous me dire s'il y a moyen de changer la police du titre de la galerie?
Merci

Stephf

Commentaire de fartflyng le 26/06/2005 23:15:03

impec

Commentaire de skiso le 22/09/2005 18:39:16

on peut pas remplire le tableau avec une boucle on lui chargenant directement le contenu du repertoire?

Commentaire de samy89 le 02/04/2006 10:47:02

Je suis débutant en javascript et en programmation objet d' ou ma question.
Comment modidier le script pour que les images s' affichent dans un frame et non pas dans une nouvelle fenêtre?
Merci

Commentaire de VestaX le 25/05/2006 19:10:53

ya possibilité d'afficher les photos en miniatures et les agrandir des que l'on clique dessus?

Commentaire de stun43 le 07/06/2007 18:49:21

Parfais fonctionne totalement (jusqu'a présent)...

Elle correspond totalement a mes attentes.

Petit bonus pour les photos mises par défaut ^^.

 Ajouter un commentaire


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 galerie d'images comme VisualLightBox [ par grafikus ] Bonjour, je cherche un script pour créer une galerie d'images comme VisualLightBox, savez-vous ou je peux là trouver. Merci d'avance Galerie d'images [ par homer59650 ] Bonjour je viens d'acheter un Kits graphique pour mon site internet, dans ce kits il présente une galerie d'image en javascript[img]http://nsa14.casim Transition d'un bloc avec images text etc.. [ par suxlelo ] Bonjour, j'aimerai mettre un script sur mon site comme celui-ci [url=http://www.smartreaming.com/]Tapez le texte de l'url ici.[/url] comme on peut c Redimensionner toutes les images d'un blog en fonction de la taille du navigateur [ par toine258 ] Bonjour à tous, Je suis administrateur du blog [url]http://www.toutestici.eu[/url] et comme vous pouvez le constater les images ne s'ajuste pas à la t


Nos sponsors


Sondage...

Comparez les prix


iPod touch 3rd Generation (64 Go)
Entre 374€ et 379€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 4,711 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)