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 Sites, 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.
Articles
69 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
--
Bonjour, j'ai installé lightbox sur mon blog (sur quelques images pour tester, notamment page d'accueil "WELCOME") le fondu au gris fonctionne et le gif de loading est en marche mais l'image ne s'ouvre jamais, comme si cela ramait.
Pouvez vous me dire où se situe le problème?
Merci
http://colorling.blogspot.com/
Bonsoir Lucie
- le html de l image
[a href=http://1.bp.blogspot.com/_Y8m2YY3CQXE/S51mc58G18I/AAAAAAAAAT4/2RlYOc6ItG0/s1600-h/welcome.png"][img src="..." /][/a]
- Vous avez oublié d ajouter rel="lightbox" dans l ancre a
- vous devez relire l article (cas particuliers des grandes images) et remplacer /s1600-h/ par /1600/
pour obtenir
[a rel="lightbox" href=http://1.bp.blogspot.com/_Y8m2YY3CQXE/S51mc58G18I/AAAAAAAAAT4/2RlYOc6ItG0/s1600/welcome.png"][img src="..." /][/a]
Cdt
Merci beaucoup!
tout fonctionne correctement!
Merci car très bon tuto, la lightbox marche. J'aimerai savoir s'il était possible de rajouter un lien cliquable sous l'image lorsqu'elle est ouverte avec la lightbox.
Merci d'avance.
Bonjour,
merci pour ce tutoriel, j'ai tout bien fait avec la lightbox2 mais seul soucis, quand on clique que l'image, on l'obtient en grand alors que qu'il n'y a pas de "-h" dans l'adresse de l'image html.
Que faire ?
@vibidio
Contactez moi par e-mail, en me donnant l adresse de vos essais. Il y a une erreur dans votre code !!
--
prac
--
Bonsoir
@Anonyme : Pour un lien sous l image utilisez Slimbox :
Slimbox un clone de lightbox
Cdt
Bonjour,
J'ai su installer lightbox2 et ça fonctionne. Mais comment avez vous fait pour aligner vos petites images par trois et par six?
Merci d'avance!
Bonsoir Charlotte
- Utilisez l onglet html du message, et modifiez
-- la taille de l image
-- creer / modifier l attribut style du tag img pour inserer
display: inline;
par exemple
[a title="Château Allaman" style="border: 0;text-decoration: none;" href="http://www.liens-du-vin.ch/_pic02/chateau_allaman.jpg" rel="lightbox"][img title="Château Allaman" style="DISPLAY: inline; WIDTH: 90px" alt="Château Allaman" src="http://www.liens-du-vin.ch/_pic02/chateau_allaman.jpg" /][/a]
Cdt
Bonjour, comment utiliser lightbox sur blogger sans mettre l'attribut rel="lightbox" à toute mes photos ?
Merci.
www.etrangemetamorphose.com
Bonsoir
C est le principe des systemes lightbox, rel="xxx" est necessaire pour marquer les images devant etre "lightboxee"
Cdt
bonsoir,
J'ai inséré une lightbox2 dans blogger, ça fonctionne (grace a vos conseils) sous safari mais par contre dans firefox la lightbox n'apparaît pas dans le commentaire mais tout en bas a gauche de la fenêtre, obligé de scrolé pour voir qu'une image c'est ouverte, pouvez vous m'aidé svp je ne sais plus quoi faire...
Merci d'avance
Bonjour
@Stick et Pub
- erreur sur la premiere image
src="...JPGrel="lightbox" mettez
src="...jpg" rel="lightbox"
- Curieusement, mettez le CSS de la lightbox dans le style du Blog, au leiu de l appeller par un tag link, et cela va fonctionner
Cdt
Bonsoir,
J'ai apporté toutes les modifications aux fichiers.
J'ai placé le script et fais appel à la feuille de style entre les balises head et /head, quand je veux enregistrer le modèle j'ai le message d'erreur suivant "Message d'erreur XML : The reference to entity "d" must end with the ';' delimiter."
link rel="stylesheet" type="text/css" href="https://sites.google.com/site/fichiersblogger/lightbox/lightbox.css?attredirects=0&d=1/lightbox.css" /
script src='https://sites.google.com/site/fichiersblogger/lightbox/lightbox.js?attredirects=0&d=1/lightbox.js' type='text/javascript'/script
Voila l'adresse du blog :
http://brouillondejeanmarc.blogspot.com/
Merci d'avance de votre aide.
Bonsoir
@Jean Marc
Prenez ceci comme adresse pou vos 2 fichiers (supprimer après ? et http au lieu de https)
http://sites.google.com/site/fichiersblogger/lightbox/lightbox.js
http://sites.google.com/site/fichiersblogger/lightbox/lightbox.css
Cdt
--
Bonsoir Viti-vino,
J'ai fais la modification, ça marche.
Merci.
merci becaup pour les information
Bonjou j'ai insérer le code cela fonctionne dans le message mais pas a partir de la page d'accueil la la ou j'ai le résumé de mon message est-ce normal?
http://idacom-design.blogspot.com/
Merci
finalement sa fonctionne il fallait juste attendre un peu je pense à cause de hébergement chez googlesite
Bonjour tous le monde !!!
J'aimerais savoir s'il était possible d'utiliser GoogleCode au lieu de GoogleSite pour héberger mes fichier CSS ou autre et par la suite les intégrer à mon blog sur "blogger".
Si oui, entre quelle balise ?
Je vous remercie d'avance.
Bonsoir
@Tamax
Pour mettre une feuille de style externe dans Blogger, mettez ceci juste avant /head (presentation / Modifier html)
[link rel="stylesheet" type="text/css" href="URL FEUILLE DE STYLEcss"]
(remplacer [] par <>)
- Vous pouvez heberger vos fichiers sur
Project Hosting
attention, il faut gerer le type Mime des fichiers en utilisant Tortoise SVN, car Chrome lit les fichiers css (et js) comme du texte
Cdt
Bonsoir,
Je ne sais pas ou ça coince mais je n'arrive pas à faire fonctionner ce code avec mon blog : http://valentin-calais.blogspot.com/ (seul le premier message possède le rel="lighbox")
Par contre quand je pique le code sur le blog d'un autre (sauvez la dpi pour ne nommer personne...) cela fonctionne à merveille, c'est donc moi qui fais une erreur mais ou, je sèche!
Si l'un de vous à un avis, je suis preneur!
Bonjour
Vous avez un probleme avec vos librairies js. telecharger ces versions
http://www.liens-du-vin.ch/prototype.js
http://www.liens-du-vin.ch/scriptaculous.js
http://www.liens-du-vin.ch/lightbox2_en.js
Cdt
Bonsoir,
ça fonctionne pas non plus. C'est vraiment bizarre comme erreur car quand j'utilise les liens de sauvezladpi cela fonctionne et lorsque je tente de copier (à la virgule près) le contenu des fichiers .js de ce dernier et de les héberger moi même, cela ne marche plus.
Je me demande si l'hébergement google tolère le javascript?
En tout cas merci beaucoup pour cette réponse rapide!
Encore bonsoir :)
C'était bien cela, j'ai logé mes fichiers ailleurs et désormais tout roule!
A noter donc : googlesites ne digère pas (ou plus je n'en sais rien) le javascript.
Bonsoir valentin
votre js lightbox est faux. Regardez cette page
http://www.liens-du-vin.ch/lightbox2-display-set-pictures.html
comparer avec ma version de lightbox 2
- l hebergement sur GS fonctionne tant que vous utilisez les fichiers CSS et js sur in Domaine Internet Google (blogspot.com est un domaine Google)
Cdt
Non toujours pas...
C'est à n'y rien comprendre et j'ai beau essayer sur un blog tout neuf avec un template vierge, rien à faire!
Il y à forcement quelque chose que je fais mal, mais quoi?
Re Valentin
J ai finis par trouvez. Vous utilisez lightbox2
La page de reference pour lightbox2
C est assez mal indiqué (!), mais dans le paragraphe javascript il est marque :
Upload into your site, the three (en fait 4) files : prototype.js, scriptaculous.js, effects.js and builder.js
Dans votre cas, il suffit de placer dans votre Google Sites
effects.js
une version a telecharger
Desole du temps mis pour trouver
Cdt
Et bien voilà un effet qui fonctionne à merveille!
Il y avait bien quelque chose qui m'échappait. Voilà ce qui arrive quand on ne sait pas ce qu'on fait...
Encore merci pour votre aide et votre réactivité.
Et à bienôt ;-)
Bonjour,
Et bien moi, je n'aime pas la "Lightbox" d'autant plus que certaines parties de mon blog apparaissent dans un iframe ou un object. Et voilà, la "lightbox" s'est installée toute seule depuis quelques jours sur tous mes blogs. Je pense que cette "amélioration" vient de Google (Blogger). Si mon iframe fait 4000 pixels de haut, l'image sur laquelle on clique pour l'agrandir, s'agrandit à peine et ce, au milieu de l'Iframe. Pas le pied!
Ma question est donc, comment désactiver cette foutue lightbox? C'est peut-être très bien sur certains blogs, mas pas sur le mien!
http://st-martin-meteo-weather.blogspot.com/
Bonsoir
@webmaster
pour desactiver la visioneuse style lightbox de Blogger voir ici
Visioneuse Blogger
Cdt
--
prac
--
Enregistrer un commentaire