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>

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

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *