1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Galerie d'images - gestion de descriptions et des miniatures

Galerie d'images - gestion de descriptions et des miniatures

Soyez le premier à donner votre avis sur cette source.

Vue 28 437 fois - Téléchargée 4 543 fois

Télécharger le projet
Commenter

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 / Exemple : 


<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>
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
18
Date d'inscription
mercredi 9 mai 2007
Statut
Membre
Dernière intervention
9 septembre 2008
Parfais fonctionne totalement (jusqu'a présent)...

Elle correspond totalement a mes attentes.

Petit bonus pour les photos mises par défaut ^^.
Signaler
Messages postés
374
Date d'inscription
mardi 2 décembre 2003
Statut
Membre
Dernière intervention
24 avril 2013
ya possibilité d'afficher les photos en miniatures et les agrandir des que l'on clique dessus?
Signaler
Messages postés
1
Date d'inscription
samedi 1 avril 2006
Statut
Membre
Dernière intervention
2 avril 2006
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
Signaler
Messages postés
103
Date d'inscription
dimanche 19 janvier 2003
Statut
Membre
Dernière intervention
19 septembre 2010
on peut pas remplire le tableau avec une boucle on lui chargenant directement le contenu du repertoire?
Signaler
Messages postés
1
Date d'inscription
jeudi 5 mai 2005
Statut
Membre
Dernière intervention
26 juin 2005
impec
Afficher les 14 commentaires
S'inscrire maintenant

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.

Du même auteur (PhiL666)