Ligthbox lightbox.js
Par PlaceOweb le jeudi, janvier 21 2010, 20:02 - Javascript - Lien permanent
Ligthbox, vos nouvelles fenêtres in-line pour vos slideshow et galeries qui se substituent a vos anciens pop-up (window.open et window.showModalDialog)
Les problèmes avec window.open et window.showModalDialog
Les problèmes avec window.open
- Firefox 3.5.7 : la fonction ouvre une fenêtre, et la ré-ouverture du pop-up repositionne la fenêtre en premier plan
- Chrome 3.0 : la fonction ouvre une fenêtre, et la ré-ouverture change le contenu mais la fenêtre reste derrière
- Internet Explorer 8 : la fonction ouvre une fenêtre, et la ré-ouverture change le contenu mais la fenêtre reste derrière en clignotant pour alerter qu'il y a eu des modifications
Les problèmes avec window.showModalDialog
Testez votre navigateur avec showModalDialog
- Firefox 3.5.7 : la fonction retourne une vraie fenêtre modale
- Chrome 3.0 : la fenêtre n'est pas modale, en cliquant en dehors, elle se réduit, et la réouverte génère une autre fenêtre en premier plan
- Internet Explorer 8 : la fenêtre est modale, et s'ouvre en plein écran
Solution aux problèmes d'ouverte de fenêtre window pop-up
Avec ces comportements différents selon les navigateurs et leurs restrictions, les règles anti attaques et intrusion du navigateur bloquent l'ouverture ou ré-ouverture de pop-up (Fenêtre intruse), il est temps de passer aux fenêtres légère dans la page courante : Ligthbox
Les différents Ligthbox
Create a Lightbox effect only with CSS – no javascript needed
Créer une boîte légère de base avec de la CSS et juste ces commandes javascript
[html]
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
Ligthbox
Lightbox JS est un simple, discrète script utilisé pour superposer des images sur la page en cours. C'est un clin d'œil à installer et fonctionne sur tous les navigateurs modernes.
Il semble aussi être un précurseur dans son domaine et donc repris par nombreux autres rendus Lightbox.
Lightbox by Lokesh Dhakar
Basique, et sans framework complémentaire. Permet l'ouverture et fermeture.
Dernière version : 1/19/06
Lightbox2 by Lokesh Dhakar
Lightbox 2 utilise les Frameworks Prototype et Scriptaculous Effects Library
Et permet de faire défiler des images manuellement.
Dernière version : v2.04 - 3/9/08
Lightview
Lightview nécessite Prototype 1.6.1 et Scriptaculous 1.8.2.
Dernière version : 2.5.2.1 (01-01-2010)
Lightview 1.0.1 : Lightbox avec Slide Show intégré Lightview est un plugin du même type mais qui a l’avantage d’inclure une fonction Slide Show.
js_slideshow
Ce diaporama est une démonstration de comme Flash mis en œuvre uniquement en Javascript, HTML et CSS.
jQuery Lightbox Plugin (balupton edition)
Les albums sont un moyen d'afficher une image sur la même page de manière simple et élégante.
v1.3.7-final (April 25, 2009)
jQuery Lightbox (ancien http://code.google.com/p/jquery-lightbox/)
jQuery Lightbox est un simple portage pour jQuery du script lightbox populaire.
Version 0.5 - 11/29/2007 (modifié régulièrement encore aujourd'hui en 2010)
jQuery lightBox plugin
Un autre script porté sur jQuery depuis le Lightbox.
Version 0.4, November 17, 2007