Accès Rapide
Tutoriels
Communauté
À propos de...

LightBox avec JQuery : C'est simple !

Publié par Kilaam le 23/10/2007 (2070 lus)

Un plugin LightBox pour vos JQuery !

LightBox est un petit script qui permet d'afficher des agrandissements d'images ou de faire des petites galeries sympathique. Normalement, pour l'utiliser, vous devez charger la librarie Scriptaculous. Toutefois, celle-ci a une taille plutôt énorme. C'est pour cela qu'il est préférable d'utiliser JQuery qui est beaucoup moins lourd. Pour un petit exemple, rendez-vous sur cette page.

 

Installation...


1. Télécharger la librarie via ce lien et le plugin lightbox ici.
2. Entre les balises <head></head> de votre site, insérez ce code :

<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.3.js"></script>
<script type="text/javascript"> //Code activation de Lightbox. voir ci-bas </script>
<style type="text/css" media="screen">
@import url(jquery.lightbox-0.3.css);
</style>


Note : Veillez à bien avoir transféré tous les fichiers (les css et les images) sur votre hébergeur.

Utilisation du plugin...

 

Pour utiliser le plugin, il existe deux méthodes. Vous pouvez appliquer le système à l'ensemble des liens d'images de votre site ou utiliser une classe précise. Vous devrez mettre la ligne de votre choix dans la balise <script> définis ci-dessus. Pour rappel, c'est celle-là :

<script type="text/javascript">
// Ici je met mon choix
// Par exemple
$("a").lightBox();
</script>

Donc, pour toutes les images :

$("a").lightBox();

Pour une classe précise :
$("a.light").lightBox();

Exemple de lien utilisant une classe : <a href="image.png" class="light">

 
  Voir cet article en format PDF Imprimer cet article Envoyer cet article

Naviguer à travers les articles
Un fichier de langue php pour proposer plusieurs langues sur votre site Article suivant
Publicité