Slider javascript + CSS 3

Slider javascript + CSS 3
J'avais dit il y a un petit moment sur le forum officiel que je ferai un slider en javascript. Voilà qui est chose faite.

Ce "Papaslider" a été conçu pour pouvoir en modifier le contenu assez simplement. Les données étant stockées dans des fichiers XML.

De par l'utilisation du CSS3, ce script ne fonctionnera pas avec tous les navigateurs. Je l'ai donc réalisé pour qu'il fonctionne avec Chrome et Firefox.

Les fichiers

Ce slider est réalisé sur la base de 4 fichiers qui seront appelés par le simple ajout d'une iframe dans votre page ou article.

Le premier, diapos.xml est le fichier qui contient les liens vers les images du diaporama avec éventuellement un texte associé et le lien de la page où il faut se rendre si l'on clique sur l'image. Vous pouvez placer autant d'images que vous le souhaitez en respectant la structure du fichier. Voir le contenu ci-dessous:

<?xml version="1.0" encoding="ISO-8859-1"?> <LISTE> <DIAPO> <IMG>http://data0.ek.la/le-blog-facile/perso/barackslide/images/cities/venice.jpg</IMG> <TEXTE>Venise</TEXTE> <LIEN>http://google.com</LIEN> </DIAPO> <DIAPO> <IMG>http://data0.ek.la/le-blog-facile/perso/barackslide/images/cities/urubamba.jpg</IMG> <TEXTE>Urubamba</TEXTE> <LIEN>http://google.com</LIEN> </DIAPO> <DIAPO> <IMG>http://data0.ek.la/le-blog-facile/perso/barackslide/images/cities/paris.jpg</IMG> <TEXTE>Paris</TEXTE> <LIEN>http://google.com</LIEN> </DIAPO> <DIAPO> <IMG>http://data0.ek.la/le-blog-facile/perso/barackslide/images/cities/osaka.jpg</IMG> <TEXTE>Osaka</TEXTE> <LIEN>http://google.com</LIEN> </DIAPO> <DIAPO> <IMG>http://data0.ek.la/le-blog-facile/perso/barackslide/images/cities/melbourne.jpg</IMG> <TEXTE>Melbourne</TEXTE> <LIEN>http://google.com</LIEN> </DIAPO> <DIAPO> <IMG>http://data0.ek.la/le-blog-facile/perso/barackslide/images/cities/london.jpg</IMG> <TEXTE>Londres</TEXTE> <LIEN>http://google.com</LIEN> </DIAPO> <DIAPO> <IMG>http://data0.ek.la/le-blog-facile/perso/barackslide/images/cities/buenos_aires.jpg</IMG> <TEXTE>Buenos Aires</TEXTE> <LIEN>http://google.com</LIEN> </DIAPO> </LISTE>

Le second: params.xml contient le parametrage du slider. Un aide mémoire (partie en vert dans le code ci-dessous) est ajouté pour que vous puissiez vous souvenir des paramètres.

<?xml version="1.0" encoding="ISO-8859-1"?> <LISTE> <PARAMS> <LARGEUR>437</LARGEUR>  <HAUTEUR>277</HAUTEUR>  <DELAITRANS>4000</DELAITRANS>  <DUREETRANS>2</DUREETRANS>  <BANDEAUHT>40</BANDEAUHT>  <TXTHT>35</TXTHT>  <BANDEAUPOS>top</BANDEAUPOS>  <TRANSSTYLE>splashSquare</TRANSSTYLE>  <BANDEAUON>true</BANDEAUON>  <WINDOWTARGET>_blank</WINDOWTARGET>  </PARAMS> </LISTE>

Pour un fonctionnement optimal, veillez à avoir une durée de transition inférieure au délai de transition.

Le fichier bandeau.css contient le code css du bandeau et du texte. Vous pouvez le modifier comme bon vous semble.

#zone_texte { background-color:black; opacity:0.8; -moz-opacity: 0.80; } #letexte { background-color:transparent; color:white;opacity:1; -moz-opacity:1; }

Le dernier fichier, papaslide.html, et pas le moindre, est celui qui contient le script et qui fait cohabiter tout ce petit monde.

 <html> <head> <link rel="stylesheet" href="http://ekladata.com/ySJcie9ekqtGaXjoXMWIEnYtVKo/bandeau.css" type="text/css" media="screen"/> </head> <body style="padding:0;margin:0;"> <div id="zone_contenu" style="overflow: hidden; bottom: auto;"><a id="href1"> <img id="pic1" style="vertical-align: top; position: relative; overflow: hidden; bottom: auto;" alt=""/> </a> <a id="href2"> <img id="pic2" style="vertical-align: top; position: relative; overflow: hidden; bottom: auto;" alt=""/> </a> <div id="zone_texte" style="vertical-align: top;position: fixed; top: 0px; bottom: auto;"> <div id="letexte" style="text-align: center;">Test</div> </div> </div> <script type="text/javascript"> var tab= new Array(); var libelle= new Array(); var loc = new Array(); if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","http://ekladata.com/G6VW7MuLTissSKHWn4XRgYfKy84/diapos.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; var x=xmlDoc.getElementsByTagName("DIAPO"); for (i=0;i<x.length;i++) { tab[i]=x[i].getElementsByTagName("IMG")[0].childNodes[0].nodeValue; libelle[i]=x[i].getElementsByTagName("TEXTE")[0].childNodes[0].nodeValue; loc[i]=x[i].getElementsByTagName("LIEN")[0].childNodes[0].nodeValue; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","http://ekladata.com/6mj6ACAsx4ugE5pgkKFcycfIR30/params.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; var y=xmlDoc.getElementsByTagName("PARAMS"); var largeur=y[0].getElementsByTagName("LARGEUR")[0].childNodes[0].nodeValue; var hauteur=y[0].getElementsByTagName("HAUTEUR")[0].childNodes[0].nodeValue; var delai_trans=y[0].getElementsByTagName("DELAITRANS")[0].childNodes[0].nodeValue; var duree_trans=y[0].getElementsByTagName("DUREETRANS")[0].childNodes[0].nodeValue; var hauteurbandeautxt=y[0].getElementsByTagName("BANDEAUHT")[0].childNodes[0].nodeValue; var hauteurtxt=y[0].getElementsByTagName("TXTHT")[0].childNodes[0].nodeValue; var positionbandeautxt=y[0].getElementsByTagName("BANDEAUPOS")[0].childNodes[0].nodeValue; var trans=y[0].getElementsByTagName("TRANSSTYLE")[0].childNodes[0].nodeValue; var bandeautexte=y[0].getElementsByTagName("BANDEAUON")[0].childNodes[0].nodeValue; var targetlien=y[0].getElementsByTagName("WINDOWTARGET")[0].childNodes[0].nodeValue; var txtbox=document.getElementById('zone_texte'); var conteneur=document.getElementById('zone_contenu'); var txtvalue=document.getElementById('letexte'); var num=0; document.getElementById('pic1').src=tab[0]; document.getElementById('pic2').src=tab[1]; var ima1=document.getElementById('pic1'); var ima2=document.getElementById('pic2'); var lien1=document.getElementById('href1'); var lien2=document.getElementById('href2'); ima1.style.width=largeur+'px'; ima2.style.width=largeur+'px'; ima1.style.height=hauteur+'px'; ima2.style.height=hauteur+'px'; conteneur.style.height=hauteur+'px'; conteneur.style.width=largeur+'px'; txtbox.style.height=hauteurbandeautxt+'px'; txtbox.style.width=largeur+'px'; txtvalue.style.height=hauteurbandeautxt+'px'; txtvalue.style.width=largeur+'px'; lien1.href=loc[0]; lien2.href=loc[1]; lien1.target=targetlien; lien2.target=targetlien; txtvalue.style.fontSize=hauteurtxt+'px'; var int=self.setInterval("lancer_slide()",delai_trans); if (trans=="blur"){ ima1.style.left=0+'px'; ima1.style.top=0+'px'; ima2.style.left=0+'px'; ima2.style.top=-hauteur+'px'; ima2.style.opacity= 0; } if (trans=="slidetop"){ ima1.style.top=0+'px';ima2.style.top=-2*hauteur+'px'; } if (trans=="slidebottom"){ ima1.style.top=0+'px';ima2.style.top=0+'px'; } if (trans=="slideright"){ ima1.style.left=0+'px'; ima1.style.top=0+'px'; ima2.style.left=largeur+'px'; ima2.style.top=-hauteur+'px'; } if (trans=="slideleft"){ ima1.style.left=0+'px'; ima1.style.top=0+'px'; ima2.style.left=-largeur+'px'; ima2.style.top=-hauteur+'px'; } if (trans=="topleft"){ ima1.style.left=0+'px'; ima1.style.top=0+'px'; ima2.style.left=0+'px'; ima2.style.top=-hauteur+'px'; ima2.style.width=0+'px'; ima2.style.height=0+'px'; } if (trans=="topright"){ ima1.style.left=0+'px'; ima1.style.top=0+'px'; ima2.style.left=largeur+'px'; ima2.style.top=-hauteur+'px'; ima2.style.width=0+'px'; ima2.style.height=0+'px'; } if (trans=="bottomleft"){ ima1.style.left=0+'px'; ima1.style.top=0+'px'; ima2.style.left=0+'px'; ima2.style.top=0+'px'; ima2.style.width=0+'px'; ima2.style.height=0+'px'; } if (trans=="bottomright"){ ima1.style.left=0+'px'; ima1.style.top=0+'px'; ima2.style.left=largeur+'px'; ima2.style.top=0+'px'; ima2.style.width=0+'px'; ima2.style.height=0+'px'; } if (trans=="splashSquare"){ ima1.style.left=0+'px'; ima1.style.top=0+'px'; ima2.style.left=largeur/2+'px'; ima2.style.top=-hauteur/2+'px'; ima2.style.width=0+'px'; ima2.style.height=0+'px'; } if (trans=="rounded"){ ima1.style.left=0+'px'; ima1.style.top=0+'px'; ima2.style.left=largeur/2+'px'; ima2.style.top=-hauteur/2+'px'; ima2.style.width=0+'px'; ima2.style.height=0+'px'; ima2.style.borderRadius = 50+'%'; } if (bandeautexte=="true") { if (positionbandeautxt=='bottom' ){var a=hauteur-hauteurbandeautxt;} if (positionbandeautxt=='top') {var a=0} if (positionbandeautxt=='middle') {var a=hauteur/2-hauteurbandeautxt/2;} txtbox.style.top=a+'px';} txtvalue.innerHTML=libelle[0]; function lancer_slide() { if (bandeautexte=="true") affiche_texte(); if (trans=="blur"){ fixtrans(); ima2.style.opacity=1; var t=setTimeout("change_blur()",duree_trans+100);} if (trans=="slidebottom"){ fixtrans(); ima1.style.top=-hauteur+'px'; ima2.style.top=-hauteur+'px'; var t=setTimeout("move_slidebottom()",duree_trans+100);} if (trans=="slidetop"){ fixtrans(); ima1.style.top=hauteur+'px'; ima2.style.top=-hauteur+'px'; var t=setTimeout("move_slidetop()",duree_trans+100);} if (trans=="slideright"){ fixtrans(); ima1.style.left=-largeur+'px'; ima2.style.left=0+'px'; var t=setTimeout("move_slideright()",duree_trans+100);} if (trans=="slideleft"){ fixtrans(); ima1.style.left=largeur+'px'; ima2.style.left=0+'px'; var t=setTimeout("move_slideleft()",duree_trans+100);} if (trans=="topleft"){ fixtrans(); ima2.style.width=largeur+'px'; ima2.style.height=hauteur+'px'; var t=setTimeout("move_topleft()",duree_trans+100);} if (trans=="topright"){ fixtrans(); ima2.style.width=largeur+'px'; ima2.style.height=hauteur+'px'; ima2.style.left=0+'px'; var t=setTimeout("move_topright()",duree_trans+100);} if (trans=="bottomleft"){ fixtrans(); ima2.style.width=largeur+'px'; ima2.style.height=hauteur+'px'; ima2.style.top=-hauteur+'px'; var t=setTimeout("move_bottomleft()",duree_trans+100);} if (trans=="bottomright"){ fixtrans(); ima2.style.width=largeur+'px'; ima2.style.height=hauteur+'px'; ima2.style.top=-hauteur+'px'; ima2.style.left=0+'px'; var t=setTimeout("move_bottomright()",duree_trans+100);} if (trans=="splashSquare"){ fixtrans(); ima2.style.width=largeur+'px'; ima2.style.height=hauteur+'px'; ima2.style.top=-hauteur+'px'; ima2.style.left=0+'px'; var t=setTimeout("move_splashSquare()",duree_trans+100);} if (trans=="rounded"){ fixtrans(); ima2.style.transitionDuration = duree_trans+'s'; ima2.style.width=largeur+'px'; ima2.style.height=hauteur+'px'; ima2.style.top=-hauteur+'px'; ima2.style.left=0+'px'; ima2.style.MozBorderRadius = 0+'%'; ima2.style.WebkitBorderRadius = 0+'%'; ima2.style.borderRadius = 0+'%'; var t=setTimeout("move_rounded()",duree_trans+100);} } function affiche_texte() { txtvalue.innerHTML=libelle[num+1]; if (num==6) txtvalue.innerHTML=libelle[0]; } function change_blur() { stoptrans(); ima1.src=ima2.src; lien1.href=lien2.href; ima2.style.opacity=0; nextnum(); } function move_slidebottom() { stoptrans(); ima1.src=ima2.src; lien1.href=lien2.href; ima1.style.top=0+'px'; ima2.style.top=0+'px'; nextnum(); } function move_slidetop() { stoptrans(); ima1.src=ima2.src; lien1.href=lien2.href; ima1.style.top=0+'px'; ima2.style.top=-2*hauteur+'px'; nextnum(); } function move_slideright() { stoptrans(); ima1.src=ima2.src; lien1.href=lien2.href; ima1.style.left=0+'px'; ima2.style.left=largeur+'px'; nextnum(); } function move_slideleft() { stoptrans(); ima1.src=ima2.src; lien1.href=lien2.href; ima1.style.left=0+'px'; ima2.style.left=-largeur+'px'; nextnum(); } function move_topleft() { stoptrans(); ima1.src=ima2.src; lien1.href=lien2.href; ima2.style.width=0+'px'; ima2.style.height=0+'px'; nextnum(); } function move_topright() { stoptrans(); ima1.src=ima2.src; lien1.href=lien2.href; ima2.style.width=0+'px';ima2.style.height=0+'px';ima2.style.left=largeur+'px'; nextnum(); } function move_bottomleft() { stoptrans(); ima1.src=ima2.src; lien1.href=lien2.href; ima2.style.width=0+'px'; ima2.style.height=0+'px'; ima2.style.top=0+'px'; nextnum(); } function move_bottomright() { stoptrans(); ima1.src=ima2.src;lien1.href=lien2.href; ima2.style.width=0+'px'; ima2.style.height=0+'px'; ima2.style.top=0+'px'; ima2.style.left=largeur+'px'; nextnum(); } function move_splashSquare() { stoptrans(); ima1.src=ima2.src; lien1.href=lien2.href; ima2.style.width=0+'px'; ima2.style.height=0+'px'; ima2.style.top=-hauteur/2+'px'; ima2.style.left=largeur/2+'px'; nextnum(); } function move_rounded() { stoptrans(); ima2.style.MozBorderRadius = '100%'; ima2.style.WebkitBorderRadius = '100%'; ima2.style.borderRadius = '100%'; ima1.src=ima2.src; lien1.href=lien2.href;txtbox.style.top=a+'px'; ima2.style.width=0+'px'; ima2.style.height=0+'px'; ima2.style.top=-hauteur/2+'px'; ima2.style.left=largeur/2+'px'; nextnum(); } function fixtrans() {ima1.style.MozTransition = 'width '+duree_trans+'s, height '+duree_trans+'s, top '+duree_trans+'s, left '+duree_trans+'s, border-radius '+duree_trans+'s, opacity '+duree_trans+'s'; ima1.style.webkitTransitionProperty = 'width, height, top, left, border-radius, opacity'; ima1.style.webkitTransitionDuration = duree_trans+'s'; ima1.style.transitionDuration = duree_trans+'s'; ima2.style.MozTransition = 'width '+duree_trans+'s, height '+duree_trans+'s, top '+duree_trans+'s, left '+duree_trans+'s, border-radius '+duree_trans+'s, opacity '+duree_trans+'s'; ima2.style.webkitTransitionProperty = 'width, height, top, left, border-radius, opacity'; ima2.style.webkitTransitionDuration = duree_trans+'s'; ima2.style.transitionDuration = duree_trans+'s'; } function stoptrans() { ima1.style.MozTransition = 'width 0s, height 0s, top 0s, left 0s, border-radius 0s, opacity 0s'; ima1.style.webkitTransitionProperty = 'width, height, top, left, border-radius, opacity'; ima1.style.webkitTransitionDuration = '0s'; ima1.style.transitionDuration = '0s'; ima2.style.MozTransition = 'width 0s, height 0s, top 0s, left 0s, border-radius 0s, opacity 0s'; ima2.style.webkitTransitionProperty = 'width, height, top, left, border-radius, opacity'; ima2.style.webkitTransitionDuration = '0s'; ima2.style.transitionDuration = '0s'; } function nextnum() { num=num+1; if (num==7){num=0;} if (num==6) {ima2.src=tab[0];lien2.href=loc[0];} else {ima2.src=tab[num+1];lien2.href=loc[num+1];} } // ]] ></script> </body> </html>

Installation

Pour placer ce slider dans votre article ou votre page, il vous suffit de suivre la procédure suivante:
1. Télécharger le fichier papaslide.zip (faites un clic droit puis enregistrer sous)
2. Extrayez le contenu de papaslide.zip sur votre ordinateur
3. Créez un répertoire papaslide dans les fichiers de votre blog (Contenu/ Gérer les Fichiers - Bouton Nouveau dossier)
4. Copiez les 4 fichiers extraits dans le répertoire papaslide
5. Modifiez le contenu de params.xml (vous pouvez les modifier sur votre pc avant de les copier sur le blog)
6. Modifiez le contenu de diapos.xml
7. Remplacez les url du fichier papaslide.html (lignes 7, 29 et 48 voir détail du fichier ci-avant) par celles où se trouvent vos fichiers
8. Placez dans votre article le code suivant:
<iframe style="overflow: hidden; padding: 0%; margin: 0px; border: 0px;" src="http://ekladata.com/55EZto0X8u82NNdnGdApgihobWE/papaslide.html" width="437px" height="277px"></iframe>

Attention à bien modifier dans ce code l'url du fichier papaslide.html, la valeur de la propriété width (largeur de la diapo qui doit être la même que celle que vous avez placée dans params.xml) et de la propriété height (même principe)

Lorsque vous ferez des modifications dans les fichiers, il sera nécessaire de vider le cache de votre navigateur pour en voir les effets.

Les options

Les transitions

slideright slideleft slidetop slidebottom bottomright bottomleft topright topleft splashSquare rounded blur

Vous pouvez aussi changer l'apparence du slider en jouant sur les propriétés de l'iframe.

Vous pouvez éditer le code de l'iframe en cliquant sur le bouton + du JSFIDDLE ci-contre.

Vous pouvez voir le code d'iframe correspondant au slider ci-contre en cliquant sur le bouton HTML


slideright	slideleft	slidetop	slidebottom	bottomright	bottomleft	topright	topleft	splashSquare	rounded	blur

Edito

Slider javascript + CSS 3

Les fichiers

Installation

Les options

Les transitions