Pour ceux qui ne le connaissent pas, Lightbox est un effet souvent utilisé dans les galleries d'images. Ce tuto est en faite la traduction de l'explication du site du créateur huddletogether.com qui est en anglais. Cet effet peut être personnalisé par la modification des images.
- Installation
Pour pouvoir l'utiliser, vous devez télécharger ce fichier.
Insérez entre vos balises <head></head> les lignes suivantes qui permettent d'appeller les fichiers javascript :
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
Ainsi que l'appel de la feuille de style :
Vérifiez dans la feuille de style que les chemins des images correspondent.
- Utilisation
Sur chaque image où vous souhaitez appliquer l'effet, placez rel="lightbox" dans la balise de lien de votre image. Exemple :
La balise 'title' est bien sûr optionnelle.
Par contre, si vous souhaitez grouper plusieurs images (une gallerie par exemple) :
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
Il n'y a aucune limite en ce qui concerne le nombre d'image utilisant l'effet Lightbox.
- Problèmes
Si l'effet ne fonctionne pas, il ce peut qu'il y est un conflit entre les scripts. Pour eviter cela vous devez insérer dans votre balise body :
Une façon rapide pour résoudre ce problème est de mettre initLightbox() à la fin de l'attribut de chargement :
Pour plus d'informations, allez voir le site.
- Personnalisation
Voici un site qui permet de générer des boutons de chargement (au format gif) : ajaxload.
En voilà un autre avec quelques boutons de chargement (différents) personnalisables : Load Info.
Pour les images, voici quelques variantes :
