Problème LightBox

Justine71 · 6 Novembre 2009

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

SStephane · 6 Novembre 2009

Hello, tes fichiers js sur ton serveur semblent un peu à l'amende, regarde les : h*tp://www.kinouche.com/js/prototype.js

Justine71 · 7 Novembre 2009

Qu'est ce que tu entends par là ? =)

Que dois-je changer dans ces codes ?

Merci beaucoup de ta réponse, et bon week end =D

SStephane · 7 Novembre 2009

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

Sarc · 7 Novembre 2009

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

Justine71 · 8 Novembre 2009

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

SStephane · 8 Novembre 2009

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()

Justine71 · 8 Novembre 2009

Hum... Je m'excuse, je ne connais pas grand chose en javascript....

je ne trouve pas les éléments à supprimer dans prototype.js

Merci d'avance =)

SStephane · 8 Novembre 2009

C'est juste au début de ton fichier, supprime simplement du début au premier "document.observe()", et ça devrait aller

**captain_torche** · 8 Novembre 2009

Ce n'est pas dans le fichier prototype, mais dans le fichier lightbox.js

Et, plutôt que de supprimer ceci, il suffit d'ajouter "/*" en tout début de fichier.

Justine71 · 8 Novembre 2009

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

SStephane · 8 Novembre 2009

Tu peux essayer de remplacer par ces fichiers en pièce jointe (je n'ai pas testé et suis partir de ce que tu as en ligne)

lightbox.zip

Justine71 · 8 Novembre 2009

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

**Dadou** · 8 Novembre 2009

C'est ta photo qui est trop grande, faut la réduire si tu ne veux pas de scrollbar

Justine71 · 8 Novembre 2009

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

**Dadou** · 8 Novembre 2009

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

Justine71 · 8 Novembre 2009

J'ai très bien compris. Mon image fait 360px de large, je ne peux pas faire moins, sinon autant laisser la miniature seule.

Le problème demeure le même

SStephane · 8 Novembre 2009

ç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

Justine71 · 8 Novembre 2009

Mercii SStephane =D en effet ca marche super bien avec safari, mais pas avec IE....

Hum, quelqu'un à une autre idée ? J'ai fais des recherches sur le net, et rien de concluant...

Connexion

Problème LightBox

Sujets conseillés

Justine71

SStephane

Justine71

SStephane

Sarc

Justine71

SStephane

Justine71

SStephane

captain_torche

Justine71

SStephane

Justine71

Dadou

Justine71

Dadou

Justine71

SStephane

Justine71

Veuillez vous connecter pour commenter

Parcourir

Activité