Galerie d'images - gestion de descriptions et des miniatures

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

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)