ajouter un diaporama code javascript

obtenir ces boutons

Créer son diaporama : 4° partie

L'utilisation de ce code est décrite sur la page précédente.

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

<style type="text/css">
#dia1affichage_titre{display:none;color:#007;margin: 0;padding:0;background:transparent;width:71%;}
.dia1aff-im-princ{ width: 71%;background:transparent;border:solid #ccc 1px;}
#dia1affichage_legendes{display:none;color:#007;margin: 0;padding:0;background:transparent;width:71%;}
#dia1affichage_numero{display:inline;color:#009;right:150px;}
.dia1miniatures{display:inline;margin:10px 5px 0px 5px;padding: 0;border:solid #ccc 1px;width:10.85%;font-family:arial;background:#ccc;cursor:pointer;}
.dia1onglets{display:inline;margin:0px;border:solid #999 1px;width:4%;font-family:arial;background:#D4D0C8;color:#000;cursor:pointer;}
body{background:#cde;}
.dia1boutons{display:inline;margin:16px 5px 0px 5px;padding: 0;border-top:solid #999 1px;border-left:solid #888 1px;width:10px;height:10px;font-family:arial;background:#D4D0C8;cursor:pointer;}
</style><script language="JavaScript">

var dia1Image = new Array();

dia1Image[0] = 'http://1.bp.blogspot.com/-WIV0PyBYzbQ/T0T7oY_tiuI/AAAAAAAABME/lfHBjyd78P4/s800/voilier7.JPG';
dia1Image[1] = 'http://1.bp.blogspot.com/-az9qGM3otFc/TzutIVByHhI/AAAAAAAABHU/beiybrIoBfk/s800/voilier3.JPG';
dia1Image[2] = 'http://1.bp.blogspot.com/-qXmWvSaOs-E/T0D-GAV-0AI/AAAAAAAABII/7k3RGnCn9Cg/s800/voilier1-1.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';

var dia1ImageMini = new Array();

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

var dia1Lien = new Array();

dia1Lien[0] = 'http://1.bp.blogspot.com/-WIV0PyBYzbQ/T0T7oY_tiuI/AAAAAAAABME/lfHBjyd78P4/s1600/voilier7.JPG';
dia1Lien[1] = 'http://1.bp.blogspot.com/-az9qGM3otFc/TzutIVByHhI/AAAAAAAABHU/beiybrIoBfk/s1600/voilier3.JPG';
dia1Lien[2] = 'http://1.bp.blogspot.com/-qXmWvSaOs-E/T0D-GAV-0AI/AAAAAAAABII/7k3RGnCn9Cg/s1600/voilier1-1.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 dia1Titre = new Array()

dia1Titre [0] = 'Titre 1';
dia1Titre [1] = 'Titre 2';
dia1Titre [2] = 'Titre 3';
dia1Titre [3] = 'Titre 4';
dia1Titre [4] = 'Titre 5';
dia1Titre [5] = 'Titre 6';

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 dia1action = 16;var dia1debut=1;
var dia1secondes=1.5;var dia1premimage=0;var dia1nbminis=6;
var dia1seriemax=parseInt((dia1Image.length)/dia1nbminis);
if ((dia1Image.length/dia1nbminis) > dia1seriemax){dia1seriemax=dia1seriemax+1};
function dia1serieprec() {dia1compteur=dia1premimage-dia1nbminis;
if (dia1compteur<=0){dia1compteur=((dia1seriemax*dia1nbminis)-dia1nbminis+1)};
if (dia1action == 16) {clearTimeout(dia1intervalle);dia1compteur=dia1compteur-1;};
if (dia1action == 15) {clearTimeout(dia1intervalle);dia1compteur=dia1compteur+dia1nbminis;
if (dia1compteur > dia1Image.length){dia1compteur=dia1Image.length+1}};dia1changer();}
function dia1seriesuiv() {dia1compteur=dia1premimage+dia1nbminis;
if (dia1compteur>=(dia1Image.length+1)){dia1compteur=1};
if (dia1action == 16) {clearTimeout(dia1intervalle);dia1compteur=dia1compteur-1;};
if (dia1action == 15) {clearTimeout(dia1intervalle);dia1compteur=dia1compteur+dia1nbminis;
if (dia1compteur > dia1Image.length){dia1compteur=dia1Image.length+1}};dia1changer();}
function dia1appelnumero(dia1numero) {dia1compteur=dia1numero+dia1premimage-1;if (dia1compteur >= dia1Image.length+1) {dia1compteur = dia1compteur-dia1premimage+1};
dia1action = 1;dia1changer();}
function dia1boutonappelnumero(dia1numero) {dia1compteur=dia1numero;dia1action = 1;dia1changer();}
function dia1avant() {dia1action = 16;clearTimeout(dia1intervalle);dia1changer();}
function dia1arriere() {dia1action=15;clearTimeout(dia1intervalle);dia1changer();}
function dia1premiere() {dia1compteur=1;dia1action = 1;dia1changer();}
function dia1derniere() {dia1compteur=(dia1Image.length);dia1action = 2;dia1changer();}
function dia1stop() {dia1action = 1;dia1changer();}
function dia1precedente() {dia1compteur = dia1compteur - 1;
if (dia1action == 16) {clearTimeout(dia1intervalle);dia1compteur=dia1compteur-1;};
if (dia1action == 15) {clearTimeout(dia1intervalle);dia1compteur=dia1compteur+1;};dia1changer();}
function dia1suivante() {dia1compteur++;
if (dia1action == 16) {clearTimeout(dia1intervalle);dia1compteur=dia1compteur-1;};
if (dia1action == 15) {clearTimeout(dia1intervalle);dia1compteur=dia1compteur+1;};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 class="dia1aff-im-princ" name="dia1defil" /></a>');dia1changer();}
function dia1changer(){
if (dia1action >= 15){dia1intervalle = setTimeout("dia1changer()",(1000*dia1secondes))};
dia1secondes=4;
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==0) {
var dia1compteur2 = dia1compteur-1;
var dia1compteur3 = dia1compteur+1;
if (dia1compteur2 == 0) {dia1compteur2 = dia1Image.length};
if (dia1compteur3 == (dia1Image.length+1)) {dia1compteur3 = 1};
document.dia1defil2.src = dia1Image[dia1compteur2-1];
document.dia1defil2.src = dia1Image[dia1compteur3-1];
var dia1premimage2= parseInt((dia1compteur-1)/dia1nbminis)*dia1nbminis+1;
if (dia1premimage != dia1premimage2){dia1premimage=dia1premimage2;dia1boucle()};
};dia1debut=0;
document.getElementById('dia1affichage_titre').innerHTML = dia1Titre [dia1compteur-1];
document.getElementById('dia1affichage_legendes').innerHTML = dia1Legende [dia1compteur-1];
var dia1numeromax=dia1premimage+dia1nbminis-1;
if (dia1numeromax > dia1Image.length){dia1numeromax=dia1Image.length};
document.getElementById('dia1affichage_numero').innerHTML = (dia1compteur+" / "+dia1Image.length+" ("+dia1premimage+"- "+dia1numeromax+")");
document.dia1defil.src = dia1Image[dia1compteur-1];}
function dia1boucle() {var dia1variable=0;var dia1min =0+dia1premimage;
var dia1max =dia1nbminis+dia1premimage;
for(var i = dia1min ; i < dia1max ; i++)
{dia1variable=i-dia1premimage+1;
dia1variable="dia1-"+dia1variable;
var j=i;if (j >= (dia1Image.length+1)) {j = j-dia1premimage+1};
document.getElementById(dia1variable).src = dia1ImageMini[j-1];}}
</script><center><!--[if IE]><div style="margin-top:15px;">
</div>
<![endif]--><div id="dia1affichage_iframe">
<div id="dia1affichage_titre">
<span style="color:#333;">.</span></div>
<script language="javascript">dia1demarrage()</script><div id="dia1affichage_legendes">
<span style="color:#333;">.</span></div>
<img class="dia1miniatures" id="dia1-1" onclick="dia1appelnumero(1);"/><img class="dia1miniatures" id="dia1-2" onclick="dia1appelnumero(2);"/><img class="dia1miniatures" id="dia1-3" onclick="dia1appelnumero(3);"/><img class="dia1miniatures" id="dia1-4" onclick="dia1appelnumero(4);"/><img class="dia1miniatures" id="dia1-5" onclick="dia1appelnumero(5);"/><img class="dia1miniatures" id="dia1-6" onclick="dia1appelnumero(6);"/><!--[if IE]><div style="margin-top:10px;">
</div>
<![endif]--><div class"dia1affichage_onglets" style="margin-top:0px;">
<input type="button" class="dia1onglets" value="&lt;&lt;" onclick="dia1arriere();"/><input type="button" class="dia1onglets" value="l&lt;" onclick="dia1premiere();"/><input type="button" class="dia1onglets" value="&#x2191;" onclick="dia1serieprec();"/><input type="button" class="dia1onglets" value="&lt;" onclick="dia1precedente();"/><input type="button" class="dia1onglets" style="width:55px;" name="automat" value="Stop" onclick="dia1stop();"/><input type="button" class="dia1onglets" value="&gt;" onclick="dia1suivante();"/><input type="button" class="dia1onglets" value="&#x2193;" onclick="dia1seriesuiv();"/><input type="button" class="dia1onglets" value="&gt;l" onclick="dia1derniere();"/><input type="button" class="dia1onglets" value="&gt;&gt;" onclick="dia1avant();"/><span style="margin:0;padding:0;font-size:14px;font-weight:bold;position:absolute;" id="dia1affichage_numero"></span></div>
<div id="dia1affichage_boutons">
<input type="button" class="dia1boutons" title="1" onclick="dia1boutonappelnumero(1);"/><input type="button" class="dia1boutons" title="2" onclick="dia1boutonappelnumero(2);"/><input type="button" class="dia1boutons" title="3" onclick="dia1boutonappelnumero(3);"/><input type="button" class="dia1boutons" title="4" onclick="dia1boutonappelnumero(4);"/><input type="button" class="dia1boutons" title="5" onclick="dia1boutonappelnumero(5);"/><input type="button" class="dia1boutons" title="6" onclick="dia1boutonappelnumero(6);"/></div>
</div>
</center>
<div style="clear:both;">
</div><br/>

Comment ajouter un gadget HTML/JavaScript sur un blog.

7 commentaires:

Anonyme a dit…

Bonjour
je vous remercie pour votre réponse, mais les boutons apparaissent toujours, juste les petits carrés ont disparue.

Mes photo n'apparaisent pas, je n'ai pas bien compris votre histoire de /s200 et /s800 j'ai fait un essai avec et un sans sa ne fonctionne pas.
pour info je place ce script dans un html qui est appelé dans une page.
vous pouvez voir votre anc script fonctionner a merveille sur www.rapidmoto.fr.
il me suffirais d'avoir les miniatures en dessous avec un lien vers la photo.
cordialement
Philippe

me a dit…

salut et bravo pour tout
c'est clair et parfait meme pour les nuls comme moi
j'aimerai simplement savoir comment mettre mes propres phtos au diaporama faut-il les rechercher manuellement sur son blog et comment ou y-a-t-il une manipulation
le diaporama de picasa ne m'a pas du tout
le votre est splendide
encore merci

Meiser a dit…

Bonjour.

Pour pouvoir être utilisée, l'image doit être sauvegardée sur un serveur et être accessible par une adresse htttp://...

Pour les utilisateurs de Blogger, il suffit de sauvegarder une image sur une "page" et de récupérer son adresse sur la version HTML de cette page.


claude a dit…

Bonjour, ou plus tôt bonsoir,

J'ai copié le script de la page dans un gadget blogger. Le diaporama s'affiche bien, mais il est collé à gauche dans la colonne du milieu, et sur la même ligne il y a deux images miniatures à droite.
2ème point, sur la droite de l'écran, en bleu foncé est affiché le comptage des images.(2/6 etc...)

N'ayant pas réussi à situé le problème j'ai copié le code source du diaporama, et là il est bien centré, mais le comptage des images est toujours là.

Est-ce que mes explications sont assez clair !!!

Sinon super site, et merci

Ci-dessous le lien vers mon blog de test.
http://lettretest.blogspot.fr/

Meiser a dit…

Bonjour.

Au début, changer :
#dia1affichage_numero{display:inline;
en :
#dia1affichage_numero{display:none;


Beetle a dit…

Bonjour, j'ai réussie à intégrer votre code. Mais à la place des lien. je n'arrive pas à mettre mes photos. Je l'ai prend dans mon album picasa sur le net. Mais ce n'est pas au format JPG. Merci d'avance pour vos réponses.

Beetle a dit…

Bonjour, j'ai créer le diaporama à l'aide de votre code. Cependant quand je remplace par mes photos elles sont très très grande. Du coup cela change le format du diaporama. Comment faire pour le faire plus petit ?

Merci d'avance