diaporama bandeau images miniatures

obtenir ces boutons

Créer son diaporama : 7° partie

Créer un bandeau d'images miniatures

Il est possible comme ci-dessus de créer un bandeau de 6 images miniatures défilantes.

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.

A la page suivante, on trouve comment créer le même bandeau, mais avec en plus, de part et d'autre des flèches qui permettent de changer le sens du défilement.

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">
#dia8affichage_miniatures{text-align:center;}
.dia8miniatures{display:inline;margin:0 auto;padding: 0;border:solid #ccc 1px;width:16%;font-family:arial;background:#ccc;cursor:pointer;}
</style><script language="JavaScript">

var dia8ImageMini = new Array();

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

var dia8Lien = new Array();

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

var dia8compteur = parseInt(Math.random()*dia8ImageMini.length);
var dia8action = 16;var dia8debut=1;
var dia8secondes=1.5;var dia8premimage=0;var dia8nbminis=6;
var dia8seriemax=parseInt((dia8ImageMini.length)/dia8nbminis);
if ((dia8ImageMini.length/dia8nbminis) > dia8seriemax){dia8seriemax=dia8seriemax+1};

function dia8appelnumero(dia8numero) {dia8compteur=dia8numero+dia8premimage-1;if (dia8compteur >= dia8ImageMini.length+1) {dia8compteur = dia8compteur-dia8premimage+1};window.open(dia8Lien[dia8compteur-1]);return(false);};

function dia8changer(){
if (dia8action >= 15) {
if (dia8action == 16){dia8intervalle = setTimeout("dia8changer()",(1000*dia8secondes))};
dia8secondes=6;
if (dia8action == 16) dia8compteur = dia8premimage+dia8nbminis;
if (dia8compteur > (dia8ImageMini.length)) {dia8compteur = 1};
if (dia8debut==0) {var dia8premimage2= parseInt((dia8compteur-1)/dia8nbminis)*dia8nbminis+1;
if (dia8premimage != dia8premimage2){dia8premimage=dia8premimage2;dia8boucle()};
};dia8debut=0;}
dia8action = dia8action-1;
dia8action = 16;
}
function dia8boucle() {
var dia8variable=0;var dia8min =0+dia8premimage;
var dia8max =dia8nbminis+dia8premimage;
for(var i = dia8min ; i < dia8max ; i++)
{dia8variable=i-dia8premimage+1;
dia8variable="dia8-"+dia8variable;
var j=i;if (j >= (dia8ImageMini.length+1)) {j = j-dia8premimage+1};
document.getElementById(dia8variable).src = dia8ImageMini[j-1];}
}
</script><center><!--[if IE]><div style="margin-top:15px;">
</div>
<![endif]--><div id="dia8affichage_miniatures">
<img class="dia8miniatures" id="dia8-1" onclick="dia8appelnumero(1);"/><img class="dia8miniatures" id="dia8-2" onclick="dia8appelnumero(2);"/><img class="dia8miniatures" id="dia8-3" onclick="dia8appelnumero(3);"/><img class="dia8miniatures" id="dia8-4" onclick="dia8appelnumero(4);"/><img class="dia8miniatures" id="dia8-5" onclick="dia8appelnumero(5);"/><img class="dia8miniatures" id="dia8-6" onclick="dia8appelnumero(6);"/></div>
<script language="javascript">dia8changer()</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.

* * * * *
Dans l'exemple ci-dessus, toutes les images ont au départ la même hauteur. En ajoutant "width:16%;" (largeur) au début du code et rien concernant la hauteur, la hauteur se réduit automatiquement également à 16 %.

Si les images de départ ont des hauteurs différentes, on peut ajouter au même endroit (3° ligne du code) une instruction concernant la hauteur : "height:16%;" ou "height:40px;" ...

* * * * *
Si on n'a que 6 images à afficher, on peut éviter le défilement en remplaçant :

dia8action = dia8action-1;
dia8action = 16;


par :

dia8action = dia8action-1;

7 commentaires:

Alcapone Livresacentalheure a dit…

Merci pour ce super tuto.

Ca fonctionne et c'est du plus bel effet. Par contre, je ne vois pas comment faire pour que les images soient à la même hauteur et ce, même si j'ai redimensioné les images avant de les héberger sur blogger.

Pouvez-vous m'éclairer svp ?

Voici le lien de ma page : http://embuscades-alcapone.blogspot.fr

Merci beaucoup !

Alcapone Livresacentalheure a dit…

Problème résolu.
Et merci pour ces conseils.

Gaillard Galopère a dit…

Comment as-tu fait pour que les images aient toutes la même hauteur ? Merci pour ta réponse

Delphine a dit…

Même question que Gaillard Galopère... je ne trouve pas comment faire pour que les images soient de même hauteur.
Pouvez vous m'aider svp?

delwanderlust.blogspot.com

Meiser a dit…

Bonjour.

Dans l'exemple ci-dessus, toutes les images ont au départ la même hauteur. En ajoutant "width:16%;" (largeur) au début du code et rien concernant la hauteur, la hauteur se réduit automatiquement également à 16 %.

Si les images de départ ont des hauteurs différentes, on peut ajouter au même endroit une instruction concernant la hauteur : "height:16%;" ou "height:40px;" ...


Forum Femmes Méditerranee a dit…

Bonjour,

J'ai créée mon bandeau de photos défilantes comme indiquée mais je voudrai que ce bandeau soit plus large, c'est à dire que l'ensemble des photos soit plus grande, et je voudrais aussi qu'il soit collé à celui que j'ai mit juste au dessus , qui est lui une page html avec une photo "peinture" seule . Mon bandeau de photos défilantes est trop petit par rapport à l'autre et il y a trop d'espace entre les deux.
Pouvez vous m'aider?
pour voir: http://forumfemmesmed.blogspot.fr/

Merci d'avance

TerreurVision a dit…
Ce commentaire a été supprimé par l'auteur.