Auteur : Papasti (principe) | Langage : JavaScript
Posté le 28 janvier
Télécharger | Éditer | Reposter

Diaparama en fond du header

Le code diaporama de Papasti http://le-blog-facile.ek.la/image-de-fond-en-diaporama-p750568 modifié pour placer le diaporama dans le header (le mot 'header' remplaçant le mot 'background') en 4 endroits. Ici il y a 4 images dont l'url figure aux lignes 25 à 28 (dont une de l'auteur) (le nombre d'images n'est pas imposé, mais attention à ne pas multiplier les chargements) Préférer des images pas trop lourdes en Ko et avec la même proportion largeur/hauteur que le header) Le temps d'affichage d'une image est ici de 5 secondes (modifiable ligne 76) Le code à copier va de la ligne 11 à la 90 et il est à coller dans la source < > d'un module simple après le <p>&nbsp;</p> existant à la première ligne. ---------------------------------------------------------------------------------- <style><!-- #menu1_float, #menu2_float,#content,#header,#footer{opacity:0.999;} #mydiv{z-index:0;} #mydiv img{ -webkit-transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -ms-transition: opacity 2s ease-in-out; -o-transition: opacity 2s ease-in-out; transition: opacity 2s ease-in-out; } --></style> <div class="bgslide"> <img src="http://ekladata.com/ufWC-HOYiiENBKD5j9S6qGOwURo/Papastifj7rl32i.jpg" alt="" /> <img src="http://ekladata.com/5uElS5Q5xjGyycEjHxT6b7MB8F0/Papastih3e4w1nd.jpg" alt="" /> <img src="http://ekladata.com/oSEXUNCRheUwHLhg2625fOIQTDs/Papastiuav6ci5k.jpg alt=" alt="" /> <img src="http://ekladata.com/HgIA0Qfn34iSrWamlRRnLP3I3ls/wallp6.jpg" alt="" /> </div> <script>// <![CDATA[ onJSFilesLoaded.push ( function(){ $$('.bgslide').setStyle('display','none'); var ndim=$$('.bgslide img'); var nsrc = new Array(); var nht = new Array(); for (i=0;i<ndim.length;i++){ nsrc[i]=ndim[i].getProperty('src'); nht[i]=ndim[i].getSize().y; } var hauteur=$('header').getSize().y; var contenudiv=$$('.bgslide')[0]; $('header').setProperty('position','relative'); var mydiv = new Element('div', { 'html': contenudiv.innerHTML, 'id':'mydiv', 'styles': { 'position': 'absolute', 'left':'0px', 'top':'0px', 'width': '100%', 'height':hauteur, 'overflow':'hidden' } } ); mydiv.inject($('header'),'top'); var pos=-1; var images=$$('#mydiv img'); $$('#mydiv img').setStyle('opacity','0'); $$('#mydiv img').setStyles({ position:'absolute',top:0,left:0,height:hauteur,width:'100%'}); $$('#mydiv img')[0].setStyle('opacity','1'); // On fixe la durée entre chaque image. Ici 5000 donc 5 secondes var myVar = setInterval(function(){myTimer(nsrc)},5000); function myTimer(valeur) { pos++; images[pos].setStyle('opacity',0); if( pos==valeur.length-1) { pos=-1;} images[pos+1].setStyle('opacity',1); } setTimeout(function(){$$('#mydiv img').setStyle('height',$('header').getSize().y+'px');$$('#mydiv').setStyle('height',$('header').getSize().y+'px');},400); }); // ]]></script> ============== pour http://doc.eklablog.com/mettre-une-video-ou-diaporama-dans-l-en-tete-banniere-du-site-topic198460
x
Éditer le texte

Merci d'entrer le mot de passe que vous avez indiqué à la création du texte.

x
Télécharger le texte

Merci de choisir le format du fichier à télécharger.