Inspired by the slideshow in Barack Obama website. Implemented by extending MorphList
Vous avez besoin de télécharger les fichiers ci-dessous pour faire correctement fonctionner ce slideshow :
Regroupez-les dans le répertoire de votre choix (pour l'exemple nous les plaçons dans un répertoire nommé menuslide).
Puis appelez-les dans la page web (entre <head> et </head>) comme ceci :
<link rel="stylesheet" type="text/css" media="screen" title="Stylesheet" charset="utf-8" href="http://www.yourdomain.com/menuslide/barackslideshow.css" /> <script type="text/javascript" charset="utf-8" src="http://www.yourdomain.com/menuslide/mootools-1.2.1-core-yc.js"></script> <script type="text/javascript" charset="utf-8" src="http://www.yourdomain.com/menuslide/mootools-1.2.2.2-more.js"></script> <script type="text/javascript" charset="utf-8" src="http://www.yourdomain.com/menuslide/Fx.MorphList.js"></script> <script type="text/javascript" charset="utf-8" src="http://www.yourdomain.com/menuslide/BarackSlideshow.js"></script> <script type="text/javascript" charset="utf-8" src="http://www.yourdomain.com/menuslide/demo.js"></script>
Puis dans la page où doit apparaître le menu slideshow (Remplacez les images par les vôtres ainsi que les liens du menu) :
<div id="slideshow"> <span id="loading">Loading</span> <ul id="pictures"> <li><img src="http://devthought.com/wp-content/projects/mootools/barackslideshow/Source/images/cities/melbourne.jpg" alt="Melbourne" title="Melbourne" /></li> <li><img src="http://devthought.com/wp-content/projects/mootools/barackslideshow/Source/images/cities/buenos_aires.jpg" alt="Buenos Aires" title="Buenos Aires" /></li> <li><img src="http://devthought.com/wp-content/projects/mootools/barackslideshow/Source/images/cities/urubamba.jpg" alt="Urubamba" title="Urubamba" /></li> <li><img src="http://devthought.com/wp-content/projects/mootools/barackslideshow/Source/images/cities/london.jpg" alt="London" title="London" /></li> <li><img src="http://devthought.com/wp-content/projects/mootools/barackslideshow/Source/images/cities/venice.jpg" alt="Venice" title="Venice" /></li> <li><img src="http://devthought.com/wp-content/projects/mootools/barackslideshow/Source/images/cities/paris.jpg" alt="Paris" title="Paris" /></li> <li><img src="http://devthought.com/wp-content/projects/mootools/barackslideshow/Source/images/cities/osaka.jpg" alt="Osaka" title="Osaka" /></li> </ul> <ul id="menu"> <li><a href="http://www.yourdomain.com/page1.html">Link 1</a></li> <li><a href="http://www.yourdomain.com/page2.html">Link 2</a></li> <li><a href="http://www.yourdomain.com/page3.html">Link 3</a></li> <li><a href="http://www.yourdomain.com/page4.html">Link 4</a></li> <li><a href="http://www.yourdomain.com/page5.html">Link 5</a></li> <li><a href="http://www.yourdomain.com/page6.html">Link 6</a></li> <li><a href="http://www.yourdomain.com/page7.html">Link 7</a></li> </ul> </div>
Il est nécessaire de faire un copier/coller de ce code dans la page web qui utilise le slideshow (la propriété CSS visibility > hidden la rendant non visible à l'utilisateur) :
<div id="slideshow-options"> <!-- Décommentez la ligne de votre choix pour obtenir l'effet de transition souhaité--> <!--input type="hidden" name="transition" value="alternate" id="transition-alternate" /> <label for="transition-alternate">slide-fade progression</label--> <!--input type="hidden" name="transition" value="random" id="transition-random" /> <label for="transition-random">random</label--> <!--input type="hidden" name="transition" value="slide-left" id="transition-slide-left" /> <label for="transition-slide-left">slide left</label--> <!--input type="hidden" name="transition" value="slide-right" id="transition-slide-right" /> <label for="transition-slide-right">slide right</label--> <!--input type="hidden" name="transition" value="slide-bottom" id="transition-slide-bottom" /> <label for="transition-slide-bottom">slide bottom</label--> <!--input type="hidden" name="transition" value="slide-top" id="transition-slide-top" /> <label for="transition-slide-top">slide top</label--> <!--input type="hidden" name="transition" value="fade" id="transition-fade" /> <label for="transition-fade">fade</label--> <label for="option-auto">Auto</label> <input type="checkbox" name="auto" checked="checked" id="option-auto" /> </div>
Bonne utilisation...