GradualZoom is a small JavaScript Library allowing to gradually zoom on images when they are clicked on.
- It is released under the GNU Public License, any contribution, enhancement or adaptation is fairly welcomed.
- Try the demo
- Current version is 0.1, it can be downloaded here.
- ScriptDoc Reference is available here.
- It has been succesfully tested on Mozilla Firefox, Opera, Konqueror, Safari and Internet Explorer. Please report any compatibility problems (raphael AT semeteys DOT org)
- Insert the GradualZoom.js script somewhere in your HTML document (in the <head> tag for instance):
<script type="text/javascript" src="GradualZoom.js"></script>
- The image to become zoomable must fullfill following constrainsts:
- have an unique id
- have width and height attributes values
- be included in a <div> element with an unique id, width, height and overflow: hidden values precised via a style attribute
- be relatively positionned
<div id="myFrame" style="overflow: hidden; width: 197px; height: 141px">
<img id="myImage" src="Fruidefendu.jpg" width="197" height="141" style="position: relative;"/>
</div>
- Call the GradualZoom.init() function:
- Either from the onload event of the HTML page or form another <script> insert (in that case it must be placed after the GradualZoom.js include)
- With the image id and frame id as parameters (passed as arrays)
<body onload = "GradualZoom.init(['myImage'], ['myFrame']);">
- Make sur that each image to be zoomable (and each containing frame) has an unique id
<div id="__frame1__" style="overflow: hidden; width: 100px; height: 200px">
<img id="<b>image1</b>" src="myFirstImage.jpg" width="100" height="200" style="position: relative;">
</div>
<div id="<b>frame2</b>" style="overflow: hidden; width: 300px; height: 175px">
<img id="<b>image2</b>" src="mySecondImage.jpg" width="300" height="175" style="position: relative;">
</div>
- Pass the lists of image ids and frame ids to the GradualZoom.init() function:
If necessary, following parameters can be modified in the GradualZoom object:
- GradualZoom.maxRatio: Maximum zoom level (default value: 2)
- GradualZoom.speed: Number of unitary zooms between zoom levels (default value: 7)
- GradualZoom.timeout: Time Out, in ms, between each unitary zoom (default value: 50)