jQuery Popeye, une autre manière d’afficher ses images

26/11/2008
Web Développement et Design Allez aux commentaires

Voici encore un script qui va plaire aux utilisateurs de "lightbox like" ! Mais jQuery Popeye pourrait aussi intéresser tous ceux qui ont toujours été un peu retissant à lightbox ou qui cherche une manière pour intégrer une mini galerie dans leurs pages.

Comme d'habitude voici la démo pour les plus pressé d'entre vous: Démonstration

Utilisation

Il vous faudra construire une liste de miniatures entourée d'une div avec une class "popeye"

<div class="popeye">  
       <ul>  
       <li><a href="url_of_large_image.jpg"><img src="url_of_thumbnail.jpg" alt="The caption string"></a></li>  
       <li><a href="url_of_large_image.jpg"><img src="url_of_thumbnail.jpg" alt="The caption string"></a></li>  
       <li><a href="url_of_large_image.jpg"><img src="url_of_thumbnail.jpg" alt="The caption string"></a></li>  
       <li>...</li>  
       </ul>  
</div>

Ensuite vous intégrez jQuery (si ce n'est déjà fait), vous uploadez le plugin (tout le contenu du dossier) et vous ajoutez le code d'initialisation.

Code à placer entre les balises HTML <head> et </head>

<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="lib/jquery.popeye-0.2.1.js"></script>
<link rel='stylesheet' href='css/jquery.popeye.css' type='text/css' />
<script type="text/javascript">
$(document).ready(function () {  
       $('.popeye').popeye();  
});  
</script>

Ps: si vous voulez que votre popeye ressemble au 2ème exemple (avec les petites icônes) il vous faudra inclure la feuille de style css/styling.css ainsi que le dossier gfx

Au final le système est peu intrusif, ne prend pas une place énorme sur la page et apporte un confort supplémentaire pour le visiteur ! Enjoy !

-----

Articles relatifs

  1. GeekFG
    26/11/2008 à 20:17 | #1
    Répondre | Citer

    Dommage que l’image ne s’affiche pas sous Chrome… ^^

  2. k-ny
    26/11/2008 à 20:21 | #2
    Répondre | Citer

    Ho ? Comment ça ? Chez moi tout passe nickel sous chrome ! C’est l’agrandissement de l’image qui ne passe pas ?

  3. GeekFG
    26/11/2008 à 21:18 | #3
    Répondre | Citer

    Après un troisième rafraîchissement cela fonctionne. Pourtant, j’avais bien les images lors de l’agrandissement des images mais pas autrement…bizarre…

  4. k-ny
    26/11/2008 à 22:09 | #4
    Répondre | Citer

    Ah ? Un petit peu louche effectivement ! On va ajouter « Compatibilité à 50% avec Chrome », un script qui marche une fois sur deux c’est bon ça ! Non ? :D

  5. bruno bichet
    06/12/2008 à 15:28 | #5
    Répondre | Citer

    Salut, chez moi tout baigne sur Chrome. Merci pour le lien, ça va sûrement me servir un jour

  1. Pas encore de trackbacks