Horinaja : slide show avec la roulette d'1 souris

Par Laurent | 25.07.09 10:13 | 2 commentaire(s) | programmation

Voici un script int�ressant qui va vous permettre de voir d�filer horizontalement gr�ce � la roulette de votre souris un contenu texte, image,.... � l'�cran.Le slider peut aussi automatiquement d�rouler.

Comment fonctionne Horinaja ?

Et bien ce plugin fonctionne avec les biblioth�ques Scriptaculous et Prototype ou Jquery.
Une fois int�gr� � votre site, vous pourrez naviguer horizontalement avec la roulette de la souris, dans la partie que vous aurez d�finie par un id :

...

(par exemple)
Suivant la biblioth�que utilis�e, il vous faudra r�cup�rer des scripts javascripts, tout cel� est tr�s bien expliqu� dans la rubrique Utilisation du site.

Voici un exemple d'int�gration avec Jquery :

<html>
<head>
<script src='jquery-1.3.2.min.js ' type="text/javascript"></script>
<script src='jquery.mousewheel.js' type="text/javascript"></script>
<script src='class.horinaja.jquery.js' type='text/javascript'></script>
<link rel="stylesheet" href="horinaja.css" type="text/css" media="screen" /> 
<script>  $(document).ready(function(){
$('#demo').Horinaja({
capture:'demo',delai:0.3,
duree:2,pagination:true});
});
</script>
</head>
<body>
<div style="width:210px;border:1px solid #000000;overflow: hidden;" id="demo" class="horinaja">
	<ul>
	<li style="width: 200px; height: 100px; float: left;">Contenu de la page 1</li>
	<li style="width: 200px; height: 100px; float: left;">Contenu de la page 2</li>
	<li style="width: 200px; height: 100px; float: left;">Contenu de la page 3</li>
	<li style="width: 200px; height: 100px; float: left;">Contenu de la page 4</li>
	<li style="width: 200px; height: 100px; float: left;">Contenu de la page 5</li>
	<li style="width: 200px; height: 100px; float: left;">Contenu de la page 6</li>
	<li style="width: 200px; height: 100px; float: left;">Contenu de la page 7</li>
	<li style="width: 200px; height: 100px; float: left;">Contenu de la page 8</li>
</ul></div>
</body>
</html>

Dans la partie ..... on appelle les scripts javascript et le style css, puis on active pour le div d'id=demo la fonction slideshow : avec un delai, une dur�e, et la pagination a true.

Ici pour cette d�mo:
1) j'ai t�l�charg� le plugin jquery.mousewheel.js (derni�re version)
2) et la derni�re version de Jquery de nom (jquery-1.3.2.min.js)
3) puis il faut t�l�charger sur le site le plugin Horinaja, pour cel� il suffit d'aller sur la page t�l�chargement et choisir Jquery (dans ce cas de la d�mo).
Si vous choisissez l'autre cas Scriptaculous, vous devrez changer le code de la page (l'appel au scripts...)

Ce plugin tr�s agr�able et facile � utiliser, permet de naviguer autrement sur une page web.

Horinaja : slide show avec la roulette d'1 souris

Commentaires

Thèmes

Tags récents

Populaires