Put the following in the head-section of your page:
Flickr image stack
Isometric cube
SVG Tree demo
Fixed element demo<link rel="stylesheet" href="style/zoomooz.css" type="text/css" />
<script type="text/javascript" src="js/sylvester.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.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>
Supported browsers:
No IE support, sorry.
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);