Auteur : Papasti (principe) | Langage : JavaScript
Posté le 28 janvier 2020
Télécharger | Éditer | Reposter
Posté le 28 janvier 2020
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> </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