div onbepaalde hoogte en breedte in het midden van de pagina

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Christian k

christian k

30/04/2014 13:22:50
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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
 
PHP hulp

PHP hulp

18/12/2024 12:06:36
 
Michael -

Michael -

30/04/2014 14:15:11
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
position:fixed;
top:0;
left:50%;
margin-left:-150px;
width:300px;
 
Christian k

christian k

30/04/2014 15:01:53
Quote Anchor link
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.
Gewijzigd op 30/04/2014 15:06:39 door christian k
 
- SanThe -

- SanThe -

30/04/2014 15:10:02
 
Christian k

christian k

30/04/2014 15:11:44
Quote Anchor link
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?
 
Michael -

Michael -

30/04/2014 15:28:27
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
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

christian k

30/04/2014 16:23:26
Quote Anchor link
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.
Gewijzigd op 30/04/2014 17:09:45 door christian k
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.