lightbox probleem!

[DominiqueMaerte]

Hoi iedereen,

Ik ben me aan het verdiepen in lightbox en het lukt me vrij goed. Alleen krijg ik de pijltjes next en prev niet te zien als ik met mijn muis over de foto ga.

Hierbij mijn CSS:
#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;
background-image: url(../images/loading.gif);
}
#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;
background-image: url(../images/prevlabel.gif);
}
#nextLink {
right: 0;
float: right;
background-image: url(../images/nextlabel.gif);
}
#prevLink:hover, #prevLink:visited:hover {
background-image: url(../images/prevlabel.gif);
background-repeat: no-repeat;
background-position: left 15%;
}
#nextLink:hover, #nextLink:visited:hover {
background-image: url(../images/nextlabel.gif);
background-repeat: no-repeat;
background-position: right 15%;
}

#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; }


Hopelijk kan iemand me verder helpen...

 

[csshunter]

'ns even kijken...

• Zitten de prev- en next-pijltjes in het goede mapje images op de server geüpload, en kan je ze zien als je daar direct naar toe gaat?
• Zijn prevlabel.gif en nextlabel.gif op de server precies hetzelfde geschreven (met alleen kleine letters)?
• Het hangt er ook van af in welk mapje het css-bestand staat t.o.v. het mapje /images/. Als het een mapje /css/ is op gelijke diepte als het mapje /images/, dan zou het goed moeten gaan met url(../images/prevlabel.gif).
• Maar als het stylesheet meteen in de "root" van de site zit, dan zou het url(images/prevlabel.gif) moeten zijn.
• Om van alles af te zijn, kan je ook de absolute URL in de verwijzing gebruiken:
  

  background-image: url(http://www.deSiteWaarHetOmGaat.be/images/prevlabel.gif);

Als dit niet lukt, heb je dan een link?

Met vriendelijke groet,
CSShunter

 

[katootje123]

Hallo dan!

Ik had...met de nadruk op HAD...ook een probleem met de prev en next, maar dankzij csshunter ben ik eruit gekomen!
*dat je je zoooo kunt verkijken op een paar puntjes*