• BarackSlideshow Demo •

Inspired by the slideshow in Barack Obama website. Implemented by extending MorphList

Loading

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...

Options

Transition