lightbox

[arawolf]

Ik kan maar niet vinden hoe ik de foto's hoger moet laten verschijnen. Even verduidelijken. Mijn fotoalbum verschijnt nu eerder laag op de pagina, kan ik dat eveneens hoger van de top rand laten verschijnen. Ik heb gezocht in de css maar vind het niet

@import url("opmaak.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; }
#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:none; }

 

[Icemar]

Heb je een online voorbeeld ?

 

[arawolf]

ja, bv www.timvanhaelemeersch.be/realistaties.html

nu krijg ik bij sommige scheremen dat de foto eerder laag ontvouwd. Op mijn scherm ( groot beeld ) niet, wel op een kleinere laptop. Als is de foto wat groter krijg en hem bv op 10 px van de rand laat open gaan zal ik veel ruimte winnen.

greoeten en alvast bedankt

 

[Quit]

ja, bv www.timvanhaelemeersch.be/realistaties.html

Is een dead link

 

[arawolf]

Schrijwerk - Tim Vanhaelemeersch

 

[Ivan]

Mooi gedaan hier als ik het test vind ik het goed.

 

[Icemar]

Om de overlayer net onder de top te zetten moet je de lightbox.js openen en dan moet je deze regel vervangen

        Deze vervangen door 
        var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
        Deze dan komt deze 10px van de top af te staan
        var lightboxTop = "10";

Suc6 er mee

 

[arawolf]

perfect, bedankt voor zoals altijd snelle en efficiente reactie:duimop: