Plugin JQuery : galerie photo avec HoverScroll

jquery-hoverscroll

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();
});
Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire

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