lightbox.js est un script de Lokesh Dhakar permettant d'afficher une image dans la page courante, avec un effet de transparence.
Un exemple, à partir d'une vignette ou d'un lien, affichons l'image agrandie à l'intérieur de la page courante :
Les éléments à télécharger
Utiliser un hébergeur comme Google Page Creator, pour enregistrer à partir du site original :
Le script : lightbox.js
La feuille de style : lightbox.css
Une animation chargement en cours : loading.gif
L'icône fermer la fenêtre : close.gif
L'image utilisée pour l'effet de transparence (opacité 80 %) : overlay.png
Les modifications à apporter
Complèter l'adresse de 2 images dans le script (*URL* est à remplacer par le chemin de votre hébergement) :
var loadingImage = '*URL*/loading.gif';
var closeButton = '*URL*/close.gif';
De même, donner l'adresse de l'image de fond, dans la feuille de style (l'image blank.gif n'existe pas, c'est un leurre pour assurer le traitement correct de la transparence des fichiers PNG sous IE) :
#overlay {
background-image: url(*URL*/overlay.png) }
* HTML #overlay {
background-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src="*URL*/overlay.png", sizingMethod="scale");}
Pour configurer le conteneur de l'image, il faut modifier l'id lightbox :
#lightbox /*style du conteneur */
{
border-right: #666 2px solid; /* la bordure du conteneur */
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: #666 2px solid;
background-color: #eee; /* la couleur du conteneur */
}
L'utilisation avec Blogger
Pour utiliser lightbox dans un seul post, ajouter au début du post l'appel au script :
<script src='*URL*/lightbox.js' type='text/javascript'></script>
Placer ce script entre les balise <head> et </head> si lightbox doit être utilisé dans plusieurs posts.
De même, entre les balises <head> et </head>, faire l'appel à la feuille de style destinée à configurer l'affichage de l'image :
<link rel="stylesheet" type="text/css" href="*URL*/lightbox.css" />
L'appel d'une image avec l'effet lightbox se fait simplement en ajoutant rel="lightbox" dans l'ancre :
<a href="URL de l'image à afficher" title="titre image" rel="lightbox">le lien pour l'image à afficher ou un tag <img> avec une vignette</a>
Le cas particulier des grandes images
Si l'ancre contient l'adresse d'une grande image (cas fréquent sur Blogger), l'adresse est du type :
<a href="http://bpn.blogger.com/.../.../
.../s1600-h/NOM_IMAGE.jpg" rel="lightbox"...>
L'insertion de rel="lightbox" ne fonctionnera pas ! Le répertoire s1600-h contient en effet des pages html avec l'image à afficher, et non pas une image en tant que telle. Il faut remplacer le nom du répertoire à utiliser :
<a href="http://bpn.blogger.com/.../.../
.../s1600/NOM_IMAGE.jpg" rel="lightbox" ...>
Un exemple
lightbox 2 : Afficher un ensemble d'images
La version 2, du même auteur, utilise le Framework Prototype et la bibliothèque Scriptaculous. Si elle autorise des effets graphiques plus performants, elle impose néanmoins de charger sur les pages qui utilisent lightbox2, plus de 50K de code. Les images sont appelées en utilisant la technologie AJAX.
Le principal avantage de cette version réside dans la possibilité d'afficher un ensemble d'images.
Sauvez la DPI a réalisé une version française (des images gif avec les textes en français). Un grand merci donc, de mettre à notre disposition un fichier *.zip complet.
Plus d'informations
Une explication plus complète sur mon site : Display your Pictures with Lightbox.
Un ensemble d'images affiché avec la version 2.
Un clone de lightbox, slimbox
La série complète des photos (la noblesse des vins suisses) présentée avec un slideshow
Les article originaux : la version 1 de lightbox.js et la version 2. Slimbox, un clone de lightbox.
Messages
38 commentaires:
j'ai un problème : cela ne marche pas !!!
voici mon exemple http://sauvezdpi.blogspot.com/2007/07/dpis-height.html
j'ai créé tous les fichier à cette adresse http://sauvez.dpi.googlepages.com/
en modifiant bien les fichiers css et js mais je ne trouve pas là où ça cloche.
Je serai très heureux d'une petite aide
Merci d'avance
Bonsoir
2 caractères à enlever et tout va marcher !!
votre lien : a rel="lightbox" ...
href=".../s1600-h/DPIS8.jpg" appel en realité (c est le repertoire s1600-h qui l indique) une page htm contenant l image
il suffit de remplacer le href par
href=".../s1600/DPIS8.jpg
(supprimer le -h) pour faire l appel à l image
ET VOILA
Bonne nuit
Merci, ça marche !!!
PS : Tu qui est de Suisse, tu viens d'aider un Haut-Savoyard exilé à Paris
L effet lightbox rend bien sur ton site. Bravo
Et tous mes voeux pour la DPI, ah ces francais contestataires ...
Je suis maintenant passé à lightbox2 et je l'ai francisé.
Tu peux trouver les fichier dans un .zip à cette adresse http://sauvez.dpi.googlepages.com si cela t'intéresse.
Merci La Savoie !!
J'ai complèté l'article et fait un lien vers ta page sur Google Page.
Désolé du retard. J'ai fait l'essai sous GPC ici
lightbox 2 - GPC
Bonne soirée et encore vifs remerciements.
Bonsoir,
Je ne sais pas si ce message sera lu...
En fait je voulais savoir si dans ce type de Lightbox on pouvait faire défiler le diaporama à partir d'une image principale au début dans la page HTML et ensuite faire défiler les images une fois la Lightbox lancée, avec des boutons précédent / suivant ?
A bientôt,
B
Bonsoir,
Je ne sais pas si ce message sera lu...
En fait je voulais savoir si dans ce type de Lightbox on pouvait faire défiler le diaporama à partir d'une image principale au début dans la page HTML et ensuite faire défiler les images une fois la Lightbox lancée, avec des boutons précédent / suivant ?
A bientôt,
B
Bonsoir Blandine
C est justemment ce que fait la version 2 de lightbox, afficher un ensemble d images, on passe de l une a l autre en placant le curseur sur le bord gauche ou droit
voir ici la traduction et plus d explications
Bonjour,
j'aurais besoin d'un pti coup de main,
j'ai telechargé le document, dézipper l'ensemble apporter les modifs, crée une pages google sites j'i ai chargé les .gif et autre fichiers malheureusement le .js google sites n'en veut pas... comment faire?
merci d'avance
Bonjour,
Merci pour le tutorial !
J'ai hate qu'il marche chez moi.
En attendant, j'ai un petit soucis, quand je met mon code (que je ne peut pas copier/coller dans ce commentaire) dans le HEAD
J'obtiens :
Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
Message d'erreur XML : The element type "link" must be terminated by the matching end-tag "".
Pourtant, je suis sur de la syntaxe !
Avez-vous déjà rencontré ce probleme ?
Merci d'avance.
Voila le lien du blog :
http://souriy4.blogspot.com/
Bonsoir Souriya
Vous avez raison, j ai corrigé le blog. La balise link doir être fermée, en strict xml. (elle se termine par />
vous ne devriez plus avoir le message
Bonne semaine
Bon j'ai testé la lightbox mais hélas je n'arrive pas à faire fonctionner le truc!!! Un peu d'aide??? Please.
Bonsoir Balsan Family
Il me faut l adresse de vos essais pour vous aider !!
(l URL du blog)
Bonne soirée
Oups, j'ai oublié effectivement de mettre l'adresse:
http://essaidebloglaurent.blogspot.com/
Encore merci!!!
p.s: le GPC n'existant plus j'ai hébergé les fichiers sur dl.free.fr
Bonsoir
- les adresses free ne donnent pas le fichier mais la page de telechargement !!!
- le rel="lightbox" se met dans le tag a et pas dans le tag img
- la modif de lightbox.js est fausse
fileLoadingImage = 'http://dl.free.fr/mSsJgjg8y/loading.gif',
fileBottomNavCloseImage = 'http://dl.free.fr/m4Ormce4g/closelabel.gif'
Il manque apostrophe devant nom du fichier
Bon courage
Merci pour ce superbe tutoriel.
Une petite astuce pour ceux qui, comme moi, ont des animations flash dans la page genre lecteur youtube ou deezer.
La lightbox apparaît derrière le lecteur youtube et est donc masquée car les animations flash se placent automatiquement au dessus de tout le reste.
Inutile de jouer avec le css et z-index, ça ne marche pas.
Pour placer le lecteur flash derrière la lightbox, une petite retouche du code du lecteur flash suffit.
ajouter <param name="wmode" value="opaque"> au tag OBJECT, et wmode="opaque" au tag EMBED
Demo ici http://heavymeetal.blogspot.com/2009/01/sammy-hagar-cosmic-universal-fashion.html. Placez le lecteur youtube au milieu de la fenêtre et cliquez sur la pochette de l'album. La lightbox apparaît au dessus.
Et voilà
Bon j'ai réussi à installer la lightbox aprés de multiples essais et maintenant je cherche le même effet pour les vidéos mais là je reste sec. Cela existe t-il pour blogger?
Bonsoir
Bonne année 2009 et bravo pour la lightbox
Pour les videos (seulement quelques formats) c est ici
Videobox
j ai qq doutes sur la qualité du code. A essayer
Bonne soirée
Bonsoir,
J'ai installé la lightbox 2.4... malheureusement, quand je clique sur l'image, elle s'agrandit sur une autre page au lieu de faire l'animation. Je désespère... auriez-vous une idée? voici le lien : http://www.objectifcuisin.ch/realisations%20entreprise/real%20entr.html
merci et bonne soirée
Bonsoir tsarinka
Verifier le chemin d acces aux fichiers !!
css/lightbox.css
js/prototype.js
js/scriptaculous.js?load=effects,builder
js/lightbox.js
ne sont pas sous
http://www.objectifcuisin.ch/realisations%20entreprise/
--
Bonsoir Viti-vino,
Tout d'abord merci pour votre aide :-) Je suis une débutante et...
J'avoue que je ne suis pas sûre de bien comprendre... je dois placer le dossier lightbox dans le dossier entreprise? ou changer les liens sur les pages que vous m'avez indiquées?
Encore merci!
Pour tsarinka
Je vous repond sur l adresse bluewin du site, comme celui ci n est pas heberge sur blogger
Ou ecrivez moi a mon adresse gmail
bonne soiree
bonjour je viens de crée un blog sur blogger et je souhaiterais y installer une lightbox pour mes images mais voila apres avoir consulté tous les tutos et autres (j'ai tout essayé) mais malheureusement je n'y arrive pas, alors si quelqu'un pourrais me donner un petit coup de main, je lui en serais grandement reconnaissant. Pour vous aider voici l'adresse de mon blog: http://most-sexy-wonderland.blogspot.com
Merci d'avance
Bonsoir
Je m'affaire avec l'installation de LightBox, mais rien n'y fait.
l'adresse de mon blog test
http://ecig-test.blogspot.com/
tous les liens renvoient vers le blog "officiel".
c'est le post test avec l'image http bleue qui me sert d'essais
Merci à Tous
Bonjour ecigarette
- Votre premier link lightbox, c est lightbox.css je pense, et pas lightbox.js
- dans lightbox.js
var fileLoadingImage = "http://Ecigaretteinfo.fileave.com/lightbox/loading.gif;
manque guillemet de fin
......loading.gif";
bonne soirée
ne fonctionne pas sur le mien...
www.foxprime.blogspot.com
Bonsoir Fox
- une erreur sur le premier trailer d Avatar
rel="lightbox"imageanchor="1"
espace avant imageanchor
- rel="lightbox" uniquement dans le tag anchor (a)
- pour mettre en arriere plan les flash
object ... wmode=transparent
et [param name=wmode value=transparent]
y'a du mieux merci, mais quand la page n'est pas finie de charger et qu'on clique sur une image elle s'ouvre de manière classique sans passer par le script, moyen de résoudre ça? Pas moyen de faire passer les images par dessus les player Youtube de la sidebar... Je continue d'étudier la question.
Bonsoir
Passez à lightbox2 pour la question du clic des le debut du chargement
Plus d info ici
Lightbox 2
@fox
Voila le code du dailymotion demineurs pour que ca passe, faite de meme avec youtube
test-fox
merci beaucoup ça marche parfaitement et l'effet est plus sympa sur le lightbox2. Quant au problème des vidéos par dessus je l'avais régler de moi-même.
Merci encore pour tout le temps consacré, mon blog commence à ressembler à quelque chose!
Super tuto ! Ça marche très bien.
Juste une question : Google Page Creator va bientôt migrer dans Google Sites et ce dernier n'accepte pas le Javascript et le CSS.
Connaissez-vous une autre adresse pour uploader ses fichiers ?
Merci
@anonyme
- Depuis la derniere mise a jour de Google Sites, il est possible de mettre dans un File Cabinet des fichiers css ou js
- Ils sont utilisables seulement sur un Domaine Google, un blog de Blogger par exemple !!! Pour les autres domaines (monsite.com par exemple) GS reagit comme un serveur distant. Donc si votre lightbox est sur blogspot.com, c est bon !!
Trucs et astuces pour Google Sites
Salut
http://www.lesgorgesduverdon.fr/test.html
J'ai un petit soucis sur slimbox2 qd vs cliquez sur la première foto a gauche elle s'affiche en grand on dirait qu'il faut la rédimensionner pourtant on dirait que slimbox2 se charge correctement
Une idée :)
Bonjour
Après de nombreuses recherches je me décide à vous embeter. J'ai installé une lightbox sur mon site, mais je n'arrive pas à faire que à partir d'une seule vignette, j'ai plusieurs pages en défilement. Au secours!
Merci d'avance, Julie
Bonjour
Toutes mes recherches ont été infructueuses. J'ai installé une lightbox sur mon site, et je voudrais que à partir d'une vignette, plusieurs images défilent.
Comment dois-je formuler mon code html?
Merci d'avance, Julie
Bonsoir Julie
Ecrivez moi sur mon mail et n oublier pas de me donner l adresse de votre blog !
Cdt
--
Enregistrer un commentaire