jQuery.popeye(), une nouvelle alternative de lightbox pour afficher vos images

Publié le 04 décembre 2008 par Dator

jQuery.popeye() est un plugin jQuery qui permet d’afficher vos images d’une façon quasiment identique à tous les plugins lightbox mais cette fois on peu naviguer dans un carrousel d’image et agrandir l’image voulue.

L’installation de ce plugin est très simple, voici le code HTML :

view plaincopy to clipboardprint?

  1. <divstyle="clear: both;">  
  2. <divid="popeye_images"class="popeye">  
  3. <ul>  
  4. <li><ahref="...?PHPSESSID=b5160019c258f46df528860c10e538be"><imgsrc="..."alt="..."></a></li>  
  5. <li><ahref="...?PHPSESSID=b5160019c258f46df528860c10e538be"><imgsrc="..."alt="..."></a></li>  
  6.   
  7.   <!-- La liste de vos images -->  
  8.   </ul>  
  9. </div>  
  10. </div>

Et le Javascript :

view plaincopy to clipboardprint?

  1. // jQuery  
  2. $(document).ready(function() {  
  3.   $('.popeye').popeye(); // on active le plugin en prenant la classe mis dans le html  
  4. });  
// jQuery
$(document).ready(function() {
   $('.popeye').popeye(); // on active le plugin en prenant la classe mis dans le html
});

En utilisant la classe CSS popeye on active le plugin et on peut désormais naviguer dans nos photos de façon très simplifié et joli !