Lancer une galerie Lightbox à partir d'un Flash
Par beladom le jeudi, décembre 3 2009, 12:00 - Tutoriels - Lien permanent

Lightbox est un plugin Jquery permettant de créer des galeries d'images très facilement avec un rendu graphique pro. J'invite ceux qui ne connaitraient pas encore ce fabuleux outil à le découvrir via les quelques exemples mis en ligne sur le site officiel de Lightbox.
L'installation et l'appel d'une lightbox sont très simples à paramétrer à partir d'une page HTML et il existe moult ressources en téléchargement sur ce sujet. En revanche, le lancement d'une galerie Lightbox à partir d'un bouton Flash se révèle un peu plus compliqué, et vous aurez besoin de tout le talent de votre généreux Beladom pour vous guider!
Voici donc les étapes à suivre pour installer une Lightbox et la lancer à partir d'un fichier Flash :
1. Rendez-vous sur http://www.huddletogether.com/projects/lightbox2/ et téléchargez la dernière version de Lightbox à partir de la rubrique "Download" (actuellement il s'agit de la version 2.04).
2. Créer un bouton Flash et intégrez le swf correspondant dans votre page HTML.
3. Ajoutez la fonction Javascript suivante dans la balise <head>de votre page :
<script type="text/javascript">
function GroupDelegate(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}
</script>
4. Appelez maintenant la fonction Javascript décrite ci-dessus à partir de Flash avec le code suivant (Actionscript 2) :
monBouton.onRelease = function() {
getURL("javascript:GroupDelegate('img1')");
}
En ActionScript 3, vous devrez utiliser la fonction ExternalInterface pour faire appel à votre fonction Javascript :
monBouton.addEventListener(MouseEvent.CLICK,launchLightbox);
function launchLightbox(evt:MouseEvent){
flash.external.ExternalInterface.call("GroupDelegate","img1");
}
5. Vous allez maintenant spécifier les liens des images de votre galerie Lightbox dans votre page HTML :
<a id="img1" title="Titre première image" rel="lightboximg" href="images/image-1.jpg"></a>
<a id="img2" title="Titre deuxième image" rel="lightboximg" href="images/image-2.jpg"></a>
Répétez cette opération autant de fois que nécessaire selon le nombre d'images souhaitées.
Et voilà, le tour est joué! Vous devriez maintenant avoir quelque chose qui ressemble à ça :
Si ce n'est pas le cas, vous pouvez télécharger l'exemple ci-dessous :

Commentaires
Merci, mais alors vraiment super merci !
quand je veux ouvrir la source .fla sa me marque "format de fichier inattendu" suis je le seul à qui sa fait sa ?
Le fichier .fla est enregistré en version CS4, tu ne pourras donc pas l'ouvrir avec une version antérieure de Flash ;)
bonjour,
je suis bien contente de tester ton tuto.
mais j'ai un petit soucis car j'ai integré tous les visuels dans un fichier xml et donc comment ecrire le code AS2 pour flash et egalement dans le fichier html.
merci de ton aide !!!
Je ne suis pas sure de bien saisir le sens de ta question ... Tu veux dire que tu charges tes images en externe à partir de Flash via un fichier XML ?
Auquel cas, tu dois justement utiliser Lightbox pour afficher tes images, Flash ne sert ici qu'à lancer ton diaporama.
Bonjour,
En fait, j'utilise un fla déjà fait, que j'ai modifié pour mon site qui est un site de meuble.
j'ai donc pas mal de diaporama a faire pour chaque articles.
J'essaye de commencer avec la page de photogalerie et la presentation de l'usine ainsi que le salon de Nitra en Slovaquie.
j'ai essayé ta manière, et quand je met le code entre <head></head>, deja en premier, quand je vais sur la page de mon site avec easyphp, j'ai une page blanche.
J'ai mis tous les répertoires css, js, scriptes, bref, tout le diaporama, mais j'arrive pas!!!
J'ai un bouton pour les liens de chaques, et quand je rentre les lignes de code et que je teste l'anim, j'ai un message d'erreur sur flash qui me dit pour la ligne monBouton.onRelease = function(){ , que l'instruction doit apparaître dans le gestionnaire on.
Je ne suis pas un top avec actionscript, mais dans les propriétés du fla, c'est en 2.0 et le fla est en 6.
J'ai lu tous les articles sur les forums, tous les posts concernant l'ouverture d'une lightbox sous flash, mais j'y arrive pas.
Si tu pouvais m'aider, cela m'enlèverait une grosse épine du pied. J'en dors même plus la nuit tellement ca me perturbe. LOL
Merci a toi
Salut,
Là il faudrait que je vois ton code pour t'aider, parce que tu sembles rencontrer beaucoup de problèmes. Envoie-moi ça sur benoit@beladom.fr, je verrai ce que je peux faire.
Bonjour
je t'ai envoyé un mail, mais sans réponse de ta part, donc je te pose la question ici.
Quels codes ou quels fichier veux tu que je t'envoi pour voir?
je lis très soubent ton blog, c'est un plaisir immnese à chaque fois.
Merci à toi, ça fait plaisir ;)
Bonjour Comment changer le premier image dans la page index.html
Flash connait pas trop Merci pour ta réponse
Il suffit de remplacer le nom de la première image, à savoir "image-1.jpg" par le nom de ta nouvelle image dans le code du fichier index.html et bien entendu de mettre l'image correspondante dans le dossier "images" ;)
Bonjour, merci pour ce code!
Je voulais savoir si on pouvait adapter ça à plusieurs boutons dans un site full flash ?
Merci beaucoup.
ça devrait fonctionner si tu crées un nouvel attribut de relation rel="lightbox[img2]" et en appelant la première image de cette galerie à partir de ton deuxième bouton flash ;)
Merci beaucoup, je vais voir tout ça.
Bonjour à tous
Je débute et je souhaite savoir si une personne peut m'aider pour faire en sorte que je puisse tester mon carrousel.
il est sur
http://jb1275.free.fr/test
je souhaite faire en sorte que quand je clique sur l'image cela s'affiche en plus grand.
Un très grand merci à vous tous
jb
voici se que j'ai
<Carousel centeredImage="images/logo.png">
<photo image="images/01.jpg" bigimage="images/big/01.jpg" url="javascript:GroupDelegate('img1')" target="_self" lightboxInfo="Optional description for image 1" info="Héllo"><![CDATA[Download the new<br>3D Carousel]]></photo>
<photo image="images/02.jpg" bigimage="images/big/02.jpg" url="javascript:GroupDelegate('img2')" target="_self" lightboxInfo="Optional description for image 2"><![CDATA[It's FREE]]></photo>
<photo image="images/03.jpg" bigimage="images/big/03.jpg" url="javascript:GroupDelegate('img3')" target="_self" lightboxInfo="Optional description for image 3"><![CDATA[Test all 50 changeable<br>properties below]]></photo>
<photo image="images/04.jpg" bigimage="images/big/04.jpg" url="javascript:GroupDelegate('img4')" target="_self" lightboxInfo="Optional description for image 4"><![CDATA[You can customize it<br>completely without Flash]]></photo>
<photo image="images/05.jpg" bigimage="images/big/05.jpg" url="javascript:GroupDelegate('img5')" target="_self" lightboxInfo="Optional description for image 5"><![CDATA[Fully XML customizable]]></photo>
<photo image="images/06.jpg" bigimage="images/big/06.jpg" url="javascript:GroupDelegate('img6')" target="_self" lightboxInfo="Optional description for image 6"><![CDATA[Very easy to integrate<br>in any website]]></photo>
<photo image="images/07.jpg" bigimage="images/big/07.jpg" url="javascript:GroupDelegate('img7')" target="_self" lightboxInfo="Optional description for image 7"><![CDATA[Complete instructions<br>provided]]></photo>
</Carousel>
c'est dans images.xml
merci beaucoup
Bonjour,
Ton message n'a rien aucun rapport avec le sujet, merci donc de ne pas y donner suite.
Je te répond en privé.
Bonjour,
merci pour ce tuto mais je voudrais savoir s'il existe un moyen de lancé un diaporama automatique avec la lightbox
j'ai trouvé un diapo avec la lightbox V2.04 mais la commande avec un bouton flash ne fonctionne pas
as tu quelques idées
merci
Bonjour, existe-il un code équivalent pour AS3? Merci
Bonjour,
excellent tuto ! merci.
Personnellement je cherche à utiliser ce type de jquery, appelé depuis un swf, pour ouvrir une page html. du type greybox :
http://orangoo.com/labs/GreyBox/
Je ne sais ps trop comment faire.
C'est exactement ce que j'essaie de faire depuis des mois. J'ai suivi les instructions mais ça ne fonctionne pas. Beladom, est-ce que je pourrais vous envoyer mon code HTML et ActionScript pour que vous puissiez regarder où se trouve l'erreur ?
Je vous remercie infiniment à l'avance!
LH
Bonjour,
j'aimerais réaliser ce même tuto mais en as3 est ce que quelqu'un a une idée? Merci d'avance
Bonjour,
moi aussi j'aimerais savoir comment on fait ca en as3. Pas d'idée???
Bonjour à tous,
En AS3 il suffit de remplacer ce code :
monBouton.onRelease = function() {
getURL("javascript:GroupDelegate('img1')");
}
par celui ci :
monBouton.addEventListener(MouseEvent.CLICK,launchLightbox);
function launchLightbox(evt:MouseEvent){
flash.external.ExternalInterface.call("GroupDelegate","img1");
}
Et surtout, n"oubliez pas de passer les paramètres de publication de votre projet Flash en ActionScript 3.
Je vais mettre une version AS3 en ligne dans la journée pour ceux qui le souhaitent ;)
A tous,
Vous pouvez désormais télécharger la version AS3 à partir du lien "Télécharger l'exemple" du billet.
Merci pour ton code ! mais comme Ash.
j'ai une erreur, donc le code flash. faut le mettre sur les bouton ou dans le calque Action script?
car sa fonctione pas trop dans les 2 cas ...
Salut à toi,
Il faut mettre le code dans un calque ActionScript (on ne met plus le code directement sur les MovieClip depuis AS2).
Si ça ne fonctionne toujours pas, repars de la démo que j'ai mise en ligne ci-dessus (tu dois mettre le tout en ligne ou sur un serveur local pour que ça fonctionne bien).
Bonne Année a tous !!
Merci de ta réponse.
j'ai placer le code dans un calque as effectivement sur mon serveur dedier. sa affiche une ligthbox, mais vide et en dessou du fichier flash ....
ex: www.qqgameno.fr
Avec la feuille de style de la lightbox ça devrait mieux fonctionner ;)
bonjour
Donc, j'ai verifier la .css de la lught box est bien là.
"lightbox.css".
Encore merci pour l'aide que tu essaye d'apporter.
Quelqu'un saurait comment adapter le code de façon a ouvrir un fichier php ou html dans le lightbox au lieu d'une image ?
Bonjour,
Est ce que ce Lightbox s'adapte aussi à ouvrir une page Html au lieu des images ?
Si oui, y'a t-il qq qui peut m'aider.
merci d'avance
Bonjour,
Je cherche depuis un bon moment ! Merci pour ce tuto !
J'ai juste un petit problème.
La lightbox s'ouvre mais au bout d'une seconde l'image disparaît.
Le bouton next apparaît et je peux passer à l'image suivante. Idem elle disparait au bout de 2 secondes.. etc..
D'où cela peut-il venir ??
Merci de ton aide
Bonjour,
C'est bon c'est résolu. Mais je ne sais pas trop comment....
Bonjour,
Je suis en flash 8 et impossible de faire fonctionner ce code qui m'a l'air vraiment très bien.
Pouvez-vous mettre à disposition un swf lisible en flash 8 ?
J'ai beau mettre le code :
monBouton.onRelease = function() {
getURL("javascript:GroupDelegate('img1')");
}
Cela ne fait absolument rien quand je clique sur mon bouton. Code placé sur le calque.
Merci d'avance si quelqu'un a une idée ou un swf en v8.
Bonjour,
Je suis sur CS5 et je ne peux malheureusement pas descendre en dessous de Flash CS4.
Ceci étant, tout fonctionne de la même façon, il suffit de placer un bouton ayant pour occurence "monBouton" sur la scène, de placer le code cité ci-dessus sur cette même scène et de publier le tout en AS2 (ou AS3 voir plus haut).
Bjrs, ça ne marche pas en full Browser je m'explique :
J'ai un site en full flash , et je charge mon anim portfolio dans mon site full flash . Quand je clique sur une image de mon portfolio , l'image s'ouvre bien mais elle se met en dessous du full flash au lieu de se mettre par dessus , résultat gros bug ...
Autant pour moi, je n'avait pas charger le css dans ma page html, reste un petit problème , les closelabele, prev .. etc ne s'affiche pas pourtant les url sont bonne dans le javascript... je vais plancher sur le sujet ...
Bonjour Beladom et merci de ta réponse.
En fait, j'ai trouvé pourquoi cela ne fonctionnait pas. Je viens donc donner la solution si quelqu'un rencontrait le même problème.
Il faut absolument redonner le même nom que le bouton, dans OCCURENCE.
Et ça fonctionne.
Merci à toi Beladom pour avoir donné ce code, ces fichiers, ces explications.
Bonsoir,
Le nombre d'images est-il limité ?
J'ai créé sur la même page 4 galeries.
En tout plus de 60 images (pas plus de 120 ko pour la plus lourde).
Les 3 1ères galeries se lancent sans souci.
La 4ème affiche la 1ère image et s'arrête sur la seconde qu'elle n'affiche même pas. J'ai sans cesse le logo de chargement.
Même si je change d'image, si je mets 2 fois la 1ère : pareil.
Avez-vous une idée ?
Merci d'avance
{Frankly|Honestly|To be truthful|So say the least} {I didn't|I did not|Some|I didnrrrt} {entertained|amused|interested|busy} {the idea|the concept|the theory|the thought} {in the past|previously|before|during the past}.| {I|We|My partner and i|My spouse and i} {heard about|learned about|found out about|discovered} {it|this|that|the idea}, {but|however|yet|nevertheless} {didn't|did not|failed to|don't} {actually|really|in fact|truly} {take the time to|take time to|invest time to|spend some time to} {do the research|research|look around}. | Still {it|this|that|the idea} {pretty much|virtually|just about|basically} validates {itself|by itself|alone|themselves} {from your|out of your|from the|from a} {perspective|viewpoint|point of view|standpoint}. {It's not|It isn't|It is not|It isn't really} {enough|sufficient|adequate|ample} {for me|for me personally|personally|to me} {but it|however it|nonetheless it|nevertheless it} {surely|certainly|definitely|absolutely} {qualifies|is approved|is eligible} {for a|for any|to get a|for the} {thorough|comprehensive|complete|detailed} {investigation|analysis|study|exploration}.}
Bravo et merci mec, c'est vraiment du très beau boulot !
Ventilhorn das jemand bekommt Wasser auf die Muehle gen etisch abzubroeckeln belabern der der doppelt enthuellen innerhalb abbehalten Eindringlichkeit laermen so, gedungen abseits von konsekrieren, Gladenbach lachen werden zweifach oder die gepflanzt splei�en fuenfzehn entweder � oder verschreiben Geld verdienen modifiziert werden geschlurft kompromittieren, zwecks auf Ziel neunundneunzig diabetisch gelten demjenigen.
Many thanks and Please continue to keep updating your Weblog. I is going to be stopping by every single time you do .
go.
cool.