Barack Slideshow : le slideshow élégant
Avez-vous déja visité le site de Baraka Obama? Il contient l’un des derniers slideshows a la mode, et il porte même son nom, il est à la fois élégant, simple et très pratique pour des belles images.
Guide d’installation :
Télécharger le package qui contient une démo :
Avant la fin de la balise </head> insérer le code ci-dessous
<link rel=”stylesheet” href=”barackslideshow.css” type=”text/css” media=”screen” title=”Stylesheet” charset=”utf-8″ />
<link rel=”stylesheet” href=”demo.css” type=”text/css” media=”screen” title=”Stylesheet” charset=”utf-8″ />
<script type=”text/javascript” charset=”utf-8″ src=”mootools-1.2-core.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”mootools-1.2-more.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”morphlist.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”barackslideshow.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”demo.js”></script>
<link rel=”stylesheet” href=”demo.css” type=”text/css” media=”screen” title=”Stylesheet” charset=”utf-8″ />
<script type=”text/javascript” charset=”utf-8″ src=”mootools-1.2-core.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”mootools-1.2-more.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”morphlist.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”barackslideshow.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”demo.js”></script>
à l’intérieur de la balise <body> insérer votre liste :
<div id=”slideshow”>
<span id=”loading”>Loading</span>
<ul id=”pictures”>
<li><img src=”images/cities/melbourne.jpg” alt=”Melbourne” title=”Melbourne” /></li>
<li><img src=”images/cities/buenos_aires.jpg” alt=”Buenos Aires” title=”Buenos Aires” /></li>
<li><img src=”images/cities/urubamba.jpg” alt=”Urubamba” title=”Urubamba” /></li>
</ul>
<ul id=”menu”>
<li><a href=”images/cities/melbourne.jpg”>Melbournz</a></li>
<li><a href=”images/cities/buenos_aires.jpg”>Buenos Aires</a></li>
<li><a href=”images/cities/urubamba.jpg”>Urubamba</a></li>
</ul></div>
<span id=”loading”>Loading</span>
<ul id=”pictures”>
<li><img src=”images/cities/melbourne.jpg” alt=”Melbourne” title=”Melbourne” /></li>
<li><img src=”images/cities/buenos_aires.jpg” alt=”Buenos Aires” title=”Buenos Aires” /></li>
<li><img src=”images/cities/urubamba.jpg” alt=”Urubamba” title=”Urubamba” /></li>
</ul>
<ul id=”menu”>
<li><a href=”images/cities/melbourne.jpg”>Melbournz</a></li>
<li><a href=”images/cities/buenos_aires.jpg”>Buenos Aires</a></li>
<li><a href=”images/cities/urubamba.jpg”>Urubamba</a></li>
</ul></div>
Dans le premier <UL id=”pictures”> il faut mettre les images chacune dans <li>
Dans le deuxième <ul id=”menu”> il faut mettre le lien de chaque image, vous pouvez choisir un titre pour chaque image.
Pour modifier l’affichage de votre slideshow vous pouvez modifier les deux fichiers css
DEMO
