Inzoomen in een image gallery

SeppeG · 2 februari 2013

Hey,

Voor mijn website in aanbouw heb ik een simpele, mooie image gallery met thumbnails gevonden.

Hij is bijna wat ik wil.

Als ik op een thumbnail klik wordt de aangeklikte afbeelding vergroot weergegeven in een groter kader in het midden van het scherm.

Nu zou ik echter graag deze grotere afbeelding nog verder willen kunnen in-en uitzoomen via een + en een - knopje die onder het kader geplaatst zijn, of door op de foto in het kader te klikken.

Graag had ik het stukje code dat hievoor kan zorgen.Het in-en uitzoomen moet wel in dezelfde pagina blijven , dus niet een afbeelding openen in een ander scherm. Graag iets wat ik kan Copie/pasten want ik ben nagenoeg volkomen leek in Html.

Momenteel is mijn code zo:

<title>Creaties</title>

</head>

<body>

<h3>Creaties</h3><br/>

</div>

</div><br/>

</div>

Kan ik mijn titel ook dichter bij de thumbnails brengen? Momenteel is er eigenlijk te veel plaats tussen naar mijn zin.

Alvast hartelijk dank

Seppe

3 juli 2013

Voor in en uitzoomen

<html>
<head>
<style>
#thediv {
   margin:0 auto;
   height:400px;
   width:400px;
   overflow:hidden;
   }

img {
   position: relative;
   left: 50%;
   top: 50%;
}

</style>
</head>
<body>
<input type="button" value ="-" onclick="zoom(0.9)"/>
<input type="button" value ="+" onclick="zoom(1.1)"/>
<div id="thediv">

<img id="pic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/>
</div>
<script>
window.onload = function(){zoom(1)}


function zoom(zm) {
img=document.getElementById("pic")
wid=img.width
ht=img.height
img.style.width=(wid*zm)+"px"
img.style.height=(ht*zm)+"px"
   img.style.marginLeft = -(img.width/2) + "px";
   img.style.marginTop = -(img.height/2) + "px";
}

</script>
</body>
</html>

bron: Simple Image Zoom In/Out

NB. Als je code verandert, neem altijd eerst een backup van de originele code!

3 juli 2013 aangepast door qbie

Inloggen

Inzoomen in een image gallery

Aanbevolen berichten

SeppeG

Gast qbie

Welkom op PC Helpforum

Leden statistieken

OVER ONS

SITEMAP

Home

Info

Handleidingen & Tips

Activiteit

Belangrijke informatie