Foto popup via javascript

Status
Niet open voor verdere reacties.
E

Eibers

Gebruiker
Lid geworden
11 dec 2014
Berichten
82
Ik werk regelmatig met php, maar weinig met javascript.
Vandaar een beginnersvraag.
Hoe krijg ik met Javascript een pop-up foto op de goede plaats?
Ik gebruik de volgende code:

Code: 
<div style=Position: absolute; top: 16%; left: 66%; width: 31%;>
<?php
echo "<img src='$pad' style='width: 60%; padding-bottom: 5px; border-ratius: 15px;' onmouseover='bigImg(this)' onmouseout='normalImg(this)'><br><br>";
?>
</div>

<script>
function bigImg(x) { 
  x.style.width = "120%";  
  x.style.top = "-20%";
  x.style.left = "-120%";
}
function normalImg(x) {  
  x.style.width = "60%";
}
</script>

De foto wordt wel vergroot, maar naar de rechter kant. Daardoor loopt een gedeelte van de foto van het scherm af, en is niet meer geheel zichtbaar..
Ik wil graag, dat de foto meer naar links springt.
Wat ik ook invul bij x.style.left, er verandert niets.
 
Kan je een testcase op JSfiddle.net plaatsen?
Werkt wat makkelijker.
 
Ik ken jsfiddle niet, heb er geen account, en moet eerst uitvinden hoe dat werkt.
 
Eibers zei:
Ik ken jsfiddle niet, heb er geen account, en moet eerst uitvinden hoe dat werkt.
Klik om te vergroten...

Gewoon je code erin plaatsen, uitvoeren en je hebt een zandbak gecreëerd waarvan je de link met ons kan delen.
 
Je hebt geen Javascript nodig ;) De :hover in css werkt beter.
Dit is het concept. Je kan zelf de css toevoegen om de div te positioneren.

De display:flex + justify-content + align-items zorgen ervoor dat het plaatje altijd in het midden blijft.
De width:60% wordt bij :hover (is mouseover) een width:90%
Code: 
<style>
div.image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 230px;
    border: 1px solid #999;
    border-radius: 15px;
}
div.image img {
    width: 60%;
    height: auto;
    border-radius: 15px;
}
div.image img:hover {
    width: 90%;
}
</style>

Code: 
<?php
// test foto bxh 200x150
$pad = "img-00.jpg";
?>

<div class="image">
<img src="<?php echo $pad ?>" alt="">
</div>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan