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
