Toutela - Le site des Internautes

Plutôt que de créer un grand nombre de pages statiques pour présenter une galerie d'images ou de photos, ce script permet de créer un modèle de présentation de X images et de changer à la volée les images présentées comme si on changeait de page.
Il permet également d'afficher les images en plus grand dans un pop-up si l'utilisateur clique sur une image.
En bonus, on pourra naviguer d'une page à une autre, revenir à la première et aller à la dernière d'un seul clic.

Exemple :

Le code :

Entre <HEAD> et </HEAD> :

// Chemin pour accéder aux grandes images
var baseBig = "images/grand/";

// Noms des images séparés par des ";"
var diapos = "1.gif;2.gif;3.gif;4.gif;5.gif;6.gif;7.gif;8.gif;9.gif;10.gif";

// Nombre d'images par affichage
var lot = 4;

// Tableau qui recevra la liste des images une fois séparées
var galerie = new Array();

// Index d'affichage des images
var position = 0;

// Emplacement où afficher la prochaine image
var emplacement = 1;

// Fonction de création de la liste d'images arrondi par lot
function completer() {
galerie = new Array();

// Affectation des noms d'images
galerie = diapos.split(';');

// Si le nombre d'images n'est pas multiple du lot
if ( galerie.length / lot != Math.round(galerie.length / lot) ) {

// On ajoute une image vide
diapos += ";px.gif";

// Et on relance
completer();
}

// Sinon
else {

// On lance le premier lot
change('+');
}
}

// Fonction changeant les images visibles
function change(sens) {

// Si on veut avancer
if ( sens == '+' ) {

// Si on n'est pas encore à la fin de la liste
if ( position < galerie.length ) {

// Pour les X (lot) prochaines images
for ( i = position; i < (position + lot); i++ ) {

// On affecte à l'emplacement suivant la prochaine image
eval('document.img_' + emplacement).src = base + galerie[i];

// On fait avancer l'emplacement
emplacement++;
}

// On fait avancer l'index des images
position += lot;

// De même pour l'affichage de la page en cours par rapport au total des pages
document.formulaire.pages.value = position / lot + "/" + galerie.length / lot;
}
}

// Si on veut reculer
if ( sens == '-' ) {

// Si l'index des images est supérieur à 1 lot
if ( position >= lot ) {

// Si on est dans le dernier lot
if ( position == galerie.length ) {

// On recule d'un
position -= lot;
}

// On recule d'un lot
position -= lot;

// Pour les X (lot) prochaines images
for ( i = position; i < (position + lot); i++ ) {

// On affecte à l'emplacement suivant la prochaine image
eval('document.img_' + emplacement).src = base + galerie[i];

// On fait avancer l'emplacement
emplacement++;
}

// De même pour l'affichage de la page en cours par rapport au total des pages
document.formulaire.pages.value = position / lot + 1 + "/" + galerie.length / lot;
}
}

// On ré-initialise l'emplacement pour la prochaine image
emplacement = 1;
}

// Variable qui recevra le code html du pop-up
var affichage = '';

// Variable qui recevra le pop-up lui-même
var pop;

// Fonction d'ouverture et d'alimentation du pop-up
function afficheImage(empl) {
affichage = '';

// Code html du pop-up
affichage += '<html><head><title>Photo</title></head><body onLoad="window.focus();">';

// On appelle la source de l'image correspondant à l'emplacement et au numéro de lot
affichage += '<img src="' + baseBig + galerie[position - lot + empl-1] + '">';
affichage += '</body></html>';

// Ouverture du pop-up
pop = window.open('','pop','width=300,height=150,status=no,directories=no,toolbar=no,
location=no,menubar=no,scrollbars=yes,resizable=no');

// Nettoyage du pop-up
pop.document.close();

// Insertion du code HTML du pop-up
pop.document.write(affichage);
}
</script>

Entre <BODY> et </BODY> :

<td><a href="javascript:afficheImage(1);"><img src="images/px.gif" width="54" height="54" name="img_1" border="0"></a></td>
<td><a href="javascript:afficheImage(2);"><img src="images/px.gif" width="54" height="54" name="img_2" border="0"></a></td>
</tr>
<tr>
<td><a href="javascript:afficheImage(3);"><img src="images/px.gif" width="54" height="54" name="img_3" border="0"></a></td>
<td><a href="javascript:afficheImage(4);"><img src="images/px.gif" width="54" height="54" name="img_4" border="0"></a></td>
</tr>
<tr>
<td colspan="2" align="center">

<a href="javascript:position=0;change('+');">|<</a>   
<a href="javascript:change('-');"><<</a>   
<a href="javascript:change('+');">>></a>

<a href="javascript:position=(galerie.length-lot);change('+');">>|</a><br>

(page : <input type="text" name="pages" size="3">)</td>
</tr>
</table>
</form>

<script>completer();</script>

Newsletter

Toutela