LightBox 2 est un script JavaScript qu permet d'afficher un diaporama en plein écran sur la page courante. Il est possible de paramétrer plusieurs images qui seront affichées en appuyant sur les flèches du clavier ou en cliquant sur les flèches présentes sur l'image.
Cliquez sur l'image pour afficher le résultat 'LightBox'
Télécharger et installer LightBox 2.6
Télécharger l'archive directement sur le site de l'éditeur.
L'archive contient un répertoire 'lightbox' que vous pouvez directement copier dans le répertoire de votre site Web. (le répertoire normalement en majuscule qui se termine par _WEB).
Votre arborescence de répertoire doit se présenter ainsi
Voila, pour les fichiers c'est terminé
Déclarer le script dans la page
Pour que Light Box puisse fonctionner vous devez intégrer les scripts dans les pages qui doivent afficher un diaporama.
- Dans WebDev, faites un clic droit dans votre page web et cliquez sur 'Description'
- Cliquez sur l'onglet avancé
- Dans la section 'Code HTML ajouté à l'en-tête de la page, ajoutez le code ci dessous :
<script src="/[VOTRESITE_WEB]/lightbox/js/jquery-1.10.2.min.js"></script>
<script src="/[VOTRESITE_WEB]/lightbox/js/lightbox-2.6.min.js"></script>
<link href="/[VOTRESITE_WEB]/lightbox/css/lightbox.css" rel="stylesheet" />
Ajouter une image et la rendre 'lightbox' !
- Ajoutez une image comme vous le faites d'habitude
- Dans l'onglet 'Avancé' de l'image, saisissez le code ci dessous dans la zone 'Code HTML généré avant le champ'
<a href="/[VOTRESITE_WEB]/mon_image.png" data-lightbox="groupe_1" title="Le titre de mon image">
- Dans la zone 'Code HTML généré après le champ', saisissez le code suivant
</a>
- Validez
href : pointe vers l'image à utiliser dans light box. Normalement, c'est la même image qui est affiché !
data-lightbox : Nom du groupe d'affichage. Pour effectuer un diaporama avec plusieurs images, il faut donner le même nom de groupe.
title : Titre de votre image. Ce titre est affiché en bas à gauche pendant le diaporama.
Utiliser plusieurs images pour faire un diaporama
Il suffit de faire la même opération que le point précédent en utilisant TOUJOURS le même nom pour la propriété "data-lightbox". Pour ne pas afficher toutes les images dans la page (comme dans cet article, utilise 4 images mais seulement 1 est visible pour vous) il suffit de modifier la propriété 'visible' de vos champs image.. Attention à bien cocher l'option 'Générer le code HTML du champ, même s'il est invisible' dans l'onglet avancé.
Autres possibilités
Ceci n'est qu'un exemple simple de mise en œuvre. Avec ces infos et de l'expérience, vous pourrez créer par exemple un modèle de champ qui contiendra soit un champ image ou soit un champ libellé HTML et quelques méthodes pour ajouter dynamiquement des images dans votre diaporama à partir d'une base de données.
Un modèle de champ qui afficherai automatiquement une image d'un répertoire donné et qui, lorsqu'on clic dessus afficherai toutes les autres images en diaporama.
Et bien d'autres possibilités.. Nous pouvons vous aider à réaliser votre intégration dans votre site web. Cliquez sur le lien ci-dessous pour nous contacter.
