beste leden,
Voor een project van mij moet ik een foto album inbouwen. Daarvoor dacht ik lightbox te gaan gebruiken. Maar, nu zit ik met een probleem de foto´s zijn geknipt met een camera en zijn dus allemaal zo groot dat het niet op de pagina past. Helaas is mijn sterktste punt dan ook geen css om de een max-width te geven aan de foto's die geplaats worden
Nu heb ik geprobeerd op de width en height bij lightbox img op 600px te zetten, Maar, nu blijft de achtergrond nog wel gigantisch groot en de knoppen van close en next en prev. ook.
Wie zal me vrijwillig willen helpen?
voorbeeld:
Klik hier en kies dan een foto (het voorbeeld wat je zie is als de lightbox img op 500px staat. (height en width)
css:
PHP
#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;
}alvast bedankt,
Rick