Lightbox sans framework
Réalisation d'une lightbox pour présenter des images, un message,
un formulaire et le mettre en valeur en assombrissant le reste de la page.
Sans framework Ajax, avec quelques lignes de code.
Scripts testés avec Internet Explorer, Firefox, Chrome, Opera, Safari et Konqueror.
Lightbox en CSS
Deux <div> sont créées, l'une pour le filtre qui assombrit
la page, l'autre comme conteneur pour la boite.
Il suffit alors de descripteurs CSS pour créer une lightbox. On joue
sur la propriété display:block et display:none pour faire
apparaître ou disparaître le boite et le filtre.
Changer de façon dynamique le contenu
Pour changer le contenu de la lightbox à la demande et selon le
choix de l'utilisateur, quelques lignes de JavaScript doivent être
ajoutées.
On inscrit un titre dans la barre et on insère le contenu en utilisant
les fonctions de DOM.
Utiliser la lightbox pour présenter des images
La lightbox est redéfinie et simplifiée pour l'affichage
d'images, ce qui est son utilisation la plus courante en fait.
Dans ce cas on clique sur l'image pour fermer la boite, cela simplifie le
design.
Rendre le code compatible avec Internet Explorer 7
Il va falloir rendre le code un peu plus complexe pour supporter les navigateurs plus anciens.
Chargement asynchrone dans une lightbox par Ajax
En ajoutant une fonction Ajax - sans utiliser de framework pour autant - nous pourrons afficher de façon instantanée les images dans la boite.
Ajouter un effet de fondu
Pour faire apparaître progressivement la lightbox, un effet de fondu est ajouté pour compléter la fonction Ajax.
Un formulaire dans une lightbox
Présenter un formulaire dans une lightbox, avec éventuellement un effet de fondu, cela devrait atténuer le désagrément qu'il y a à le remplir...
© 2008-2011 Xul.fr