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...

Forum

Forum

Box en Ajax comme sur le site de FT

24-12-2008 09:15:13

jponline

Bonjour j'aimerai intégrer les box qu'on peut déplacer comme sur le site de france télécom [url]http://www.francetelecom.com/fr_FR/[/url] Ou trouver ce genre de script ? merci de votre aide
24-12-2008 14:35:17

webmaster

Bonjour Cela va effectivement au-delà des lightbox proposées sur le site, qui forment un code de base! La lighbox basée sur JQuery et la Slimbox basée sur Mootool ne proposent pas non plus cet effet. Il semble que ce soient des iframes, dont la position change en fonction du mouvement de la souris. Cela peut aussi se réaliser avec des <div>.
© 2008-2014 Xul.fr