/images/feed-icon.gif){kind=icon}
Faire un slideshow JS en béton!
Si un slideshow est en général trés simple à réaliser sans la moindre librairie grâce à JavaScript, avoir recours à une librairie tiers n’est pas un luxe pour gagner en temps et en efficacité. Cependant il est courant que cette librairie parasite les autres scripts Javascript que votre page charge et c’est pour cela que le choix d’une seule et unique librairie est indispensable pour votre site web afin d’éviter d’avoir recours à des iframes.
Par exemple si vous souhaitez faire un slideshow sur votre blog propulsé par Wordpress, je vous conseil d’utiliser l’excellente librairie Jquery qui est par défaut livrer avec ce célèbre moteur de blog. Je prépare d’ailleurs un plugin pour ce dernier qui vous permettra en quelques clics de construire un slideshow de qualité avec tout les effets que l’on peut espérer de ce dernier.
Pour aujourd’hui, nous utiliserons la librairie Mootools pour réaliser un slideshow qui répondra aux caractéristiques suivantes:
Pour commencer on aura besoin de la librairie Mootools en version 1.2. C’est ici que vous allez comprendre si ce n’est pas déjà fais la puissance de cette librairie tout comme ses concurrentes, il vous suffit de l’inclure dans le header de votre page avec un plugin développé par Aeron Glemann et désormais Open Source sous license MIT.
Votre page devra ressembler à ca:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mon slideshow!</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/)" />
<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
// Chargez ici vos images
var data = [
// "1.jpg", "2.jpg", "3.jpg"
];
// On initialise le slideshow
var myShow = new Slideshow(’show’, data, { height: 300, hu: ‘images/’, width: 400 });
});
//]]>
</script>
</head>
<body>
<div id=”show” class=”slideshow”>
<!– Rentre ici ton image par defaut –>
<img src=”" alt=”" />
</div>
</body>
</html>
Pour plus d’infos, vous pouvez vous rendre sur la page du projet hébergé par Google ou directement télècharger une archive de démo ici.
Si vous avez apprécié cet article, s'il vous plait, prenez le temps de laisser un commentaire ou de souscrire au flux afin de recevoir les futurs articles directement dans votre lecteur de flux.
Commentaires
Pas encore de commentaire.
Laisser un commentaire