CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 05:05:29

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

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

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é :21 010 / 3 576

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´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 !

images
- 01.jpg 18 471 octets
- 01small.jpg 2 917 octets
- 02.jpg 32 955 octets
- 02small.jpg 4 048 octets
- 03.jpg 21 654 octets
- 03small.jpg 3 758 octets
- 04.jpg 28 511 octets
- 04small.jpg 4 758 octets
- 05.jpg 27 893 octets
- 05small.jpg 4 513 octets
- 06.jpg 36 209 octets
- 06small.jpg 5 281 octets
- 07.jpg 24 432 octets
- 07small.jpg 4 036 octets
galerie.htm 5 182 octets

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

(OBJET) SCROLLBAR

QUESTIONNAIRE SUPPORTANT DIFF. TYPES DE QUESTIONS

Toutes les sources de PhiL666

Sources de la même categorie

STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard

MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin

FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz

[-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47

OGG MEDIA PLAYER par kazma

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

[-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47

[DSI] DÉPLACEMENTS SUR IMAGES par Bul3

DIAPORAMA 360° V2 MOUVEMENT DANS LES QUATRE SENS ROTATION VA... par abdelaziz_info

DIAPORAMA 360 DEGRÉ COMPLET ET TOUT AUTOMATIQUE QUATRE VITES... par abdelaziz_info

EFFET DE CASCADE SUR DES IMAGES AVEC TRANSPARENCE... par adelami

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 image doublé dans mon script [ par Damslo ] Bonjour, voila,je vous explique mon petit soucis,si quelqu'un pouvait m'aider,ca serait tres sympa. je voudrais lors d'une fonction qui passerai de Urgent : Galerie images!!! [ par khako ] Bonjour à tous, [b]J'ai un vrai problème, c'est très urgent[/b] [^^sad1]. Si quelqu'un a la solution, ce serait formidable!!!! Je n'arrive pas à trou Alterner deux images [ par CyricFirehands ] Bonjour, Je suis en train de coder un site internet, pour mon petit plaisir, or en essayant de coder une fonction Javascript, je me heurte a quelques

Nos sponsors

Derniers Blogs

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

DEFINITION DE LA METHODE SETBORDER par nassim1987

RE : FONCTION RECHERCHE DATE par Eyeron

FONCTION RECHERCHE DATE par Eyeron

RE : RéCUPERER LA TAILLE D'UN DIV par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5