diaporama javascript deux boutons

obtenir ces boutons

Créer son diaporama : 9° partie

Diaporama à 2 boutons

Mise à jour du 26 février 2012.

La page précédente reproduit le code simplifié qui permet d'obtenir le diaporama en-dessous du titre.

La page antérieure explique comment créer un diaporama et présente un modèle plus élaboré.


Le code simplifié qui suit se contente d'afficher une image et 2 boutons pour accéder aux autres images (sans défilement automatique).

En cliquant sur les images, on accède à l'image agrandie ou (si on change les adresses des liens) à une autre page.

EXEMPLES 5 : CLIQUER ICI. Petites images.

<script language="JavaScript">

var dia1Image = new Array();

dia1Image[0] = 'http://1.bp.blogspot.com/-qXmWvSaOs-E/T0D-GAV-0AI/AAAAAAAABII/7k3RGnCn9Cg/s800/voilier1-1.JPG';
dia1Image[1] = 'http://1.bp.blogspot.com/-az9qGM3otFc/TzutIVByHhI/AAAAAAAABHU/beiybrIoBfk/s800/voilier3.JPG';
dia1Image[2] = 'http://1.bp.blogspot.com/-WIV0PyBYzbQ/T0T7oY_tiuI/AAAAAAAABME/lfHBjyd78P4/s800/voilier7.JPG';
dia1Image[3] = 'http://3.bp.blogspot.com/-cLFyNl395Pc/TzutMxWaKBI/AAAAAAAABHg/2ZD5Vb9onsI/s800/voilier4.JPG';
dia1Image[4] = 'http://1.bp.blogspot.com/-T2Jvly-xOIk/TzutD4Aog_I/AAAAAAAABHI/HKzymvZTCkY/s800/voilier2.JPG';
dia1Image[5] = 'http://4.bp.blogspot.com/-JhyjrZouQ9E/TzutZMDmmtI/AAAAAAAABH4/5gZ2xiLOZas/s800/voilier6.JPG';

dia1Lien = new Array();

dia1Lien[0] = 'http://1.bp.blogspot.com/-qXmWvSaOs-E/T0D-GAV-0AI/AAAAAAAABII/7k3RGnCn9Cg/s1600/voilier1-1.JPG';
dia1Lien[1] = 'http://1.bp.blogspot.com/-az9qGM3otFc/TzutIVByHhI/AAAAAAAABHU/beiybrIoBfk/s1600/voilier3.JPG';
dia1Lien[2] = 'http://1.bp.blogspot.com/-WIV0PyBYzbQ/T0T7oY_tiuI/AAAAAAAABME/lfHBjyd78P4/s1600/voilier7.JPG';
dia1Lien[3] = 'http://3.bp.blogspot.com/-cLFyNl395Pc/TzutMxWaKBI/AAAAAAAABHg/2ZD5Vb9onsI/s1600/voilier4.JPG';
dia1Lien[4] = 'http://1.bp.blogspot.com/-T2Jvly-xOIk/TzutD4Aog_I/AAAAAAAABHI/HKzymvZTCkY/s1600/voilier2.JPG';
dia1Lien[5] = 'http://4.bp.blogspot.com/-JhyjrZouQ9E/TzutZMDmmtI/AAAAAAAABH4/5gZ2xiLOZas/s1600/voilier6.JPG';

var dia1Legende = new Array()

dia1Legende [0] = 'Légende 1';
dia1Legende [1] = 'Légende 2';
dia1Legende [2] = 'Légende 3';
dia1Legende [3] = 'Légende 4';
dia1Legende [4] = 'Légende 5';
dia1Legende [5] = 'Légende 6';

var dia1compteur = parseInt(Math.random()*dia1Image.length);
var dia1compteur2 = 0;
var dia1action = 1;
var dia1debut=1;
function dia1avant() {dia1action = 16;clearTimeout(dia1intervalle);dia1changer();}
function dia1arriere() {dia1action=15;clearTimeout(dia1intervalle);dia1changer();}
function dia1premiere() {dia1compteur=1;dia1action = 1;dia1debut=1;dia1changer();}
function dia1derniere() {dia1compteur=(dia1Image.length);dia1action = 2;dia1debut=1;dia1changer();}
function dia1stop() {dia1action = 1;dia1changer();}
function dia1suivante() {dia1compteur++;dia1action = 1;dia1changer();}
function dia1precedente() {dia1compteur = dia1compteur - 1;dia1action = 2;dia1changer();}
function dia1demarrage() {document.write('<img style="display:none;" border="0" name="dia1defil2" />');document.write('<a href="#" onclick="window.open(dia1Lien[dia1compteur-1]);return(false)"><img style="width: 800px; height: 450px;background:transparent;border:solid #fff 5px;" name="dia1defil" /></a>');dia1changer();}
function dia1changer(){
if (dia1debut==1){dia1intervalle = setTimeout("dia1changer()",20);}
if (dia1action == 16) dia1compteur++;
if (dia1action == 15) {dia1compteur=dia1compteur-1};
if (dia1compteur == 0) {dia1compteur = dia1Image.length;};
if (dia1compteur == (dia1Image.length+1)) {dia1compteur = 1;};
if (dia1debut==1) {document.dia1defil2.src = dia1Image[dia1compteur-1]};
dia1debut=0;
dia1compteur2=dia1compteur+1;if (dia1action == 2) dia1compteur2=dia1compteur-1;
if (dia1action == 15) dia1compteur2=dia1compteur-1;
if (dia1compteur2 == (dia1Image.length+1)) {dia1compteur2 = 1;};
if (dia1compteur2 == 0) {dia1compteur2 = dia1Image.length;};
document.dia1defil2.src = dia1Image[dia1compteur2-1];
document.getElementById('dia1legendes').innerHTML = dia1Legende [dia1compteur-1];
document.dia1defil.src = dia1Image[dia1compteur-1];}
</script><center><script language="javascript">dia1demarrage()</script><div id="dia1legendes" style="margin: 0;padding:0;color:#009;background:transparent;width:810px;">
<span style="color:#eee;">.</span></div>
<div style="margin-top:0px;">
<input type="button" style="width:40px;" value="&lt;" onclick="dia1precedente();"/><input type="button" style="width:40px;margin-left:30px;" value="&gt;" onclick="dia1suivante();"/></div>
</center><br/>

Comment ajouter un gadget HTML/JavaScript sur un blog

Adaptations :
- on peut changer les adresses des images (dia1Image[0] ...) et des liens vers les images agrandies (dia1Lien[0] ...), en ajouter et en supprimer ;
- pour changer le cadre de l'image, corriger : border:solid #fff 5px; : on peut changer la couleur (#fff) et l'épaisseur (5px) du cadre ;
- pour supprimer le cadre de l'image, remplacer : border:solid #fff 5px; par border:none;
- pour changer la taille du diaporama, modifier : style="width: 800px; height: 450px;
- ...


Pour ne pas afficher les légendes, il faut supprimer ces 2 codes :

document.getElementById('dia1legendes').innerHTML = dia1Legende [dia1compteur-1];

<div id="dia1legendes" style="margin:0;padding:0;color:#009;background:transparent;width:810px;"><span style="color:#eee;">.</span></div>

Pour changer la taille de la barre avec les légendes, corriger : width: 810px;.

On peut donner une couleur de fond à la barre des légendes : changer "transparent".

Pour corriger le texte des légendes, modifier : Legendedia1 [0] = 'Légende 1'; ...


En option, on peut ajouter un titre au-dessus des images.

Il suffit d'ajouter le code qui suit juste avant : <script language='JavaScript'>dia1demarrage()</script>.

<div id="titre" style="margin: 0;padding:0;background:#ddd;width:800px;">TITRE</div>

Remarque : 800px doit être remplacé par la largeur de l'image.

EXEMPLE 5 : CLIQUER ICI.


Ce diaporama peut être ajouté sur une "PAGE STATIQUE" ou dans un GADGET HTML/JavaScript.

Les diaporamas de grand format, accessibles ci-dessus comme exemples, ont été placés dans des page statiques. On peut les créer dans le même blog ou dans des blogs spéciaux permettant d'afficher 20 pages statiques (accessibles par des liens) et donc 20 diaporamas.


On peut ajouter plusieurs diaporamas sur la même page.

EXEMPLE 2 : CLIQUER ICI.

Pour cela, il faut modifier le code avec le bloc-notes (ou notepad) et ajouter un numéro d'ordre différent par diaporama : en remplaçant tous les "dia1" par "dia2" ou "dia3", ...


Pour toujours démarrer le diaporama avec la même image, remplacer dans le code:
var compteurdia1 = parseInt(Math.random()*Imagedia1.length);
par
compteurdia1 = 1;
(pour la première image - un autre numéro d'ordre pour une autre image).


En cliquant sur les images, on peut aussi OUVRIR UNE AUTRE PAGE (du même site ou d'un autre) DIFFÉRENTE POUR CHAQUE image.

EXEMPLES 3 : CLIQUER ICI. Petites images.

Exemple : utiliser dans le code les liens suivants vers d'autres pages :

dia1Lien[0] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages.html";
dia1Lien[1] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages-2.html";
dia1Lien[2] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages-3.html";
dia1Lien[3] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages-4.html";
dia1Lien[4] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/01/derniers-messages-5.html";
dia1Lien[5] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/01/derniers-messages-6.html";

Les liens s'ouvrent DANS UNE NOUVELLE FENÊTRE : en fermant la nouvelle page, le visiteur revient sur le blog de départ au lieu de le quitter définitivement !!!

En option on peut cliquer sur une des images et être transféré vers une autre page, mais contrairement au code ci-dessus, la même page quelle que soit l'image affichée.

Pour obtenir cela, remplacer :

<a href="#" onclick="window.open(dia1Lien[dia1compteur-1]);return(false)"><img style="width:800px;height:450px;background:transparent;"border="0" name="dia1defil" /></a>

par :

<a href="#" onclick="window.open(dia1Lien[0]);return(false)"><img style="width:800px;height:450px;background:transparent;"border="0" name="dia1defil" /></a>

Pour modifier l'adresse de destination du lien, corriger : dia1Lien[0] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages.html";

Le lien s'ouvre DANS UNE NOUVELLE FENÊTRE : en fermant la nouvelle page, le visiteur revient sur le blog de départ au lieu de le quitter définitivement !!!

Aucun commentaire: