Tom's Guide > Forum > Programmation > problème avec lightbox 2

problème avec lightbox 2

Forum Programmation : problème avec lightbox 2

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
myliam   18-01-2008 à 00:01:26

bonjour,

j'aimerais savoir comment réaliser ce genre de pop up pour montrer ses images que je vois sur pas mal de site :

http://letters-to-you.com/Content/ [...] ayouts.php

il faut cliquer sur une mini image pour voir en fait je voudrais le méme style avec un bouton pour fermer personnalisable et donc une pop up et avec le méme genre d'image pour l'attente


Message édité par myliam le 20-01-2008 à 14:59:31
Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
b0uh   18-01-2008 à 14:09:10
- 0 +

hello
ce que tu veux faire est en fait un script tres simple d'utilisation, ca s'appelle lightbox JS
ce n'est pas un système de pop up, donc change le titre de ton post - et mets "[Résolu]" en même temps ;)

il te faut qq notions d'html et css mais sinon c'est niveau débutant
télécharge l'ensemble des fichiers que tu uploadera plus tard sur ton serveur.http://ddata.over-blog.com/xxxyyy/ [...] ghtbox.zip
le zip contient 4 fichiers:
- lightbox.js: le fichier javascript essentiel qui fait tt le travail
- overlay.png: image de calque au dessus du site
- loading.gif: le gif animé qui donne le petit effet de chargement
- close.gif: l'image qui représente la croix pour fermer

tu peux personnaliser les images ou trouver d'autre ressources compatibles en te rendant sur le site du créateur:
http://www.huddletogether.com/projects/lightbox/


une fois que tout est dézippé et téléchargé, fait quelques modifs sur certains fichiers, ouvre le fichier lightbox.js avec le bloc note et modifie

Code :
  1. var loadingImage = 'le_chemin_de_ton_site/loading.gif';
  2. var closeButton = 'le_chemin_de_ton_site/close.gif';



et dans le fichier CSS ajoute ca:

Code :
  1. /*--------- Lightbox -----------*/
  2. #lightbox{
  3.     background-color:#eee;
  4.     padding: 10px;
  5.     border-bottom: 2px solid #666;
  6.     border-right: 2px solid #666;
  7. }
  9. #lightboxDetails{
  10.     font-size: 0.9em;
  11.     color: #555;
  12.     padding-top: 0.5em;
  13. }
  15. #closeButton{ top: 5px; right: 5px; }
  17. #lightboxCaption{ float: left; }
  19. #keyboardMsg{ float: right; }
  21. #lightbox img{ border: none; }
  23. #overlay img{ border: none; }
  25. #overlay{ background-image: url(chemin_de_ton_image/overlay.png); }
  27. * html #overlay{ /*Hack IE */
  28.     background-color: #000;
  29.     background-color: transparent;
  30.     background-image: url(blank.gif);
  31.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="chemin_de_ton_image/overlay.png", sizingMethod="scale" );
  32. }
  33. /*-------- fin lightbox -------*/




tu peux tout uploader!


derniers réglages: sur la page où tu veux que ce soit affiché tu ajoute entre les balises <head> et </head> le code

Code :
  1. <script type="text/javascript" src="XXX/lightbox.js"></script>



voila normalement tout est ok!
A+


Message édité par b0uh le 18-01-2008 à 14:15:36
Répondre à b0uh
myliam   20-01-2008 à 14:59:46
- 0 +

merci pour ta réponse enfait j'ai vu qu'il y avait une version 2 donc je l'ai installé mais j'ai des problèmes :

- soit mes images s'affichent tout en bas de mon iframe et dans mon iframe, on ne les voit pas entièrement et le fond de mon site vient se mettre dans mon iframe.

- soit elles s'affichent dans une nouvelle page dans mon iframe et on ne les voit pas complétement.

- mon style CSS pour ma police ne s'applique plus mon écriture est devenu bleu.

- je n'ai pas le fond grisée ni le dessin d'attente de lightbox lorsque je clique sur une image mercii de m'aider.

ça fait 2 heures que j'essaye mais je n'arrive à rien --'


Message édité par myliam le 20-01-2008 à 15:07:04
Répondre à myliam
myliam   20-01-2008 à 15:20:57
- 0 +

que dois - je mettre pour que mon image s'affiche sur toute ma page cible _parent et non dans mon iframe ?

mercii d'avance


Message édité par myliam le 20-01-2008 à 17:59:18
Répondre à myliam
b0uh   20-01-2008 à 22:57:09
- 0 +

est ce que tu as bien changé l'adresse de ton image
ici par exemple:
(src="http://www.monsite.com/chemin_de_ton_image/overlay.png"

est-ce que tu as bien fait ca à chaque fois pour tous les fichiers?
toutes les url à modifier dans le fichier lightbox.js sont : loading.gif, close.gif

et les url à modifier dans le CSS sont: overlay.png

as tu bien uploadé ton fichier CSS à l'url où c'est marqué dans le fichier lighbox.js? as-tu sur ta page principale (ou lightbox es situé) fait un lien vers ton fichier CSS pour que les critères soient modifiées?

dis-moi tout :D


Message édité par b0uh le 20-01-2008 à 23:03:25
Répondre à b0uh
myliam   20-01-2008 à 23:58:07
- 0 +

oui j'ai regardé tout s'affiche bien enfait le seul truc qui ne va pas c'est que l'image s'ouvre dans mon iframe est non sur la page entière. Je vois pas comment faire ?

Répondre à myliam
b0uh   23-01-2008 à 00:07:44
- 0 +

hello j'ai lu ton code et il faudrait mettre à chaque image:

le code

Code :
  1. rel="lightbox"



ici c'est pas mis donc ca ne marche pas:
<a href="headers/h16.jpg" style="cursor: e-resize;" target="_blank"><img src="headers/h16m.jpg"></a>
par contre sur la dernière image:
<a href="images/h18.jpg" rel="lightbox" target="_parent" title="Rihanna"><img src="images/h18m.jpg"></a>

voila essaye et dis-moi :)
je ne vois que ca normalement ce sera bon après.
tiens moi au jus
A+

Répondre à b0uh
myliam   23-01-2008 à 21:01:08
- 0 +

je sais lol mais comme ca marche pas je l'ai mis juste sur une la dernière tu as regardé sur mon site ??

Répondre à myliam
b0uh   24-01-2008 à 13:57:56
- 0 +

oui je vois que ca marche
pas toi?

Répondre à b0uh
myliam   02-02-2008 à 14:26:09
- 0 +

non ça ne marche pas ça s'ouvre dans mon iframe --

Répondre à myliam
neomik   14-03-2008 à 16:10:34
- 0 +

Bonjour a tous,

Désolé de ressortir un vieux sujet mais je ne souhaité pas créer un nouveaux post vu que le problème soulevé par Myliam est exactement le même que le mien.

J'ai une Iframe qui comporte des images et lorsque je clique dessus je souhaiterais que lightbox s'ouvre sur ma page _parent et non uniquement sur ma frame car du coup on perd tout l'intéret et le plaisir de voir l'image s'ouvrir sur la page entiere..

J'espere avoir été clair et j'attend avec impatience vos réponses car je ne sais plus comment faire...

Merci.

Répondre à neomik
jc67   08-10-2009 à 10:34:51
- 0 +

salut j'ai le meme problème est-ce que quelqu'un a trouvé ?
merci

JC

Répondre à jc67
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > problème avec lightbox 2
Aller à :

Il y a 2503 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,416 secondes
Liens