Download raw (13.5 KB)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zoomooz.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style/zoomooz.css" type="text/css" media="screen">
<link rel="stylesheet" href="style/website.css" type="text/css" media="screen">
<link rel="stylesheet" href="style/prettyPhoto.css" type="text/css" media="screen">
<script type="text/javascript" src="lib/jquery-1.4.4.js"></script>
<script type="text/javascript" src="lib/sylvester.js"></script>
<script type="text/javascript" src="lib/jquery.masonry.min.js"></script>
<script type="text/javascript" src="lib/jquery.prettyPhoto.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>
<script type="text/javascript">
$(document).ready(function() {
$(".section, .highlight").click(function(evt) {
$(this).zoomTo({targetsize:0.75, duration:600});
evt.stopPropagation();
});
$(window).click(function(evt) {
$("body").zoomTo({targetsize:1.0, duration:600});
evt.stopPropagation();
});
$("body").zoomTo({targetsize:1.0, duration:600});
$(".innerContent").masonry({columnWidth:210,animate:false});
$(document).ready(function(){
var videoLink = $("a[rel^='prettyPhoto']");
videoLink.prettyPhoto();
videoLink.click(function() {
$("body").zoomTo({targetsize:1.0, duration: 0.0});
});
});
});
</script>
</head>
<body>
<div id="title">
<h2 id="topsubtitle">jQuery</h2>
<h1>Zoomooz.js</h1>
<div class="topdescription">
Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.
</div>
</div>
<div class="innerContent">
<!--************************
** TITLE **
*************************-->
<div class="section" id="video">
<a href="http://www.youtube.com/watch?v=faSRI1iAang" rel="prettyPhoto">
<img src="website-images/video.jpg" width="350" height="259" />
Zoomooz on iPad video
</a>
</div>
<div class="section" id="description">
<p>
<a class="downloadlink" href="http://github.com/jaukia/zoomooz/zipball/master">Download Zoomooz.js (zip)</a>
</p>
<div id="version">Version 0.86 (April 6, 2011, fixed a bug with non-body zoom root)</div>
<p>
<a class="downloadlink" href="http://github.com/jaukia/zoomooz/" rel="me">Fork me on GitHub!</a>
</p>
</div>
<div class="section" id="gettingstarted">
<h2>Praise</h2>
<p>
"The fantastic Javascript zooming library has been updated to work with Firefox 4."<br />
— @azaaza
</p>
<p>
"Really awesome example of a zoomable interface with JavaScript"<br />
— @tdhooper
</p>
<p>
"Amazing little js library for zooming and rotating that works with JQuery"<br />
— @mike_j_edwards
</p>
<p>
"#prezi like styles for your own website. damn cool and pretty easy"<br />
— @wollepb
</p>
</div>
<div class="section" id="gettingstarted">
<h2>Zoomooz in use</h2>
<p>
<a href="http://www.azarask.in/blog/post/how-to-prototype-and-influence-people/">Aza Raskin prototyping with Zoomooz</a>
</p>
<p>
<a href="http://www.freshwidows.com/STAR/Legs.html">A photo gallery using Zoomooz</a>
</p>
<p>
<a href="http://richard.milewski.org/archives/788">A zooming comic experiment</a>
</p>
<p>
<a href="http://richard.milewski.org/archives/804">Simple HTML Slides uses Zoomooz</a>
</p>
</div>
<!--************************
** EXAMPLES **
*************************-->
<div class="section">
<a class="linkblock" href="examples/imagestack/index.html"><img src="website-images/thumbnails/imagestack-clipped.png" width="140" height="105" />Flickr image stack</a>
</div>
<div class="section">
<a class="linkblock" href="examples/isometric/index.html"><img src="website-images/thumbnails/isometric-clipped.png" width="140" height="105" />Isometric cube</a>
</div>
<div class="section">
<a class="linkblock" href="examples/svgtree/index.html"><img src="website-images/thumbnails/svgtree-clipped.png" width="140" height="105" />SVG Tree demo</a>
</div>
<div class="section">
<a class="linkblock" href="examples/rootchange/index.html"><img src="website-images/thumbnails/rootchange-clipped.png" width="140" height="105" />Zooming container demo</a>
</div>
<!--************************
** ENABLING THE LIBRARY **
*************************-->
<div class="section" id="gettingstarted">
<h2>Enabling the library</h2>
<p>Put the following in the head-section of your page:</p>
<div class="highlight">
<pre><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"style/zoomooz.css"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="nt">/></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"lib/sylvester.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"lib/jquery-1.4.2.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"js/purecssmatrix.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"js/jquery.animtrans.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"js/jquery.zoomooz.js"</span><span class="nt">></script></span>
</pre>
</div>
</div>
<!--************************
** ADDING ZOOM EFFECT **
*************************-->
<div class="section" id="samplecode">
<h2>Adding zoom effect</h2>
<p>This adds a simple zoom on clicking to elements with class "zoomTarget". The zoom can be reset by clicking the body.</p>
<div class="highlight"><pre><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">language=</span><span class="s">"javascript"</span><span class="nt">></span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">".zoomTarget"</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">zoomTo</span><span class="p">();</span>
<span class="nx">evt</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
<span class="p">});</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"body"</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">zoomTo</span><span class="p">({</span><span class="nx">targetsize</span><span class="o">:</span><span class="mf">1.0</span><span class="p">});</span>
<span class="nx">evt</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="nt"></script></span>
</pre></div>
</div>
<!--************************
** BROWSER SUPPORT **
*************************-->
<div class="section">
<h2>Browser support</h2>
<p>All major browser platforms supported now:</p>
<div class="browsers">
<img src="website-images/safari.png" width="32" height="32" alt="Safari">
<img src="website-images/chrome.png" width="32" height="32" alt="Chrome">
<img src="website-images/ff.png" width="32" height="32" alt="Firefox"><br />
<img src="website-images/opera.png" width="32" height="32" alt="Opera">
<img src="website-images/ie.png" width="32" height="32" alt="IE">
</div>
<p>Supported versions</p>
<ul>
<li>Internet Explorer 9</li>
<li>Safari 3 and newer</li>
<li>Firefox 3.6 and newer</li>
<li>Recent versions of Opera and Chrome</li>
</ul>
</ul>
</div>
<!--************************
** DETAILED SETTINGS **
*************************-->
<div class="section" id="detailedsettings">
<h2>Detailed settings</h2>
<div class="highlight"><pre><span class="nx">settings</span> <span class="o">=</span> <span class="p">{</span>
<span class="c1">// zoomed size relative to screen</span>
<span class="c1">// 0.0-1.0</span>
<span class="nx">targetsize</span><span class="o">:</span> <span class="mf">0.9</span><span class="p">,</span>
<span class="c1">// scale content to screen based on their size</span>
<span class="c1">// "width"|"height"|"both"</span>
<span class="nx">scalemode</span><span class="o">:</span> <span class="s2">"both"</span><span class="p">,</span>
<span class="c1">// animation duration</span>
<span class="nx">duration</span><span class="o">:</span> <span class="mi">1000</span><span class="p">,</span>
<span class="c1">// easing of animation, similar to css transition params</span>
<span class="c1">// "linear"|"ease"|"ease-in"|"ease-out"|
// "ease-in-out"|[p1,p2,p3,p4]</span>
<span class="c1">// [p1, p2, p3, p4] refer to cubic-bezier curve params</span>
<span class="nx">easing</span><span class="o">:</span> <span class="s2">"ease"</span><span class="p">,</span>
<span class="c1">// use browser native animation in webkit</span>
<span class="c1">// true|false</span>
<span class="nx">nativeanimation</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">zoomTo</span><span class="p">(</span><span class="nx">settings</span><span class="p">);</span>
</pre></div>
</div>
<!--************************
** BUGS **
*************************-->
<div class="section">
<h2>Bugs and issues</h2>
<div>
<ul>
<li>Does not work with full-page zooming in Webkit</li>
<li>Requires a separate css file.</li>
<li>Native animation problem in Webkit: animation not working in Webkit with very long pages when zooming with rotation.</li>
<li>Css box-shadows make animations crawl.</li>
<li>Transforming elements with text content in Opera is buggy.</li>
<li>Rotation goes sometimes via the wrong direction.</li>
</ul>
</div>
</div>
<!--************************
** FEATURES **
*************************-->
<div class="section">
<h2>Some feature ideas</h2>
<div>
<ul>
<li>Make it work in older IE versions.</li>
<li>Have zooming out return to the same scroll position</li>
<li>Support for 3d transformations.</li>
<li>Hide elements that are not shown while transforming.</li>
<li>Kinetic scrolling.</li>
</ul>
</div>
</div>
<!--************************
** GOOGLE ANALYTICS **
*************************-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16288001-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</div>
<!--************************
** FOOTER **
*************************-->
<div id="footer">
Made by Janne Aukia, 2011. Uses jQuery Masonry.
</div>
</body>
</html>