Aller au contenu

Problème LightBox


Justine71

Sujets conseillés

Bonjour à tous :)

Alors voilà, je tente d'installer une lightbox tout simple sur mon site, c'est a dire juste une image seule que l'on peut agrandir, mais ça ne fonctionne pas comme je l'entend.... :)

Lorsqu'on clique sur la miniature, on attérit sur une page de mon site vierge avec seulement la photo en grand....

Voici la page où j'essaye d'installer la lightbox :
/>http://www.kinouche.com/brouillonsbracelet.htm

J'ai modifier mon code css en incluant le leur :

body
{
background-color:#000000;
font-size: 12px;
color: #FFFFFF;
font-family: arial;
text-indent: 15px;
list-style-type: circle;
margin: 0 ;
padding: 0 ;
}

#b
{
color: #960049;
}

#i
{
color: #3d3a3a;
}

#haut
{
margin: 0 auto;
text-align: center;
}

#conteneur
{
width:1026px;
margin: 0 auto ;
padding: 10px 0px;
text-align: center;
}

#boutonhaut
{
margin-top: 20px;
text-align: center;
}

#boutonhaut a {
margin: 0px 5px;
}

#boutonhaut a img{
border: none;
}

#gauche {
height:297px;
width:221px;
margin-top: 10px;
margin-left:0px;
background-image:url(gauche.jpg);
float: left;
}

#droit {
height:300px;
width:222px;
margin-top: 10px;
background-image:url(droite.jpg);
float: right;
}
#centre {

height: 295px;
width: 577px;
margin-top: 10px;
overflow: auto;
background-image:url(contenu.jpg);
}

#boutonbas {
height: 71px;
margin-top: 10px;
text-align: center;
}

#boutonbas a {
margin: 0px 5px;
}

#boutonbas a img{
border: none;
}

a:link {
font-family:arial;
font-size:100%;
color: #FFFFFF;
background-color:transparent;
text-decoration:none;
}

a:visited {
font-family:arial;
font-size:100%;
color: #FFFFFF;
background-color:transparent;
text-decoration:none;
}

a:hover {
font-family:arial;
font-size:100%;
color: #FFFFFF;
background-color:transparent;
text-decoration:none;
}


#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


J'ai tout importer les dossier comme expliqué dans la racine de mon site....

J'ai du faire quelque chose de travers, mais quoi ? =)

Merci d'avance et bonne journée :)

Lien vers le commentaire
Partager sur d’autres sites

Ouvre les dans ton navigateur, je ne peux pas te dire ce qui ne va pas avec, je ne comprends pas la calligraphie :)

Je ne connais pas ta lightbox prototype mais d'après la doc, tu as fait ce qu'il fallait au niveau du HTML, et si tes js deviennent corrects, ça devrait fonctionner

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

En effet, quand on regarde avec Firebug, tes scripts apparaissent en Chinois... Dans les erreurs Javascript, ils nous mettent "Illegal character", parce que le navigateur a l'air de le lire en Chinois aussi. C'est bizarre, avec quoi sont enregistrés tes fichiers ? Il semble y avoir un entête qui n'est pas bon...

Lien vers le commentaire
Partager sur d’autres sites

Bonjour, merci beaucoup de vos réponses !

Alors j'ai essayer de ré-enregistrer mes fichiers js en modifiant seulement cette info : c'était enregistré en Occidental ( mac os roman ) et j'ai modifié cela en " UTF-16 "

mais rien n'y fais, ça ne marche toujours pas....

Lien vers le commentaire
Partager sur d’autres sites

Ta as un souci avec ton fichier prototype.js

Commente ou supprime :

    
Table of Contents
-----------------
Configuration

Lightbox Class Declaration
- initialize()
- updateImageList()
- start()
- changeImage()
- resizeImageContainer()
- showImage()
- updateDetails()
- updateNav()
- enableKeyboardNav()
- disableKeyboardNav()
- keyboardAction()
- preloadNeighborImages()
- end()

Function Calls
- document.observe()

Lien vers le commentaire
Partager sur d’autres sites

Merci pour vos reponses, alors je récapitule ce que j'ai fais :

dans le fichier lightbox.js j'ai tout supprimer du debut jusqu'a "document.observe()" ce qui fais que mon document commence par : */

// -----------------------------------------------------------------------------------

//

// Configurationl

//

LightboxOptions = Object.extend({

Et pour prototype.js j'ai rajouté /* en debut de fichier....

Mais rien n'y fais, cela ne marche toujours pas...

Lien vers le commentaire
Partager sur d’autres sites

Super ! Merci infiniment ! ma lightbox marche grâce a toi =D

Alors il y a juste un petit soucis lorsqu'elle s'ouvre, cela nécessite une scrollbar horizontale.... alors je ne sais pas si il faut modifier la css ou autre chose :)

c'est toujours a cette adresse :
/>http://www.kinouche.com/brouillonsbracelet.htm

Merci encore =D

Lien vers le commentaire
Partager sur d’autres sites

Alors en fait la scrollbar n'est pas pour l'image mais pour la partie du bas avec le "close"

J'ai testé sur cette page, sur la premiere image, tu pourra voir qu'elle est assez petite
/>http://www.kinouche.com/news.htm

Merci pour toute cette aide, je suis sure que grave à vous tous je vais arriver à avoir une belle lightbox =D

Lien vers le commentaire
Partager sur d’autres sites

Tu n'as pas compris, si tu as une scrollbar, c'est parce que la lightbox s'adapte aux dimension de ton image, et donc si tu en a une en bas c'est que ton image est trop large

Lien vers le commentaire
Partager sur d’autres sites

ça vient probablement d'ailleurs, mais pour régler ton souci, tu peux faire une modif dans la css de la lightbox : (je pense néanmoins que ta feuille de style doit être un peu dérangeante pour ton truc, cela dit je dis ça vite fait)


#lightbox img {
height:auto;
margin:0 0 0 -15px;
padding:0;
width:auto;
}

ça m'étonnerait que ça fonctionne sur ie<7, mais ça règlera l'apparition de la scrollbar :)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...