Une lightbox depuis Flash
2 Juillet 2009 23:21 | Par Miss Lemon dans Développement
Dans un cadre professionnel, il a fallu lancer une lightbox depuis un Flash.
En effet, le flash permettant de faire défiler les miniatures, au clic sur l'une d'entre elle, une lightbox s'ouvre, affichant alors l'image sélectionnée en grand format, et offrant les liens de navigation pour visualiser l'ensemble des images.
Comment ça fonctionne?
Dans la page HTML où est appelé le SWF, il faut faire les appels aux librairies prototype, et scriptaculous, ainsi qu'au script js et css de la lightbox.
Puis, il faut placer le code suivant toujours dans les balises HEAD:
<script type="text/javascript">
function OpenLB(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}
</script>
Ensuiute, il faut placer, un peu plus bas dans la page, sous l'appel au flash, les liens vers les images:<a id="img1" href="images/image1.jpg" rel="lightbox[defil]" title="Ma belle image un"></a> <a id="img2" href="images/image2.jpg" rel="lightbox[defil]" title="Ma belle image deux"></a> <a id="img3" href="images/image3.jpg" rel="lightbox[defil]" title="Ma belle image trois"></a>Comme vous pouvez le constater, ce sont des liens, sans aucun contenu, donc non cliquables, par contre, ils possèdent tous le même attribut "rel" et un "id" bien distinct.
Attention à bien spécifier les "id" car c'est ce qui va permettre de faire le lien avec le flash, et le javascript d'appel de la lightbox.
Dans le flash, sur chacune de vos vignettes, vous pouvez placer le code getURL adéquat selon l'exemple suivant:
getURL("javascript:OpenLB('img1')");
(avec "img1" à remplacer par l'"id" de votre choix)Dans notre cas , il a fallu modifier un peu le lightbox.js et un peu le lightbox.css, mais rien de bien méchant.
Voir la mise en place par Zeni sur le site du bourget
Source: Codefidelity
avec un exemple, téléchargeable ici
