diaporama banniere defilante images miniatures 2

obtenir ces boutons

Créer son diaporama : 8° partie

Créer un bandeau d'images miniatures : 2

Il est possible comme ci-dessus de créer un bandeau de 6 images miniatures défilantes, avec, de part et d'autre, des onglets permettant de changer le sens du défilement ou de passer immédiatement à la série d'images suivante.

Sur la page précédente, on trouve comment créer le même bandeau, mais sans les flèches de part et d'autre qui permettent de changer le sens du défilement.

A intervalles réguliers, 6 images sont remplacées par 6 autres. Cela permet d'en visionner beaucoup plus que si une seule nouvelle miniature était ajoutée.

En cliquant sur une de ces images, on obtient une image agrandie ou on atteint une autre page (du blog ou non). Ces images peuvent être des liens vers des pages toutes différentes (dans l'exemple ci-dessus, elles sont cependant toutes dirigées vers cette même page).

Plus d'explications concernant les diaporamas sont disponibles sur cette page.

Code : coller les instructions suivantes dans un gadget HTML/JavaScript ou une "page statique" de Blogger :

<style type="text/css">
#dia9affichage_miniatures{text-align:center;}
.dia9miniatures{display:inline;margin:0 auto;padding: 0;border:solid #ccc 1px;width:15%;font-family:arial;background:#ccc;cursor:pointer;}
.dia4onglets{border:none;font-weight:bold;font-family:arial;background:transparent;vertical-align:top;padding-top:25px;color:#999;cursor:pointer;font-size:30px;}
</style><script language="JavaScript">

var dia9ImageMini = new Array();

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

var dia9Lien = new Array();

dia9Lien[0] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[1] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[2] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[3] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[4] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[5] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[6] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[7] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[8] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[9] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[10] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";
dia9Lien[11] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/diaporama-banniere-defilante-images.html";

var dia9compteur = parseInt(Math.random()*dia9ImageMini.length);
var dia9action = 16;var dia9debut=1;
var dia9secondes=1.5;var dia9premimage=0;var dia9nbminis=6;
var dia9seriemax=parseInt((dia9ImageMini.length)/dia9nbminis);
if ((dia9ImageMini.length/dia9nbminis) > dia9seriemax){dia9seriemax=dia9seriemax+1};

function dia9serieprec() {
dia9action = 15;
clearTimeout(dia9intervalle);
dia9changer();
}
function dia9seriesuiv() {
dia9action = 16;
clearTimeout(dia9intervalle);
dia9changer();
}
function dia9appelnumero(dia9numero) {dia9compteur=dia9numero+dia9premimage-1;if (dia9compteur >= dia9ImageMini.length+1) {dia9compteur = dia9compteur-dia9premimage+1};window.open(dia9Lien[dia9compteur-1]);return(false);};

function dia9changer(){
if (dia9action >= 15) {
dia9intervalle = setTimeout("dia9changer()",(1000*dia9secondes));
dia9secondes=5;
if (dia9action == 16) dia9compteur = dia9premimage+dia9nbminis;
if (dia9action == 15) dia9compteur = dia9premimage-dia9nbminis;
if (dia9compteur<=0){dia9compteur=((dia9seriemax*dia9nbminis)-dia9nbminis+1)};
if (dia9compteur > (dia9ImageMini.length)) {dia9compteur = 1};
if (dia9debut==0) {var dia9premimage2= parseInt((dia9compteur-1)/dia9nbminis)*dia9nbminis+1;
if (dia9premimage != dia9premimage2){dia9premimage=dia9premimage2;dia9boucle()};
};dia9debut=0;}
}
function dia9boucle() {
var dia9variable=0;var dia9min =0+dia9premimage;
var dia9max =dia9nbminis+dia9premimage;
for(var i = dia9min ; i < dia9max ; i++)
{dia9variable=i-dia9premimage+1;
dia9variable="dia9-"+dia9variable;
var j=i;if (j >= (dia9ImageMini.length+1)) {j = j-dia9premimage+1};
document.getElementById(dia9variable).src = dia9ImageMini[j-1];}
}
</script><center><!--[if IE]><div style="margin-top:15px;">
</div>
<![endif]--><div id="dia9affichage_miniatures">
<input type="button" class="dia4onglets" value="&lt;" onclick="dia9serieprec();"/><img class="dia9miniatures" id="dia9-1" onclick="dia9appelnumero(1);"/><img class="dia9miniatures" id="dia9-2" onclick="dia9appelnumero(2);"/><img class="dia9miniatures" id="dia9-3" onclick="dia9appelnumero(3);"/><img class="dia9miniatures" id="dia9-4" onclick="dia9appelnumero(4);"/><img class="dia9miniatures" id="dia9-5" onclick="dia9appelnumero(5);"/><img class="dia9miniatures" id="dia9-6" onclick="dia9appelnumero(6);"/><input type="button" class="dia4onglets" value="&gt;" onclick="dia9seriesuiv();"/></div>
<script language="javascript">dia9changer()</script>

<!--[if IE]><div style="margin-top:10px;">
</div>
<![endif]-->

</div>
</center>
<div style="clear:both;">
</div>
<br/>

Comment ajouter un gadget HTML/JavaScript sur un blog.

Adaptations :

Remplacer les adresses des miniatures : dia9ImageMini[0] ...

Remplacer les adresses à atteindre dans les liens : dia9Lien[0] ...

Changer le nombre de miniatures : var dia9nbminis=6;

Ajouter une miniature : ajouter <img class="dia9miniatures" id="dia9-7" onclick="dia9appelnumero(7);"/> ... après <img class="dia9miniatures" id="dia9-6" onclick="dia9appelnumero(6);"/>

Régler la vitesse du défilement : dia9secondes=5;

Largeur des miniatures : width:15%; (au début du code)

Ajouter des espaces entre les miniatures : remplacer (au début du code) auto par 3px dans : .dia9miniatures{display:inline;margin:0 auto;

1 commentaire:

Nororre nororre a dit…

Merci beaucoup pour cette astuce!
ça faisait un moment que je voulais le faire mais je ne comprenais pas! mille merci!

Aurore