Une lightbox uniquement en CSS

Par j0k le dimanche 26 août 2007, 04:31 dans webdesign - 10404 vues

Par soucis de chargement de plusieurs fichiers JavaScript sur votre page, vous pouvez très bien créer des Lightbox qui n'utilise pas de fichier externe. Sans tomber dans l'absurde de mettre tout le code dans la page, évidemment .. !
Le principe est relativement simple, il suffit d'un bloc css qui est caché à la base et qu'on affiche au milieu de l'écran ensuite. Un p'tit overlay pour mettre le focus sur le bloc, et le tour est joué.

Cependant vous perdez un peu l'effet de la ligthbox, c'est à dire son affichage "doux", son redimensionnement automatique par rapport au contenu, une éventuelle navigation dans une galerie d'image. Cet exemple est juste là pour vous montrez que c'est faisable en CSS uniquement (juste une ligne de JavaScript) et de façon très simple !

3 commentaires en tout !

1. Anonymous le vendredi 28 septembre 2007, 11:03 #permalien
Anonymous

Bonjour, les lightbox ont l'air intéressantes.
J'ai essayé celle proposée par le site mais s'il n'y a pas javascript d'activé ça ne fonctionne pas.

Donc ma question est ce qu'il existe des lightbox 100% CSS ou ajax en tout cas sans javascript ???

2. j0k le samedi 29 septembre 2007, 01:53 #permalien
j0k

Non je ne pense pas, il faut dans tous les cas déclenché un évènement au moment où l'utilisateur cliquera que le lien .. il faut donc obligatoirement une "goute" de JavaScript.

3. Anonymous le dimanche 30 septembre 2007, 02:00 #permalien
Anonymous

Merci, dommage malgré l'aspect intéressant de cette méthode.

Pensez à vous inscrire !

  • C'est rapide
  • Utiliser votre compte Facebook
  • Ou votre Open ID
Laisser un commentaire





Catégories


Tags


Liens