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 633 fois - Téléchargée 4 560 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
cs_stun43
Messages postés
18
Date d'inscription
mercredi 9 mai 2007
Statut
Membre
Dernière intervention
9 septembre 2008
7 juin 2007 à 18:49
Parfais fonctionne totalement (jusqu'a présent)...

Elle correspond totalement a mes attentes.

Petit bonus pour les photos mises par défaut ^^.
VestaX
Messages postés
374
Date d'inscription
mardi 2 décembre 2003
Statut
Membre
Dernière intervention
24 avril 2013
25 mai 2006 à 19:10
ya possibilité d'afficher les photos en miniatures et les agrandir des que l'on clique dessus?
cs_samy89
Messages postés
1
Date d'inscription
samedi 1 avril 2006
Statut
Membre
Dernière intervention
2 avril 2006
2 avril 2006 à 10:47
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
cs_skiso
Messages postés
103
Date d'inscription
dimanche 19 janvier 2003
Statut
Membre
Dernière intervention
19 septembre 2010
22 sept. 2005 à 18:39
on peut pas remplire le tableau avec une boucle on lui chargenant directement le contenu du repertoire?
fartflyng
Messages postés
1
Date d'inscription
jeudi 5 mai 2005
Statut
Membre
Dernière intervention
26 juin 2005
26 juin 2005 à 23:15
impec
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)