diaporama plein ecran 3

obtenir ces boutons

Ajouter un diaporama PLEIN ÉCRAN (3/3)

Il est possible, avec le code ci-dessous, d'ajouter sur une "page statique" d'un blog un diaporama qui couvre tout l'écran et qui affiche les images dont l'adresse est ajoutée dans le code : exemple : cliquer ici.

Remarque : la méthode pour afficher en plein écran les images d'un ALBUM Picasa, est expliquée sur les deux pages précédentes.

* * * * *
Dans le code ci-dessous, la taille des images s'adapte automatiquement à la résolution de l'écran du visiteur : l'image est toujours visible intégralement.

Code : coller les instructions qui suivent dans la version HTML d'une "page statique" de Blogger et créer un lien vers cette page.

Les "pages statiques" de Blogger : cliquer ici.

Il suffit de changer les adresses des images dans l'instruction dia13Image[0] = 'http://3.bp.blogspot.com/-e755Y2UHo9c/T1993MX5mUI/AAAAAAAABNs/96-DFYHvzFI/s1600/fond%2Bneige%2B4.JPG'; et les 9 suivantes. On peut aussi en ajouter.

Pour changer la durée de l'affichage de chaque image, modifier éventuellement 5000 dans : setTimeout("dia13compteurmax()",5000);.

* * * * *
<script language="JavaScript">

var dia13Image = new Array();

dia13Image[0] = 'http://3.bp.blogspot.com/-e755Y2UHo9c/T1993MX5mUI/AAAAAAAABNs/96-DFYHvzFI/s1600/fond%2Bneige%2B4.JPG';
dia13Image[1] = 'http://4.bp.blogspot.com/-GYBlessfwRg/T1izGtdHMoI/AAAAAAAABNI/e5_DKDkjHGk/s1600/combi.JPG';
dia13Image[2] = 'http://2.bp.blogspot.com/-mmvZbxMPwNk/T1-22cx3T0I/AAAAAAAABOg/xllcW6GUmcE/s1600/fond%2Bvert2.JPG';
dia13Image[3] = 'http://2.bp.blogspot.com/-6Q9EXL7AKR4/T2BfTdYu-gI/AAAAAAAABOs/Kh0Tge36m6g/s1600/reverberes.JPG';
dia13Image[4] = 'http://4.bp.blogspot.com/-VgF_aPV1Vu0/T2JbqO4zl3I/AAAAAAAABO4/A-Ey2JGxK3k/s1600/fond%2Btelephones.JPG';
dia13Image[5] = 'http://3.bp.blogspot.com/-2jJ2TjFARIU/T2X0gd4egiI/AAAAAAAABP4/2bKc4krIB6M/s1600/fond%2Bparlement.JPG';
dia13Image[6] = 'http://4.bp.blogspot.com/-UsqZcbWNxWA/T1-FnLNKFLI/AAAAAAAABOI/rkWsDb0dPkE/s1600/batavia2.JPG';
dia13Image[7] = 'http://1.bp.blogspot.com/-d42ZGHMJ8yg/T2Xy9FwZfbI/AAAAAAAABPs/9lfP-ZIF6xo/s1600/fond%2Btrain.JPG';
dia13Image[8] = 'http://1.bp.blogspot.com/-nhhSWideSpg/T2XyIHl5l7I/AAAAAAAABPg/UzrYwLzlCoM/s1600/fond%2Bverriere.JPG';
dia13Image[9] = 'http://4.bp.blogspot.com/-AWXCwNSSRQQ/T2X5TwyBfnI/AAAAAAAABQQ/sWaK7JycFpw/s1600/fond%2Bferry.JPG';

var dia13compteur = parseInt(Math.random()*dia13Image.length);
var dia13compteur2 = 0;
var dia13defiler = 16;
var dia13debut=1;
function dia13defilement() {document.write('<img style="display:none;" border="0" name="dia13defil2" />');document.write('<img style="position:fixed; left: 0px; top:0px; z-index:999;width: 100%;" name="dia13defil" />');dia13compteurmax();}
function dia13compteurmax(){dia13intervalle = setTimeout("dia13compteurmax()",5000);if (dia13defiler == 16) dia13compteur++;if (dia13compteur == (dia13Image.length+1)) {dia13compteur = 1;};
if (dia13debut==1) {document.dia13defil2.src = dia13Image[dia13compteur-1]};dia13debut=0;
dia13compteur2=dia13compteur+1;
if (dia13compteur2 == (dia13Image.length+1)) {dia13compteur2 = 1;};
document.dia13defil2.src = dia13Image[dia13compteur2-1];
document.dia13defil.src = dia13Image[dia13compteur-1];}
</script><center><script language="javascript">dia13defilement()</script></center>

* * * * *
IMPORTANT : Le code ne fonctionne pas sur les pages des templates de Blogger de 2010. Il suffit dès lors d'utiliser une page d'un blog créé avec un autre template ou le template simplifié disponible ici.

9 commentaires:

Bella LullabyMoon a dit…

Super ce tuto, mais on le colle ou le code ?

Meiser a dit…

Bonjour.

Comme indiqué ci-dessus : coller les instructions dans la version HTML d'une "page statique" de Blogger et créer un lien vers cette page.


Japijo a dit…

Bonjour,

Où doit-on stocker les images et comment en connaît-on l'adresse exacte ?

Meiser a dit…

Le plus simple est d'ajouter une image à une page ou un message de Blogger.
L'image sera automatiquement sauvegardée sur le site "Picasa".

Il suffit enfin de copier l'adresse de l'image dans la version HTML de la page ou du message.

Sauvegarder ensuite le message comme brouillon ou le supprimer.


Anonyme a dit…

Bonjour,

les images que j'ai inséré ne se voient pas en intégralité.

que faut-il faire ?

Merci

Meiser a dit…

Bonjour.

Si l'image n'a pas les mêmes proportions (rapport entre la hauteur et la largeur) que l'écran, il est possible que le bas de l'image n'apparaisse pas.


Chris a dit…

Bonjour,

Cette méthode avait parfaitement bien fonctionné pour mon premier blog, mais sur mon nouveau il se trouve que les images défilantes se retrouve par dessus le blog, donc en gros plus de blog visible !
Aurais-tu une idée ?

Merci d'avance et un grand merci pour toutes les astuces que tu fournis.

Chris a dit…

Autant pour moi, j'étais sur le mauvais post :)
Désolé.

Meiser a dit…

Bonjour.

Vous utilisez sans doute un des templates de Blogger de 2010. Ces templates sont incompatibles avec les codes utilisés précédemment. Avec ces templates, des gadgets ne fonctionnent plus, dont les barres de menu déroulantes si pratiques. Corriger le gadget ne suffirait pas. Il faut donc choisir le gadget et un template compatible.