"The fantastic Javascript zooming library has been updated to work with Firefox 4."
— @azaaza
"Really awesome example of a zoomable interface with JavaScript"
— @tdhooper
"Amazing little js library for zooming and rotating that works with JQuery"
— @mike_j_edwards
"#prezi like styles for your own website. damn cool and pretty easy"
— @wollepb
Put the following in the head-section of your page:
<link rel="stylesheet" href="style/zoomooz.css" type="text/css" />
<script type="text/javascript" src="lib/sylvester.js"></script>
<script type="text/javascript" src="lib/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/purecssmatrix.js"></script>
<script type="text/javascript" src="js/jquery.animtrans.js"></script>
<script type="text/javascript" src="js/jquery.zoomooz.js"></script>
This adds a simple zoom on clicking to elements with class "zoomTarget". The zoom can be reset by clicking the body.
<script type="text/javascript" language="javascript">
$(document).ready(function()
$(".zoomTarget").click(function(evt) {
$(this).zoomTo();
evt.stopPropagation();
});
$("body").click(function(evt) {
$(this).zoomTo({targetsize:1.0});
evt.stopPropagation();
});
});
</script>
All major browser platforms supported now:
Supported versions
settings = {
// zoomed size relative to screen
// 0.0-1.0
targetsize: 0.9,
// scale content to screen based on their size
// "width"|"height"|"both"
scalemode: "both",
// animation duration
duration: 1000,
// easing of animation, similar to css transition params
// "linear"|"ease"|"ease-in"|"ease-out"|
// "ease-in-out"|[p1,p2,p3,p4]
// [p1, p2, p3, p4] refer to cubic-bezier curve params
easing: "ease",
// use browser native animation in webkit
// true|false
nativeanimation: true
}
$(this).zoomTo(settings);