Jump to content

Problème LightBox

Justine71

By Justine71
in AjaX et JavaScript

 Share

Recommended Posts

Justine71

Justine71

Posted
Posted

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

Link to comment
Share on other sites
SStephane

SStephane

Posted
Posted

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

Link to comment
Share on other sites
Sarc

Sarc

Posted
Posted

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

Link to comment
Share on other sites
Justine71

Justine71

Posted
  • Author
Posted

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

Link to comment
Share on other sites
SStephane

SStephane

Posted
Posted

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

Link to comment
Share on other sites
Justine71

Justine71

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Justine71

Justine71

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Justine71

Justine71

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Dadou

Dadou

Posted
Posted

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

Link to comment
Share on other sites
SStephane

SStephane

Posted
Posted

ç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 :)

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share
Go to topic listing
×
×
  • Create New...