div onbepaalde hoogte en breedte in het midden van de pagina

Door christian k op 30-04-2014 13:22

1.895 views

hallo allemaal,

Ik zou graag willen dat als je op een foto klikt dat hij groot in het midden van de pagina komt
de pagina word dat zwart dit is de code van het zwarte vlak:


.black_overlay 
{
     display: none;
     position: absolute;
     top: 0%;
     left: 0%;
     width: 100%;
     height: 100%;
     background-color: black;
     z-index: 1001;
     -moz-opacity: 0.8;
     opacity: .80;
     filter: alpha(opacity=80);
}

daarin komt dan de div met het plaatje.
maar het probleem is dat je voor een div in het midden van de pagina een hoogte en breedte moet geven
maar die heb je niet van elk plaatje dus gebruik ik de max-height en max-width maar hoe krijg je dan een plaatje in het midden van de pagina? want je moet dan left: en top: weten maar die weet ik niet bij elk plaatje

alvast bedankt voor de hulp

Mich

30-04-2014 14:15

Kijk eens naar hoe Lightbox en Fancybox e.d. dit doen. Zij maken gebruik van Javascript om de positie te bepalen. PHP zou ook de image size kunnen ophalen.

Om vervolgens een div in het midden van je scherm te krijgen kun je de breedte van de image delen door 2 en dat gebruik als margin-left.
Stel dat je plaatje 300px breed is:


position:fixed;
top:0;
left:50%;
margin-left:-150px;
width:300px;

christian k

30-04-2014 15:01 gewijzigd op 30-04-2014 15:06

oke maar hoe kun je met js dan de breedte en hoogte ophalen?
php is te veel werk want dan moet ik mijn systeem weer ombouwen.

- SanThe -

30-04-2014 15:10

http://www.w3schools.com/js/js_window_screen.asp

christian k

30-04-2014 15:11

hoe kun je daar de breedte van een foto mee berekenen? dat is toch alleen de px van de window
of zit ik nu helemaal fout?

Mich

30-04-2014 15:28

je kunt met window/document width/height de grootte van je window of document ophalen. Voor dit geval zou ik window aanraden.
Afmetingen van een afbeelding kan bijvoorbeeld met


var img = new Image();
img.src = 'http://www.phphulp.nl/img/phphulp-logo.jpg';
img.onload = function()
{
	var width = this.width;
	var height = this.height;
	alert(width + "x" + height);
}

Ik heb hier een klein voorbeeldje gemaakt

christian k

30-04-2014 16:23 gewijzigd op 30-04-2014 17:09

het werkt maar stel dat ik een max-width en max-height in wil stellen hoe moet ik dat dan doen? want bij een kleine afbeelding werkt het goed en mooi maar als ik een hele grote afbeelding heb vult hij het hele scherm dus ik zie de randen van de div en de overlay niet meer en dan kan je hem niet meer weg klikken.

Reageren

Inloggen om te reageren