Se connecter avec
S'enregistrer | Connectez-vous

problème avec lightbox 2

Dernière réponse : dans Programmation
Lassé par la pub ? Créez un compte

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/0/08/58/81/outils/lightbox.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

  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:
  1. /*--------- Lightbox -----------*/
  2. #lightbox{
  3.     background-color:#eee;
  4.     padding: 10px;
  5.     border-bottom: 2px solid #666;
  6.     border-right: 2px solid #666;
  7. }
  8.  
  9. #lightboxDetails{
  10.     font-size: 0.9em;
  11.     color: #555;
  12.     padding-top: 0.5em;
  13. }
  14.  
  15. #closeButton{ top: 5px; right: 5px; }
  16.  
  17. #lightboxCaption{ float: left; }
  18.  
  19. #keyboardMsg{ float: right; }
  20.  
  21. #lightbox img{ border: none; }
  22.  
  23. #overlay img{ border: none; }
  24.  
  25. #overlay{ background-image: url(chemin_de_ton_image/overlay.png); }
  26.  
  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 
  1. <script type="text/javascript" src="XXX/lightbox.js"></script>


voila normalement tout est ok!
A+

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 --'

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 

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

le 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+

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.
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde