Transformer vos listes HTML en slides avec jQuery Par JarodxXx
le mardi 29 décembre 2009, 23:19
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="services.png" />
<h3>Services</h3>
<span>Lorem ipsum dolor sit amet consect</span> </a> </li>
<li> <a href="javascript:;"> <img src="programming.png" />
<h3>Programming</h3>
<span>Lorem ipsum dolor sit amet consect</span> </a> </li>
<li> <a href="javascript:;"> <img src="applications.png" />
<h3>Applications</h3>
<span>Lorem ipsum dolor sit amet consect</span> </a> </li>
</ul>
<ul id="output">
<li> <img src="sample1.jpg" /> <a href="#">See project details</a> </li>
<li> <img src="sample2.jpg" /> <a href="#">See project details</a> </li>
<li> <img src="sample3.jpg" /> <a href="#">See project details</a> </li>
</ul>
</div>
On remercie Oziks pour la trouvaille 












Ziki
Dailymotion
Flickr
Technorati
Twitter
1. Le mardi 29 décembre 2009, 23:55 par Greg
Pourquoi faut il mettre le JS dans le HEAD, et non a la fin du BODY ? c'est toujours le même problème qui revient. Il FAUT le mettre à la fin du BODY, pour le pas gâcher les performances ! En effet le JS bloque la navigation lors de son exécution et de son chargement ....
Sinon c'est sympa comme plugins
2. Le mercredi 30 décembre 2009, 00:30 par oziks
Merci pour le backlink !
Ce plugin est vraiment très intéressant..
3. Le mercredi 30 décembre 2009, 14:23 par jarodxxx
@Grag > tout dépend de tes priorité, si ton module se place sur une partie haute et directement visible alors tu préfèrera charger en priorité le JS pour ne pas avoir de latence lors de son exécution
4. Le samedi 2 janvier 2010, 17:39 par Olivier
Superbe effet! Qu'est ce qu'on ferait sans jQuery?
5. Le lundi 11 janvier 2010, 13:32 par xypho
Très joli!! Ça a l'air vraiment simple à mettre en place! Je vais le tester de ce pas!
Merci pour la trouvaille!
6. Le mardi 2 mars 2010, 11:32 par Actu F1
Super! Merci du tips