zoomTo: Imagestack

by secretgspot

HTML

<script src="https://raw.github.com/jaukia/zoomooz/master/jquery.zoomooz.min.js"></script>
<div id="container">
        <label>Flickr search text:</label><input id="searchtext">
        <div id="output"></div>
        <div id="info">Made with <a href="http://janne.aukia.com/zoomooz/">Zoomooz.js</a></div>
        </div>

CSS

img, body {
      -webkit-user-select:none;
     -moz-user-select:none;
 }

 img {
     border:1px solid #aaa;
     padding:10px;
     margin:5px;
     background-color:#f8f8f8;
     position:absolute;
 }
 
 body {
     padding:0px;
     background: rgb(94,94,94);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(1, rgb(30,30,30)), color-stop(0, rgb(94,94,94)));
     background: -moz-linear-gradient(center top,rgb(30,30,30) 100%,rgb(94,94,94) 0%);
 }
 
 body, html {
     color:white;
     font-family: Helvetica Neue, Helvetica, sans-serif;
     line-height:32px;
     width:100%;
     height:100%;
     margin:0;
     padding:0;
 }
 
 a {
     color: white;
 }
 
 #searchtext {
     height:30px;
     width:300px;
     font-size:20px;
     line-height:32px;
 }
 
 #container {
     position: absolute;
     left:200px;
     top:100px;
     right:200px;
     bottom:100px;
 }
 
 #output {
     position:absolute;
     background-color: #999;
     bottom:0px;
     left:0;
     top:100px;
     right:0;
     overflow:hidden;
 }
 
 #info, #info a {
     color: #999; 
 }
 
 #info {
     position:absolute;
     left:0;
     bottom:-30px;
     height:30px;
}
 
 label {
     padding-right:10px;
 }

JavaScript

$(document).ready(function(){
            $.zoomooz.setup({duration:1000, nativeanimation:true});

            $(document).keypress(function(evt){if(evt.keyCode==13) loadImages(true);});
            $("#searchtext").blur(function(evt){loadImages(false);});

            var searchText = getUrlVars()["q"];
            if(searchText) {
                $("#searchtext").val(searchText);
                loadImages(false);
                $("body").zoomTo({targetsize: 1.0});
            }
        });

        var previousSearchString = "";
        var notLoaded = true;

        // from: http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
        function getUrlVars() {
            var vars = [];

            var hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            
            for(var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            
            return vars;    
        }
        
        function loadImages(forceImages) {
            var searchString = $("#searchtext").val();
            if(searchString=="") return;
            if(!forceImages && searchString==previousSearchString) return;
            previousSearchString = searchString;

            if(notLoaded) {
                notLoaded = false;

                $(window).click(function (evt) {
                    evt.stopPropagation();
                    $("body").zoomTo({targetsize: 1.0});
                    $("#searchtext").focus();
                });
                $("body").zoomTo({targetsize: 1.0});
                $("#searchtext").focus();

                $("#output").click(function(evt) {
                    evt.stopPropagation();
                    $(this).zoomTo({targetsize: 0.97});
                });
            }

            var path =...