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.
Lightbox avec contenu dynamique
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.
Lightbox pour 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.
Lightbox et scrolling
L'étape suivante consiste à prendre en compte le décalage qui resulte d'une vue plus petite que la page, cela en respectant la compatibilité avec tous les navigateurs.
Ligthbox et 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.
Mise à jour: Prise en compte du scrolling.
Effet de fondu
Pour faire apparaître progressivement la lightbox, un effet de fondu
est ajouté pour compléter la fonction Ajax.
Mise à jour avec le scolling.
Lightbox et formulaire
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...
(c) 2008 Xul.fr
Licence: Vous êtes libre d'utiliser le code de ces tutoriels
pour motoriser votre propre site. Soyez aimable de ne pas placer les tutoriels
ou autres fichiers sur un autre site, placez plutôt un lien sur l'article.
Mais vous pouvez imprimer les pages et les distribuer avec le code à
des fins d'enseignement.