Voila un tutoriel bien rapide que je présente la , pas plus de 2 lignes de Javascript suffisent pour ce faire.
Avant cela il vous faudra télécharger et inclure le plugin Jquery de Feature List. (en demo ici).
Ensuite vous placez dans votre balise <head> le code d'exemple suivant :
<script language="javascript">
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);
});
</script>
qui sera appliquer au code HTML suivant :
<div id="feature_list">
<ul id="tabs">
<li> <a href="javascript:;"> <img src="http://www.jarodxxx.com/index.php?post/2009/12/29/services.png" />
<h3>Services</h3>
<span>Lorem ipsum dolor sit amet consect</span> </a> </li>
<li> <a href="javascript:;"> <img src="http://www.jarodxxx.com/index.php?post/2009/12/29/programming.png" />
<h3>Programming</h3>
<span>Lorem ipsum dolor sit amet consect</span> </a> </li>
<li> <a href="javascript:;"> <img src="http://www.jarodxxx.com/index.php?post/2009/12/29/applications.png" />
<h3>Applications</h3>
<span>Lorem ipsum dolor sit amet consect</span> </a> </li>
</ul>
<ul id="output">
<li> <img src="http://www.jarodxxx.com/index.php?post/2009/12/29/sample1.jpg" /> <a href="http://www.jarodxxx.com/index.php?post/2009/12/29/Transformer-vos-listes-HTML-en-slides-avec-jQuery#">See project details</a> </li>
<li> <img src="http://www.jarodxxx.com/index.php?post/2009/12/29/sample2.jpg" /> <a href="http://www.jarodxxx.com/index.php?post/2009/12/29/Transformer-vos-listes-HTML-en-slides-avec-jQuery#">See project details</a> </li>
<li> <img src="http://www.jarodxxx.com/index.php?post/2009/12/29/sample3.jpg" /> <a href="http://www.jarodxxx.com/index.php?post/2009/12/29/Transformer-vos-listes-HTML-en-slides-avec-jQuery#">See project details</a> </li>
</ul>
</div>
On remercie Oziks pour la trouvaille