Fonctionnalités

Navigation clavier

Contrairement à ce qui à déjà été fait auparavant (par facebook entre autres), ce lightbox n'utilise pas les flèches du clavier car pour les utiliser une personne doit soit : utiliser sa main droite (perdant ainsi le contrôle de sa souris), ou effectuer une torsion inconfortable du poignet gauche ! Ce lightbox utilise donc les touches W,A,S,D,Q et E pour une navigation instinctive(surtout pour les gamers^^).

• W = Sélectionner une image dans un menu/zoomer une image
• A = Passer à l'image précédente
• S = Reculer le zoom/revenir au menu
• D = Passer à l'image suivante
• Q = Fermer le lightbox
• E = Recentrer le lightbox

Navigation classique

Une navigation de base (une flèche à gauche et une à droite) pour les utilisateurs qui n'aiment pas la navigation clavier.

Préchargement de l'interface et des images

Dès que la page à fini de charger, le lightbox précharge les éléments de son interface automatiquement pour éviter d'avoir des boutons invisible lorsque l'utilisateur ouvrira le lightbox. De plus, lorsque l'utilisateur ouvre le lightbox, l'image qu'il à choisit est chargée en premier, ensuite toutes les images suivantes sont préchargées et pour finir les images précédentes aussi sont chargés. Même que, durant ce processus, le pourcentage de chargement des images du groupe est affiché !

Ajustement automatique selon la taille de l'écran et zoom

Plus jamais d'images qui débordent ! Elles s'ajusteront automatiquement à la taille du navigateur (largeur des barres de défilement comprise) tout en conservant leurs proportions. Et si l'utilisateur désir voir l'image à sa taille normale, il à la possibilité de zoomer sur l'image à l'aide d'un simple bouton clavier !

Redimensionnement de la fenêtre pris en compte

Le lightbox ajuste automatiquement sa disposition et ses proportions lorsque l'utilisateur modifie la taille de son navigateur.

Menu affichant les images du lightbox en miniature

Permet à l'utilisateur d'avoir une bonne vue d'ensemble des images du lightbox, et lui permet de naviguer rapidement entre celles-ci.

Un titre aux image

Possibilité d'ajouter du texte (court ou long) au dessus de chaque images pour décrire son contenu.

Recentrage manuel

Si une image à sa pleine taille déborde hors de l'écran, l'utilisateur peut centrer manuellement le lightbox.

Avantages pour les développeurs

Facile à utiliser (sans programmation javascript)

Liez le fichier Javascript à votre page, et c'est parti ! Tout ce qui vous reste à faire c'est d'ajouter quelques attributs à vos éléments dans la page et le lightbox s'occupera du reste ! (voir la section d'installation plus bas pour plus de détails)

Avoir plusieurs groupes d'images dans la même page

Spécialement conçu pour gérer plusieurs groupes d'images dans une même page, ce lightbox ne vous causera jamais de problèmes à ce niveau !

Compatible

Très stable sans jamais produire d'erreurs (même en lui donnant la vie dure) !:P Testé dans tous les navigateurs récents (Firefox 4, Chrome 12, Safari 5, Opéra 11) ainsi qu'avec les retardataires désuets (Internet Explorer 7, 8 et 9)...

Pour plus de contrôle

Les éléments clefs du lightbox sont contrôlés par des variables (true/false ou numériques) distinctes et faciles a modifier à l'intérieur du fichier javascript. Cela vous évitera de fouiller dans le code à la recherche des lignes que vous voulez modifier !

Installation

1. Placez et liez les éléments

Placez les images dans l'arborescence de votre site(où vous voulez, pourvu que toutes les images soient dans le même dossier et qu'elles gardent le même nom). Placez aussi les fichiers « Lightbox.js » et « Lightbox.css ». Ensuite, dans la balise « head » de votre site, liez les avec un code semblable :
<link type="text/css" rel="stylesheet" href="css/lightbox.css"> <script type="text/javascript" src="js/Lightbox.js"></script>
pointant vers vos fichiers.

2. Changez le chemin vers les images

Ouvrez le fichier « Lightbox.js », modifiez la première variable en haut (UIDir) pour qu'elle pointe vers le dossier où vous avez mis les images du lightbox. (utilisez un chemin absolut de préférence)

3. jQuery et effets de « easing »

Le lightbox requiert jQuery pour fonctionner, si vous ne l'avez pas référez vous à : http://jquery.com/. De plus, vous pouvez contrôler les effets de transition en modifiant les variables « easing1, easing2 et easing3 » du fichier « Lightbox.js ». Par défaut ces variables sont mises a « swing » et j'ai mis une suggestion plus jolie en commentaire à droite pour ceux qui ont Easing Plugin 1.2 ! :)

Fonctionnement et utilisation

Une fois votre page chargée, le script scannera les balises html à la recherche de certains attributs. Il classera ceux ci en groupes, ajoutera les évènements « onClick » , etc. Tout ce que vous avez a faire c'est d'ajouter les attributs(sur vos balises d'image miniature préférablement car le script sera en mesure de prendre le chemin de l'image miniature pour l'affichée dans son menu si cette option est activée dans le fichier « Lightbox.js »).

Il y à 3 attributs que vous pouvez ajouter aux éléments de votre page :

• data-lightboxSrc : (obligatoire) chemin menant à l'image que le lightbox ouvrira.
• data-lightboxTitle : (optionnel) texte qui sera affiché au dessus de l'image.
• data-lightboxGroup : (optionnel) numéro de groupe (1 à infini) de l'image. Tout les éléments qui auront le même numéro seront placés ensemble et tout ceux qui n'auront pas de numéro seront placés automatiquement ensemble dans le groupe 0.

Exemple :

Cet exemple affichera trois groupes d'images contenant respectivement : trois images, deux images et une image. Les images du deuxième groupe n'auront pas de titre tandis que les autres oui. L'ordre d'affichage des images est déterminé par la position de leurs miniatures dans la sémantique de votre page.