Le plugin JQuery HoverScroll permet de faire une galerie photo animée au survol. Les photos défilent simplement dans le conteneur au survol du bloc. Selon la position du curseur le défilement part dans un sens ou un autre. Il est possible de faire une galerie verticale ou horizontale.
Le flèches apparaissent de manière semi-opaque sur les photos. Le rendu du plugin est très net et fait assez pro (comme souvent ça me fait penser à du Flash 
).
Le fonctionnement est très simple, il suffit de créer une liste non ordonnée (<ul> et <li>) contenant les images que l’on veut (il est apparemment nécessaire de préciser la largeur et la hauteur pour chaque élément de liste) :
1 2 3 4 5 6 | <ul id="galerie-photo"> <li style="width:67px; height:50px;"><img src="image1.jpg" /></li> <li style="width:67px; height:50px;"><img src="image2.jpg" /></li> <li style="width:67px; height:50px;"><img src="image3.jpg" /></li> <li style="width:67px; height:50px;"><img src="image4.jpg" /></li> </ul> |
Et après avoir importé JQuery et le plugin de manière habituel dans la page HTML, il n’y a plus qu’à initialiser le plugin JQuery comme ceci (en mettant le bon sélecteur pour l’ <ul>) :
1 2 3 | $(document).ready(function() { $('ul#galerie-photo').hoverscroll(); }); |
Pas encore de billet sur le même sujet !
