jQuery Popeye 2.0 - Un plugin original mixant slideshow et lightbox

jQuery Popeye est une librairie permettant de créer une lightbox inline qui pourrait s'apparenter à un slideshow avec zoom.

Ce script n'est pas nouveau, mais la version 2.0, plus efficace et complète, vient de voir le jour.

Le concept est intéressant, il combine habillement un slideshow pour faire défiler les images accompagnées de leur légende, et d'une fonction zoom façon lightbox pour voir l'image dans une meilleure résolution.

Le script utilise des propriétés CSS3 pour donner un rendu plus design, bords arrondis notamment.

Tout est personnalisable, comme la zone de navigation qui peut se trouver à l'extérieur de l'image, au centre des images ...

La documentation complète vous permettra de mettre en place rapidement ce slideshow sur vos applications web.

Voici un exemple de structure HTML à mettre en place pour créer le slideshow:

<ul class="ppy-imglist">
    <li>
        <a href="URL_OF_BIG_IMAGE"><img src="URL_OF_THUMBNAIL" alt="" /></a>
        <span class="ppy-extcaption">
            HTML_CAPTION
        </span>
    </li>
    <li>...</li>
</ul>

Puis le HTML pour la navigation:

<div class="ppy-outer">
    <div class="ppy-stage">
        <div class="ppy-nav">
            <a class="ppy-prev" title="Previous image">Previous image</a>
            <a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
            <a class="ppy-switch-compact" title="Close">Close</a>
            <a class="ppy-next" title="Next image">Next image</a>
        </div>
    </div>
</div>
<div class="ppy-caption">
    <div class="ppy-counter">
        Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong> 
    </div>
    <span class="ppy-text"></span>
</div>

Et du côté de l'instanciation jQuery, voici comment ça se passe:

$(document).ready(function () {
    var options = {
        caption:    false,
        navigation: 'permanent',
        direction:  'left'
    }
    $(YOUR_ELEMENT_SELECTOR).popeye(options);
});

Démo

Site Officiel