[
  {
    "path": "README.md",
    "content": "\r\nAnimatedResponsiveImageGrid\r\n=========\r\n\r\nA jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.\r\n\r\n[article on Codrops](http://tympanus.net/codrops/?p=10139)\r\n\r\n[demo](http://tympanus.net/Development/AnimatedResponsiveImageGrid/)\r\n\r\nLicensed under the MIT License"
  },
  {
    "path": "bower.json",
    "content": "{\n  \"name\": \"AnimatedResponsiveImageGrid\",\n  \"version\": \"1.0.0\",\n  \"homepage\": \"https://github.com/codrops/AnimatedResponsiveImageGrid\",\n  \"authors\": [\n    \"Pedro Botelho\"\n  ],\n  \"description\": \"A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings.\",\n  \"main\": \"js/jquery.gridrotator.js\",\n  \"license\": \"MIT\",\n  \"ignore\": [\n    \"**/.*\",\n    \"node_modules\",\n    \"bower_components\",\n    \"test\",\n    \"tests\"\n  ]\n}\n"
  },
  {
    "path": "css/demo.css",
    "content": "@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);\r\n\r\n*,\r\n*:after,\r\n*:before {\r\n\t-webkit-box-sizing: border-box;\r\n\t-moz-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n}\r\n\r\n/* General Demo Style */\r\nbody {\r\n\tfont-family: 'Lato', 'Myriad Pro','Trebuchet MS', sans-serif;\r\n\tbackground: #f9f9f9 url(../images/bg.jpg) repeat top left;\r\n\tfont-weight: 300;\r\n\tfont-size: 14px;\r\n\tcolor: #333;\r\n\toverflow: scroll;\r\n\toverflow-x: hidden; \r\n}\r\n\r\na {\r\n\tcolor: #555;\r\n\ttext-decoration: none;\r\n}\r\n\r\na img {\r\n\tborder: none;\r\n}\r\n\r\n.container {\r\n\tposition: relative;\r\n\tbackground: transparent url(../images/light.png) fixed no-repeat center top;\r\n}\r\n\r\n.codrops-header{\r\n\tmargin: 10px;\r\n\tpadding: 20px 10px 10px 10px;\r\n\tposition: relative;\r\n\tdisplay: block;\r\n    text-align: center;\r\n\ttext-shadow: 0 1px 1px rgba(255,255,255,0.7);\r\n}\r\n\r\n.codrops-header h1,\r\n.codrops-header-special h1{\r\n\tfont-size: 26px;\r\n\tline-height: 26px;\r\n\tmargin: 0;\r\n\tposition: relative;\r\n\tfont-weight: 700;\r\n\tcolor: #000;\r\n}\r\n\r\n.codrops-header h2,\r\n.codrops-header-special h2{\r\n\tfont-size: 14px;\r\n\tline-height: 14px;\r\n\tfont-weight: 300;\r\n\tmargin: 0;\r\n\tpadding: 3px 5px;\r\n\tmargin: 10px 0 5px;\r\n\tcolor: #000;\r\n\tdisplay: inline-block;\r\n}\r\n\r\n/* Header Style */\r\n.codrops-top {\r\n\tline-height: 24px;\r\n\tfont-size: 11px;\r\n\tbackground: #fff;\r\n\tbackground: rgba(255, 255, 255, 0.8);\r\n\ttext-transform: uppercase;\r\n\tz-index: 9999;\r\n\tposition: relative;\r\n\tbox-shadow: 1px 0px 2px rgba(0,0,0,0.2);\r\n}\r\n\r\n.codrops-top a {\r\n\tpadding: 0px 10px;\r\n\tletter-spacing: 1px;\r\n\tcolor: #333;\r\n\tdisplay: inline-block;\r\n}\r\n\r\n.codrops-top a:hover {\r\n\tbackground: rgba(255,255,255,0.3);\r\n}\r\n\r\n.codrops-top span.right {\r\n\tfloat: right;\r\n}\r\n.codrops-top span.right a {\r\n\tfloat: left;\r\n\tdisplay: block;\r\n}\r\n\r\n.codrops-info {\r\n\tpadding: 20px;\r\n\tmargin: 0 auto;\r\n\ttext-align: center;\r\n\ttext-shadow: 0 1px 1px rgba(255,255,255,0.7);\r\n\tline-height: 22px;\r\n}\r\n\r\n/* Demo Buttons Style */\r\n.codrops-demos{\r\n    text-align: center;\r\n\tdisplay: block;\r\n\tline-height: 30px;\r\n\tpadding: 5px 0px;\r\n}\r\n.codrops-demos a{\r\n    display: inline-block;\r\n\tmargin: 0px 10px;\r\n\tfont-weight: bold;\r\n\tcolor: #333;\r\n\tline-height: 20px;\t\r\n\tfont-size: 12px;\r\n\tbackground: #fff;\r\n\tbackground: rgba(255,255,255,0.4);\r\n\tpadding: 0 4px;\r\n}\r\n.codrops-demos a:hover{\r\n\tborder-bottom: 2px solid #f7bb6d;\r\n}\r\n.codrops-demos a.current-demo,\r\n.codrops-demos a.current-demo:hover{\r\n\tborder-bottom: 2px solid #f7bb6d;\r\n\tcolor: #777;\r\n}\r\n\r\n.codrops-header-special{\r\n\tposition: absolute;\r\n\ttop: 80px;\r\n\tleft: 0px;\r\n\ttext-align: left;\r\n}\r\n\r\n.codrops-header-special h2{\r\n\tpadding: 5px 20px 5px 10px;\r\n\tcolor: #fff;\r\n\tline-height: 26px;\r\n\tbackground: #000;\r\n\tbackground: rgba(0,0,0,0.8);\r\n}\r\n\r\n.codrops-header-special h1{\r\n\tbackground: #000;\r\n\tbackground: rgba(0,0,0,0.8);\r\n\tdisplay: inline-block;\r\n\tfont-size: 32px;\r\n\tline-height: 32px;\r\n\tpadding: 20px;\r\n\tcolor: #fff;\r\n\ttext-shadow: 0 0 1px #fff;\r\n}\r\n\r\n.codrops-header-special .codrops-demos{\r\n\ttext-align: left;\r\n}\r\n\r\n.codrops-header-special .codrops-demos a{\r\n\tbackground: rgba(255,255,255,1);\r\n}\r\n\r\n.codrops-header-special .codrops-info{\r\n\tcolor: #fff;\r\n\tbackground: #000;\r\n\tbackground: rgba(0,0,0,0.8);\r\n\ttext-shadow: 1px 1px 1px rgba(0,0,0,0.5);\r\n\tpadding: 5px 20px 5px 10px;\r\n\tline-height: 26px;\r\n\tmargin-top: 30px;\r\n\ttext-align: left;\r\n}"
  },
  {
    "path": "css/fallback.css",
    "content": ".ri-grid{\n\twidth: 600px;\n}\n\n.ri-grid ul li,\n.ri-grid ul li a{\n\twidth: 100px;\n\theight: 100px;\n}\n.ri-grid ul li a img{\n\twidth: 100%;\n}\n"
  },
  {
    "path": "css/style.css",
    "content": ".ri-grid{\n\tmargin: 30px auto 30px;\n\tposition: relative;\n\theight: auto;\n}\n\n.ri-grid ul {\n\tlist-style: none;\n\tdisplay: block;\n\twidth: 100%;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n/* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */\n\n.ri-grid ul:before,\n.ri-grid ul:after{\n\tcontent: '';\n    display: table;\n}\n\n.ri-grid ul:after {\n    clear: both;\n}\n\n.ri-grid ul {\n    zoom: 1; /* For IE 6/7 (trigger hasLayout) */\n} \n\n.ri-grid ul li {\n\t-webkit-perspective: 400px;\n\t-moz-perspective: 400px;\n\t-o-perspective: 400px;\n\t-ms-perspective: 400px;\n\tperspective: 400px;\t\n\tmargin: 0;\n\tpadding: 0;\n\tfloat: left;\n\tposition: relative;\n\tdisplay: block;\n\toverflow: hidden;\n\tbackground: #000;\n}\n\n.ri-grid ul li a{\n\tdisplay: block;\n\toutline: none;\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\twidth: 100%;\n\theight: 100%;\n\t-webkit-backface-visibility: hidden;\n\t-moz-backface-visibility: hidden;\n\t-o-backface-visibility: hidden;\n\t-ms-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\t-webkit-transform-style: preserve-3d;\n\t-moz-transform-style: preserve-3d;\n\t-o-transform-style: preserve-3d;\n\t-ms-transform-style: preserve-3d;\n\ttransform-style: preserve-3d;\n\t-webkit-background-size: 100% 100%;\n\t-moz-background-size: 100% 100%;\n\tbackground-size: 100% 100%;\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-color: #333;\n\t-webkit-box-sizing: content-box;\n\t-moz-box-sizing: content-box;\n\tbox-sizing: content-box;\n}\n\n/* Grid wrapper sizes */\n.ri-grid-size-1{\n\twidth: 55%;\n}\n.ri-grid-size-2{\n\twidth: 100%;\n}\n.ri-grid-size-3{\n\twidth: 100%;\n\tmargin-top: 0px;\n}\n\n/* Shadow style */\n.ri-shadow:after,\n.ri-shadow:before{\n\tcontent: \"\";\n\tposition: absolute;\n\tz-index: -2;\n\tbottom: 15px;\n\tleft: 10px;\n\twidth: 50%;\n\theight: 20%;\n\tmax-width: 300px;\n\tmax-height: 100px;\n\tbox-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);\n\t-webkit-transform: rotate(-3deg);\n\t-moz-transform: rotate(-3deg);\n\t-ms-transform: rotate(-3deg);\n\t-o-transform: rotate(-3deg);\n\ttransform: rotate(-3deg);\n}\n.ri-shadow:after{\n\tright: 10px;\n\tleft: auto;\n\t-webkit-transform: rotate(3deg);\n\t-moz-transform: rotate(3deg);\n\t-ms-transform: rotate(3deg);\n\t-o-transform: rotate(3deg);\n\ttransform: rotate(3deg);\n}\n\n.ri-grid-loading:after,\n.ri-grid-loading:before{\n\tdisplay: none;\n}\n\n.ri-loading-image{\n\tdisplay: none;\n}\n\n.ri-grid-loading .ri-loading-image{\n\tposition: relative;\n\twidth: 30px;\n\theight: 30px;\n\tleft: 50%;\n\tmargin: 100px 0 0 -15px;\n\tdisplay: block;\n}"
  },
  {
    "path": "images/ImageAttribution.txt",
    "content": "Images by Sherman Geronimo-Tan: http://www.flickr.com/people/smanography/\r\nhttp://creativecommons.org/licenses/by/2.0/deed.en"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n    <head>\n\t\t<meta charset=\"UTF-8\" />\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"> \n        <title>Animated Responsive Image Grid</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n        <meta name=\"description\" content=\"Animated Responsive Image Grid - Cycling through a set of images in a responsive grid.\" />\n        <meta name=\"keywords\" content=\"grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective\" />\n        <meta name=\"author\" content=\"Codrops\" />\n        <link rel=\"shortcut icon\" href=\"../favicon.ico\"> \n        <link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" />\n\t\t<script type=\"text/javascript\" src=\"js/modernizr.custom.26633.js\"></script>\n\t\t<noscript>\n\t\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n\t\t</noscript>\n\t\t<!--[if lt IE 9]>\n\t\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n\t\t<![endif]-->\n    </head>\n    <body>\n    \t<div class=\"container\">\n\t\t\t\n\t\t\t<!-- Codrops top bar -->\n            <div class=\"codrops-top\">\n                <a href=\"http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/\">\n                    <strong>&laquo; Previous Demo: </strong>Photo Booth Strips with Lightbox\n                </a>\n                <span class=\"right\">\n\t\t\t\t\t<a href=\"http://www.flickr.com/people/smanography/\">Images by Sherman Geronimo-Tan</a>\n                    <a href=\"http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/\">\n                        <strong>Back to the Codrops Article</strong>\n                    </a>\n                </span>\n                <div class=\"clr\"></div>\n            </div><!--/ Codrops top bar -->\n\t\t\t\n\t\t\t<header class=\"codrops-header\">\n\t\t\t\n\t\t\t\t<h1>Animated Responsive Image Grid</h1>\n\t\t\t\t<h2>Cycling through a set of images in a responsive grid.</h2>\n\t\t\t\t\n\t\t\t\t<nav class=\"codrops-demos\">\n\t\t\t\t\t<a class=\"current-demo\" href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a href=\"index7.html\">Demo 7</a>\n\t\t\t\t</nav>\n\n\t\t\t</header>\n\t\t\t\n\t\t\t<section class=\"main\">\n\n\t\t\t\t<div id=\"ri-grid\" class=\"ri-grid ri-grid-size-1 ri-shadow\">\n\t\t\t\t\t<img class=\"ri-loading-image\" src=\"images/loading.gif\"/>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/1.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/2.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/3.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/4.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/5.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/6.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/7.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/8.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/9.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/10.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/11.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/12.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/13.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/14.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/15.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/16.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/17.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/18.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/19.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/20.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/21.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/22.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/23.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/24.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/25.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/26.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/27.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/28.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/29.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/30.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/31.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/32.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/33.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/34.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/35.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/36.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/37.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/38.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/39.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/40.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/41.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/42.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/43.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/44.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/45.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/46.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/47.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/48.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/49.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/50.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/51.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/52.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/53.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/54.jpg\"/></a></li>\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t<p class=\"codrops-info\"><strong>Demo 1:</strong> Random animations / 55% container width / 3s between switching </p>\n\t\t\t\t\n\t\t\t</section>\n\t\t\t\n        </div>\n        <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></script>\n\t\t<script type=\"text/javascript\" src=\"js/jquery.gridrotator.js\"></script>\n\t\t<script type=\"text/javascript\">\t\n\t\t\t$(function() {\n\t\t\t\n\t\t\t\t$( '#ri-grid' ).gridrotator( {\n\t\t\t\t\tw320 : {\n\t\t\t\t\t\trows : 3,\n\t\t\t\t\t\tcolumns : 4\n\t\t\t\t\t},\n\t\t\t\t\tw240 : {\n\t\t\t\t\t\trows : 3,\n\t\t\t\t\t\tcolumns : 3\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t\n\t\t\t});\n\t\t</script>\n    </body>\n</html>"
  },
  {
    "path": "index2.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n    <head>\n\t\t<meta charset=\"UTF-8\" />\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"> \n        <title>Animated Responsive Image Grid</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n        <meta name=\"description\" content=\"Animated Responsive Image Grid - Cycling through a set of images in a responsive grid.\" />\n        <meta name=\"keywords\" content=\"grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective\" />\n        <meta name=\"author\" content=\"Codrops\" />\n        <link rel=\"shortcut icon\" href=\"../favicon.ico\"> \n        <link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" />\n\t\t<script type=\"text/javascript\" src=\"js/modernizr.custom.26633.js\"></script>\n\t\t<noscript>\n\t\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n\t\t</noscript>\n\t\t<!--[if lt IE 9]>\n\t\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n\t\t<![endif]-->\n    </head>\n    <body>\n\t\t<img src=\"images/loading.gif\" style=\"display:none;\"/>\n\n        <div class=\"container\">\n\t\t\t\n\t\t\t<!-- Codrops top bar -->\n            <div class=\"codrops-top\">\n                <a href=\"http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/\">\n                    <strong>&laquo; Previous Demo: </strong>Photo Booth Strips with Lightbox\n                </a>\n                <span class=\"right\">\n\t\t\t\t\t<a href=\"http://www.flickr.com/people/smanography/\">Images by Sherman Geronimo-Tan</a>\n                    <a href=\"http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/\">\n                        <strong>Back to the Codrops Article</strong>\n                    </a>\n                </span>\n                <div class=\"clr\"></div>\n            </div><!--/ Codrops top bar -->\n\t\t\t\n\t\t\t<header class=\"codrops-header\">\n\t\t\t\n\t\t\t\t<h1>Animated Responsive Image Grid</h1>\n\t\t\t\t<h2>Cycling through a set of images in a responsive grid.</h2>\n\t\t\t\t\n\t\t\t\t<nav class=\"codrops-demos\">\n\t\t\t\t\t<a href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a class=\"current-demo\" href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a href=\"index7.html\">Demo 7</a>\n\t\t\t\t</nav>\n\n\t\t\t</header>\n\t\t\t\n\t\t\t<section class=\"main\">\n\n\t\t\t\t<div id=\"ri-grid\" class=\"ri-grid ri-grid-size-2\">\n\t\t\t\t\t<img class=\"ri-loading-image\" src=\"images/loading.gif\"/>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/1.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/2.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/3.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/4.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/5.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/6.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/7.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/8.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/9.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/10.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/11.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/12.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/13.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/14.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/15.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/16.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/17.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/18.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/19.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/20.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/21.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/22.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/23.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/24.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/25.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/26.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/27.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/28.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/29.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/30.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/31.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/32.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/33.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/34.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/35.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/36.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/37.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/38.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/39.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/40.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/41.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/42.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/43.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/44.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/45.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/46.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/47.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/48.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/49.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/50.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/51.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/52.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/53.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/54.jpg\"/></a></li>\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t<p class=\"codrops-info\"><strong>Demo 2:</strong> \"fadeInOut\" animation / 100% container width / 1 image switch at a time / 600ms between switching</p>\n\t\t\t</section>\n\t\t\t\n        </div>\n        <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></script>\n\t\t<script type=\"text/javascript\" src=\"js/jquery.gridrotator.js\"></script>\n\t\t<script type=\"text/javascript\">\t\n\t\t\t$(function() {\n\t\t\t\n\t\t\t\t$( '#ri-grid' ).gridrotator( {\n\t\t\t\t\trows\t\t: 3,\n\t\t\t\t\tcolumns\t\t: 15,\n\t\t\t\t\tanimType\t: 'fadeInOut',\n\t\t\t\t\tanimSpeed\t: 1000,\n\t\t\t\t\tinterval\t: 600,\n\t\t\t\t\tstep\t\t: 1,\n\t\t\t\t\tw320\t\t: {\n\t\t\t\t\t\trows\t: 3,\n\t\t\t\t\t\tcolumns\t: 4\n\t\t\t\t\t},\n\t\t\t\t\tw240\t\t: {\n\t\t\t\t\t\trows\t: 3,\n\t\t\t\t\t\tcolumns\t: 4\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t\n\t\t\t});\n\t\t</script>\n    </body>\n</html>"
  },
  {
    "path": "index3.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n    <head>\n\t\t<meta charset=\"UTF-8\" />\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"> \n        <title>Animated Responsive Image Grid</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n        <meta name=\"description\" content=\"Animated Responsive Image Grid - Cycling through a set of images in a responsive grid.\" />\n        <meta name=\"keywords\" content=\"grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective\" />\n        <meta name=\"author\" content=\"Codrops\" />\n        <link rel=\"shortcut icon\" href=\"../favicon.ico\"> \n        <link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" />\n\t\t<script type=\"text/javascript\" src=\"js/modernizr.custom.26633.js\"></script>\n\t\t<noscript>\n\t\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n\t\t</noscript>\n\t\t<!--[if lt IE 9]>\n\t\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n\t\t<![endif]-->\n    </head>\n    <body>\n\t\t<div class=\"container\">\n\t\t\t\n\t\t\t<!-- Codrops top bar -->\n            <div class=\"codrops-top\">\n                <a href=\"http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/\">\n                    <strong>&laquo; Previous Demo: </strong>Photo Booth Strips with Lightbox\n                </a>\n                <span class=\"right\">\n\t\t\t\t\t<a href=\"http://www.flickr.com/people/smanography/\">Images by Sherman Geronimo-Tan</a>\n                    <a href=\"http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/\">\n                        <strong>Back to the Codrops Article</strong>\n                    </a>\n                </span>\n                <div class=\"clr\"></div>\n            </div><!--/ Codrops top bar -->\n\t\t\t\n\t\t\t<section class=\"main\">\n\n\t\t\t\t<div id=\"ri-grid\" class=\"ri-grid ri-grid-size-3\">\n\t\t\t\t\t<img class=\"ri-loading-image\" src=\"images/loading.gif\"/>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/1.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/2.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/3.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/4.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/5.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/6.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/7.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/8.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/9.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/10.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/11.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/12.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/13.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/14.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/15.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/16.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/17.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/18.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/19.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/20.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/21.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/22.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/23.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/24.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/25.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/26.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/27.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/28.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/29.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/30.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/31.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/32.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/33.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/34.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/35.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/36.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/37.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/38.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/39.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/40.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/41.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/42.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/43.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/44.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/45.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/46.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/47.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/48.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/49.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/50.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/51.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/52.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/53.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/54.jpg\"/></a></li>\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t<header class=\"codrops-header-special\">\n\t\t\t\n\t\t\t\t\t<h1>Animated Responsive Image Grid</h1>\n\t\t\t\t\t<br>\n\t\t\t\t\t<h2>Cycling through a set of images in a responsive grid.</h2>\n\t\t\t\t\t\n\t\t\t\t\t<nav class=\"codrops-demos\">\n\t\t\t\t\t\t<a href=\"index.html\">Demo 1</a>\n\t\t\t\t\t\t<a href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t\t<a class=\"current-demo\" href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t\t<a href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t\t<a href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t\t<a href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t\t<a href=\"index7.html\">Demo 7</a>\n\t\t\t\t\t</nav>\n\t\t\t\t\t<p class=\"codrops-info\"><strong>Demo 3:</strong> Random animations / 100% container width / max. 2 images switch at a time / 2s between switching</p>\n\t\t\t\t\t\n\t\t\t\t</header>\n\n\t\t\t</section>\n\t\t\t\n        </div>\n        <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></script>\n\t\t<script type=\"text/javascript\" src=\"js/jquery.gridrotator.js\"></script>\n\t\t<script type=\"text/javascript\">\t\n\t\t\t$(function() {\n\t\t\t\n\t\t\t\t$( '#ri-grid' ).gridrotator( {\n\t\t\t\t\trows : 4,\n\t\t\t\t\tcolumns : 8,\n\t\t\t\t\tmaxStep : 2,\n\t\t\t\t\tinterval : 2000,\n\t\t\t\t\tw1024 : {\n\t\t\t\t\t\trows : 5,\n\t\t\t\t\t\tcolumns : 6\n\t\t\t\t\t},\n\t\t\t\t\tw768 : {\n\t\t\t\t\t\trows : 5,\n\t\t\t\t\t\tcolumns : 5\n\t\t\t\t\t},\n\t\t\t\t\tw480 : {\n\t\t\t\t\t\trows : 6,\n\t\t\t\t\t\tcolumns : 4\n\t\t\t\t\t},\n\t\t\t\t\tw320 : {\n\t\t\t\t\t\trows : 7,\n\t\t\t\t\t\tcolumns : 4\n\t\t\t\t\t},\n\t\t\t\t\tw240 : {\n\t\t\t\t\t\trows : 7,\n\t\t\t\t\t\tcolumns : 3\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t\n\t\t\t});\n\t\t</script>\n    </body>\n</html>"
  },
  {
    "path": "index4.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n    <head>\n\t\t<meta charset=\"UTF-8\" />\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"> \n        <title>Animated Responsive Image Grid</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n        <meta name=\"description\" content=\"Animated Responsive Image Grid - Cycling through a set of images in a responsive grid.\" />\n        <meta name=\"keywords\" content=\"grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective\" />\n        <meta name=\"author\" content=\"Codrops\" />\n        <link rel=\"shortcut icon\" href=\"../favicon.ico\"> \n        <link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" />\n\t\t<script type=\"text/javascript\" src=\"js/modernizr.custom.26633.js\"></script>\n\t\t<noscript>\n\t\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n\t\t</noscript>\n\t\t<!--[if lt IE 9]>\n\t\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n\t\t<![endif]-->\n    </head>\n    <body>\n\t\t<div class=\"container\">\n\t\t\t\n\t\t\t<!-- Codrops top bar -->\n            <div class=\"codrops-top\">\n                <a href=\"http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/\">\n                    <strong>&laquo; Previous Demo: </strong>Photo Booth Strips with Lightbox\n                </a>\n                <span class=\"right\">\n\t\t\t\t\t<a href=\"http://www.flickr.com/people/smanography/\">Images by Sherman Geronimo-Tan</a>\n                    <a href=\"http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/\">\n                        <strong>Back to the Codrops Article</strong>\n                    </a>\n                </span>\n                <div class=\"clr\"></div>\n            </div><!--/ Codrops top bar -->\n\t\t\t\n\t\t\t<header class=\"codrops-header\">\n\t\t\t\n\t\t\t\t<h1>Animated Responsive Image Grid</h1>\n\t\t\t\t<h2>Cycling through a set of images in a responsive grid.</h2>\n\t\t\t\t\n\t\t\t\t<nav class=\"codrops-demos\">\n\t\t\t\t\t<a href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a class=\"current-demo\" href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a href=\"index7.html\">Demo 7</a>\n\t\t\t\t</nav>\n\n\t\t\t</header>\n\t\t\t\n\t\t\t<section class=\"main\">\n\n\t\t\t\t<div id=\"ri-grid\" class=\"ri-grid ri-grid-size-1 ri-shadow\">\n\t\t\t\t\t<img class=\"ri-loading-image\" src=\"images/loading.gif\"/>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/1.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/2.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/3.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/4.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/5.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/6.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/7.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/8.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/9.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/10.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/11.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/12.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/13.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/14.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/15.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/16.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/17.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/18.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/19.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/20.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/21.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/22.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/23.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/24.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/25.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/26.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/27.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/28.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/29.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/30.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/31.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/32.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/33.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/34.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/35.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/36.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/37.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/38.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/39.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/40.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/41.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/42.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/43.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/44.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/45.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/46.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/47.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/48.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/49.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/50.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/51.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/52.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/53.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/54.jpg\"/></a></li>\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t<p class=\"codrops-info\"><strong>Demo 4:</strong> Random animations / 55% container width / 3s between switching / elements 1,2,3 and 4 don't switch / clickable elements</p>\n\t\t\t\t\n\t\t\t</section>\n\t\t\t\n        </div>\n        <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></script>\n\t\t<script type=\"text/javascript\" src=\"js/jquery.gridrotator.js\"></script>\n\t\t<script type=\"text/javascript\">\t\n\t\t\t$(function() {\n\t\t\t\n\t\t\t\t$( '#ri-grid' ).gridrotator( {\n\t\t\t\t\tw320 : {\n\t\t\t\t\t\trows : 3,\n\t\t\t\t\t\tcolumns : 4\n\t\t\t\t\t},\n\t\t\t\t\tw240 : {\n\t\t\t\t\t\trows : 3,\n\t\t\t\t\t\tcolumns : 3\n\t\t\t\t\t},\n\t\t\t\t\tnochange : [0,1,2,3],\n\t\t\t\t\tpreventClick : false\n\t\t\t\t} );\n\t\t\t\n\t\t\t});\n\t\t</script>\n    </body>\n</html>"
  },
  {
    "path": "index5.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n    <head>\n\t\t<meta charset=\"UTF-8\" />\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"> \n        <title>Animated Responsive Image Grid</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n        <meta name=\"description\" content=\"Animated Responsive Image Grid - Cycling through a set of images in a responsive grid.\" />\n        <meta name=\"keywords\" content=\"grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective\" />\n        <meta name=\"author\" content=\"Codrops\" />\n        <link rel=\"shortcut icon\" href=\"../favicon.ico\"> \n        <link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" />\n\t\t<script type=\"text/javascript\" src=\"js/modernizr.custom.26633.js\"></script> \n\t\t<noscript>\n\t\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n\t\t</noscript>\n\t\t<!--[if lt IE 9]>\n\t\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n\t\t<![endif]-->\n    </head>\n    <body>\n\t\t<div class=\"container\">\n\t\t\t\n\t\t\t<!-- Codrops top bar -->\n            <div class=\"codrops-top\">\n                <a href=\"http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/\">\n                    <strong>&laquo; Previous Demo: </strong>Photo Booth Strips with Lightbox\n                </a>\n                <span class=\"right\">\n\t\t\t\t\t<a href=\"http://www.flickr.com/people/smanography/\">Images by Sherman Geronimo-Tan</a>\n                    <a href=\"http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/\">\n                        <strong>Back to the Codrops Article</strong>\n                    </a>\n                </span>\n                <div class=\"clr\"></div>\n            </div><!--/ Codrops top bar -->\n\t\t\t\n\t\t\t<header class=\"codrops-header\">\n\t\t\t\n\t\t\t\t<h1>Animated Responsive Image Grid</h1>\n\t\t\t\t<h2>Cycling through a set of images in a responsive grid.</h2>\n\t\t\t\t\n\t\t\t\t<nav class=\"codrops-demos\">\n\t\t\t\t\t<a href=\"index.html\">Demo 1</a>\n\t\t\t\t\t<a href=\"index2.html\">Demo 2</a>\n\t\t\t\t\t<a href=\"index3.html\">Demo 3</a>\n\t\t\t\t\t<a href=\"index4.html\">Demo 4</a>\n\t\t\t\t\t<a class=\"current-demo\" href=\"index5.html\">Demo 5</a>\n\t\t\t\t\t<a href=\"index6.html\">Demo 6</a>\n\t\t\t\t\t<a href=\"index7.html\">Demo 7</a>\n\t\t\t\t</nav>\n\n\t\t\t</header>\n\t\t\t\n\t\t\t<section class=\"main\">\n\n\t\t\t\t<div id=\"ri-grid\" class=\"ri-grid ri-grid-size-1 ri-shadow\">\n\t\t\t\t\t<img class=\"ri-loading-image\" src=\"images/loading.gif\"/>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/1.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/2.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/3.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/4.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/5.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/6.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/7.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/8.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/9.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/10.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/11.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/12.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/13.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/14.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/15.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/16.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/17.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/18.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/19.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/20.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/21.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/22.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/23.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/24.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/25.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/26.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/27.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/28.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/29.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/30.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/31.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/32.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/33.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/34.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/35.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/36.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/37.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/38.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/39.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/40.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/41.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/42.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/43.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/44.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/45.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/46.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/47.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/48.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/49.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/50.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/51.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/52.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/53.jpg\"/></a></li>\n\t\t\t\t\t\t<li><a href=\"#\"><img src=\"images/medium/54.jpg\"/></a></li>\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t<p class=\"codrops-info\"><strong>Demo 5:</strong> rotateBottom animation / 55% container width / no slideshow / onhover true </p>\n\t\t\t\t\n\t\t\t</section>\n\t\t\t\n        </div>\n        <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></script>\n\t\t<script type=\"text/javascript\" src=\"js/jquery.gridrotator.js\"></script>\n\t\t<script type=\"text/javascript\">\t\n\t\t\t$(function() {\n\t\t\t\n\t\t\t\t$( '#ri-grid' ).gridrotator( {\n\t\t\t\t\tanimSpeed : 300,\n\t\t\t\t\tanimType : 'rotateBottom',\n\t\t\t\t\tw320 : {\n\t\t\t\t\t\trows : 3,\n\t\t\t\t\t\tcolumns : 4\n\t\t\t\t\t},\n\t\t\t\t\tw240 : {\n\t\t\t\t\t\trows : 3,\n\t\t\t\t\t\tcolumns : 3\n\t\t\t\t\t},\n\t\t\t\t\tslideshow : false,\n\t\t\t\t\tonhover : true\n\t\t\t\t} );\n\t\t\t\n\t\t\t});\n\t\t</script>\n    </body>\n</html>"
  },
  {
    "path": "index6.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n    <head>\n    <meta charset=\"UTF-8\" />\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"> \n        <title>Animated Responsive Image Grid</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n        <meta name=\"description\" content=\"Animated Responsive Image Grid - Cycling through a set of images in a responsive grid.\" />\n        <meta name=\"keywords\" content=\"grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective\" />\n        <meta name=\"author\" content=\"Codrops\" />\n        <link rel=\"shortcut icon\" href=\"../favicon.ico\"> \n        <link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" />\n    <script type=\"text/javascript\" src=\"js/modernizr.custom.26633.js\"></script>\n    <noscript>\n      <link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n    </noscript>\n    <!--[if lt IE 9]>\n      <link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n    <![endif]-->\n    </head>\n    <body>\n      <div class=\"container\">\n      \n      <!-- Codrops top bar -->\n            <div class=\"codrops-top\">\n                <a href=\"http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/\">\n                    <strong>&laquo; Previous Demo: </strong>Photo Booth Strips with Lightbox\n                </a>\n                <span class=\"right\">\n          <a href=\"http://www.flickr.com/people/smanography/\">Images by Sherman Geronimo-Tan</a>\n                    <a href=\"http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/\">\n                        <strong>Back to the Codrops Article</strong>\n                    </a>\n                </span>\n                <div class=\"clr\"></div>\n            </div><!--/ Codrops top bar -->\n      \n      <header class=\"codrops-header\">\n      \n        <h1>Animated Responsive Image Grid</h1>\n        <h2>Cycling through a set of images in a responsive grid.</h2>\n        \n        <nav class=\"codrops-demos\">\n          <a href=\"index.html\">Demo 1</a>\n          <a href=\"index2.html\">Demo 2</a>\n          <a href=\"index3.html\">Demo 3</a>\n          <a href=\"index4.html\">Demo 4</a>\n          <a href=\"index5.html\">Demo 5</a>\n          <a class=\"current-demo\" href=\"index6.html\">Demo 6</a>\n          <a href=\"index7.html\">Demo 7</a>\n        </nav>\n\n      </header>\n      \n      <section class=\"main\">\n\n        <div id=\"ri-grid\" class=\"ri-grid ri-grid-size-1 ri-shadow\">\n          <img class=\"ri-loading-image\" src=\"images/loading.gif\"/>\n          <ul>\n            <li><a href=\"#\"><img src=\"images/medium/a.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/2.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/3.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/4.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/b.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/6.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/7.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/8.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/9.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/10.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/11.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/12.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/13.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/14.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/15.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/16.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/17.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/18.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/19.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/20.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/21.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/22.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/23.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/24.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/25.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/26.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/27.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/28.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/29.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/30.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/31.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/32.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/33.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/34.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/35.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/36.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/37.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/38.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/39.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/40.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/41.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/42.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/43.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/44.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/45.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/46.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/47.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/48.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/49.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/50.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/51.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/52.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/53.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/54.jpg\"/></a></li>\n          </ul>\n        </div>\n        \n        <p class=\"codrops-info\"><strong>Demo 1:</strong> Random animations / 55% container width / 3s between switching / some images unavailabe, replaced with color block</p>\n        \n      </section>\n      \n        </div>\n        <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></script>\n    <script type=\"text/javascript\" src=\"js/jquery.gridrotator.js\"></script>\n    <script type=\"text/javascript\"> \n      $(function() {\n      \n        $( '#ri-grid' ).gridrotator( {\n          rows : 2,\n          columns : 3\n        } );\n      \n      });\n    </script>\n    </body>\n</html>"
  },
  {
    "path": "index7.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n    <head>\n    <meta charset=\"UTF-8\" />\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"> \n        <title>Animated Responsive Image Grid</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n        <meta name=\"description\" content=\"Animated Responsive Image Grid - Cycling through a set of images in a responsive grid.\" />\n        <meta name=\"keywords\" content=\"grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective\" />\n        <meta name=\"author\" content=\"Codrops\" />\n        <link rel=\"shortcut icon\" href=\"../favicon.ico\"> \n        <link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" />\n    <script type=\"text/javascript\" src=\"js/modernizr.custom.26633.js\"></script>\n    <noscript>\n      <link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n    </noscript>\n    <!--[if lt IE 9]>\n      <link rel=\"stylesheet\" type=\"text/css\" href=\"css/fallback.css\" />\n    <![endif]-->\n    </head>\n    <body>\n      <div class=\"container\">\n      \n      <!-- Codrops top bar -->\n            <div class=\"codrops-top\">\n                <a href=\"http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/\">\n                    <strong>&laquo; Previous Demo: </strong>Photo Booth Strips with Lightbox\n                </a>\n                <span class=\"right\">\n          <a href=\"http://www.flickr.com/people/smanography/\">Images by Sherman Geronimo-Tan</a>\n                    <a href=\"http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/\">\n                        <strong>Back to the Codrops Article</strong>\n                    </a>\n                </span>\n                <div class=\"clr\"></div>\n            </div><!--/ Codrops top bar -->\n      \n      <header class=\"codrops-header\">\n      \n        <h1>Animated Responsive Image Grid</h1>\n        <h2>Cycling through a set of images in a responsive grid.</h2>\n        \n        <nav class=\"codrops-demos\">\n          <a href=\"index.html\">Demo 1</a>\n          <a href=\"index2.html\">Demo 2</a>\n          <a href=\"index3.html\">Demo 3</a>\n          <a href=\"index4.html\">Demo 4</a>\n          <a href=\"index5.html\">Demo 5</a>\n          <a href=\"index6.html\">Demo 6</a>\n          <a class=\"current-demo\" href=\"index7.html\">Demo 7</a>\n        </nav>\n\n      </header>\n      \n      <section class=\"main\">\n\n        <div id=\"ri-grid\" class=\"ri-grid ri-grid-size-1 ri-shadow\">\n          <img class=\"ri-loading-image\" src=\"images/loading.gif\"/>\n          <ul>\n            <li><a href=\"#\"><img src=\"images/medium/a.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/2.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/3.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/4.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/b.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/6.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/7.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/8.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/9.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/10.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/11.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/12.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/13.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/14.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/15.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/16.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/17.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/18.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/19.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/20.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/21.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/22.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/23.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/24.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/25.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/26.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/27.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/28.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/29.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/30.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/31.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/32.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/33.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/34.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/35.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/36.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/37.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/38.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/39.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/40.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/41.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/42.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/43.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/44.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/45.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/46.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/47.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/48.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/49.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/50.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/51.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/52.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/53.jpg\"/></a></li>\n            <li><a href=\"#\"><img src=\"images/medium/54.jpg\"/></a></li>\n          </ul>\n        </div>\n        \n        <p class=\"codrops-info\"><strong>Demo 1:</strong> Random animations / 55% container width / 3s between switching / some images unavailabe, replaced with substitute image</p>\n        \n      </section>\n      \n        </div>\n        <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></script>\n    <script type=\"text/javascript\" src=\"js/jquery.gridrotator.js\"></script>\n    <script type=\"text/javascript\"> \n      $(function() {\n      \n        $( '#ri-grid' ).gridrotator( {\n          rows : 2,\n          columns : 3,\n          subImg : \"images/subImg.png\"\n        } );\n      \n      });\n    </script>\n    </body>\n</html>"
  },
  {
    "path": "js/jquery.gridrotator.js",
    "content": "/**\n * jquery.gridrotator.js v1.1.0\n * http://www.codrops.com\n *\n * Licensed under the MIT license.\n * http://www.opensource.org/licenses/mit-license.php\n *\n * Copyright 2012, Codrops\n * http://www.codrops.com\n */\n;( function( $, window, undefined ) {\n\n\t'use strict';\n\n\t/*\n\t* debouncedresize: special jQuery event that happens once after a window resize\n\t*\n\t* latest version and complete README available on Github:\n\t* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js\n\t*\n\t* Copyright 2011 @louis_remi\n\t* Licensed under the MIT license.\n\t*/\n\tvar $event = $.event,\n\t$special,\n\tresizeTimeout;\n\n\t$special = $event.special.debouncedresize = {\n\t\tsetup: function() {\n\t\t\t$( this ).on( \"resize\", $special.handler );\n\t\t},\n\t\tteardown: function() {\n\t\t\t$( this ).off( \"resize\", $special.handler );\n\t\t},\n\t\thandler: function( event, execAsap ) {\n\t\t\t// Save the context\n\t\t\tvar context = this,\n\t\t\t\targs = arguments,\n\t\t\t\tdispatch = function() {\n\t\t\t\t\t// set correct event type\n\t\t\t\t\tevent.type = \"debouncedresize\";\n\t\t\t\t\t$event.dispatch.apply( context, args );\n\t\t\t\t};\n\n\t\t\tif ( resizeTimeout ) {\n\t\t\t\tclearTimeout( resizeTimeout );\n\t\t\t}\n\n\t\t\texecAsap ?\n\t\t\t\tdispatch() :\n\t\t\t\tresizeTimeout = setTimeout( dispatch, $special.threshold );\n\t\t},\n\t\tthreshold: 100\n\t};\n\n\t// http://www.hardcode.nl/subcategory_1/article_317-array-shuffle-function\n\tfunction shuffle(a) {\n\t\tvar i=a.length,p,t;\n\t\twhile (i--) {\n\t\t\tp = Math.floor(Math.random()*this.length);\n\t\t\tt = a[i];\n\t\t\ta[i]=a[p];\n\t\t\ta[p]=t;\n\t\t}\n\t}\n\n\t// HTML5 PageVisibility API\n\t// http://www.html5rocks.com/en/tutorials/pagevisibility/intro/\n\t// by Joe Marini (@joemarini)\n\tfunction getHiddenProp(){\n\t\tvar prefixes = ['webkit','moz','ms','o'];\n\n\t\t// if 'hidden' is natively supported just return it\n\t\tif ('hidden' in document) return 'hidden';\n\n\t\t// otherwise loop over all the known prefixes until we find one\n\t\tfor (var i = 0; i < prefixes.length; i++){\n\t\t\tif ((prefixes[i] + 'Hidden') in document)\n\t\t\t\treturn prefixes[i] + 'Hidden';\n\t\t}\n\n\t\t// otherwise it's not supported\n\t\treturn null;\n\t}\n\tfunction isHidden() {\n\t\tvar prop = getHiddenProp();\n\t\tif (!prop) return false;\n\n\t\treturn document[prop];\n\t}\n\n\tfunction isEmpty( obj ) {\n\t\treturn Object.keys(obj).length === 0;\n\t}\n\n\t// global\n\tvar $window = $( window ),\n\t\tModernizr = window.Modernizr;\n\n\t$.GridRotator = function( options, element ) {\n\n\t\tthis.$el = $( element );\n\t\tif( Modernizr.backgroundsize ) {\n\n\t\t\tvar self = this;\n\t\t\tthis.$el.addClass( 'ri-grid-loading' );\n\t\t\tthis._init( options );\n\n\t\t}\n\n\t};\n\n\t// the options\n\t$.GridRotator.defaults = {\n\t\t// number of rows\n\t\trows : 4,\n\t\t// number of columns\n\t\tcolumns : 10,\n\t\tw1024 : { rows : 3, columns : 8 },\n\t\tw768 : {rows : 3,columns : 7 },\n\t\tw480 : {rows : 3,columns : 5 },\n\t\tw320 : {rows : 2,columns : 4 },\n\t\tw240 : {rows : 2,columns : 3 },\n\t\t// step: number of items that are replaced at the same time\n\t\t// random || [some number]\n\t\t// note: for performance issues, the number \"can't\" be > options.maxStep\n\t\tstep : 'random',\n\t\t// change it as you wish..\n\t\tmaxStep : 3,\n\t\t// prevent user to click the items\n\t\tpreventClick : true,\n\t\t// animation type\n\t\t// showHide || fadeInOut ||\n\t\t// slideLeft || slideRight || slideTop || slideBottom ||\n\t\t// rotateBottom || rotateLeft || rotateRight || rotateTop ||\n\t\t// scale ||\n\t\t// rotate3d ||\n\t\t// rotateLeftScale || rotateRightScale || rotateTopScale || rotateBottomScale ||\n\t\t// random\n\t\tanimType : 'random',\n\t\t// animation speed\n\t\tanimSpeed : 800,\n\t\t// animation easings\n\t\tanimEasingOut : 'linear',\n\t\tanimEasingIn: 'linear',\n\t\t// the item(s) will be replaced every 3 seconds\n\t\t// note: for performance issues, the time \"can't\" be < 300 ms\n\t\tinterval : 3000,\n\t\t// if false the animations will not start\n\t\t// use false if onhover is true for example\n\t\tslideshow : true,\n\t\t// if true the items will switch when hovered\n\t\tonhover : false,\n\t\t// ids of elements that shouldn't change\n\t\tnochange : [],\n\t\t// callback function when drawn\n\t\tonDraw : function(){},\n\t\t// Height to Width Ratio (Height/Width). A 0.5 ratio would be used for an image that is twice as large as it's height. Default is 1 (square images).\n\t\theightToWidthRatio : 1,\n\t\tsubImg : false\n\t};\n\n\t$.GridRotator.prototype = {\n\n\t\t_init : function( options ) {\n\n\t\t\t// options\n\t\t\tthis.options = $.extend( true, {}, $.GridRotator.defaults, options );\n\t\t\t// cache some elements + variables\n\t\t\tthis._config();\n\n\t\t},\n\t\t_config : function() {\n\n\t\t\tvar self = this,\n\t\t\t\ttransEndEventNames = {\n\t\t\t\t\t'WebkitTransition' : 'webkitTransitionEnd',\n\t\t\t\t\t'MozTransition' : 'transitionend',\n\t\t\t\t\t'OTransition' : 'oTransitionEnd',\n\t\t\t\t\t'msTransition' : 'MSTransitionEnd',\n\t\t\t\t\t'transition' : 'transitionend'\n\t\t\t\t};\n\n\t\t\t// support CSS transitions and 3d transforms\n\t\t\tthis.supportTransitions = Modernizr.csstransitions;\n\t\t\tthis.supportTransforms3D = Modernizr.csstransforms3d;\n\n\t\t\tthis.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.gridrotator';\n\n\t\t\t// all animation types for the random option\n\t\t\tthis.animTypes = this.supportTransforms3D ? [\n\t\t\t\t'fadeInOut',\n\t\t\t\t'slideLeft',\n\t\t\t\t'slideRight',\n\t\t\t\t'slideTop',\n\t\t\t\t'slideBottom',\n\t\t\t\t'rotateLeft',\n\t\t\t\t'rotateRight',\n\t\t\t\t'rotateTop',\n\t\t\t\t'rotateBottom',\n\t\t\t\t'scale',\n\t\t\t\t'rotate3d',\n\t\t\t\t'rotateLeftScale',\n\t\t\t\t'rotateRightScale',\n\t\t\t\t'rotateTopScale',\n\t\t\t\t'rotateBottomScale' ] :\n\t\t\t\t[ 'fadeInOut', 'slideLeft', 'slideRight', 'slideTop', 'slideBottom' ];\n\n\t\t\tthis.animType = this.options.animType;\n\n\t\t\tif( this.animType !== 'random' && !this.supportTransforms3D && $.inArray( this.animType, this.animTypes ) === -1 && this.animType !== 'showHide' ) {\n\n\t\t\t\t// fallback to 'fadeInOut' if user sets a type which is not supported\n\t\t\t\tthis.animType = 'fadeInOut';\n\n\t\t\t}\n\n\t\t\tthis.animTypesTotal\t= this.animTypes.length;\n\n\t\t\t// the <ul> where the items are placed\n\t\t\tthis.$list = this.$el.children( 'ul' );\n\t\t\t// remove images and add background-image to anchors\n\t\t\t// preload the images before\n\t\t\tvar loaded = 0,\n\t\t\t\tsubbed = 0,\n\t\t\t\t$imgs = this.$list.find( 'img' ),\n\t\t\t\tcount = $imgs.length,\n\t\t\t\tsubColors = [\"#D92727\", \"#FFE433\", \"#0DB8B5\"];\n\n\n\t\t\t// Check if the substitute image is available\n\t\t\tif( self.options.subImg ) {\n\n\t\t\t\t$( '<img/>' ).error( function() {\n\n\t\t\t\t\tself.options.subImg = false;\n\n\t\t\t\t} ).attr('src', self.options.subImg);\n\n\t\t\t}\n\n\t\t\t$imgs.each( function() {\n\n\t\t\t\tvar $img = $( this ), src = $img.attr( 'src' );\n\n\t\t\t\t$( '<img/>' ).load( function() {\n\n\t\t\t\t\t++loaded;\n\t\t\t\t\t$img.parent().css( 'background-image', 'url(' + src + ')' );\n\n\t\t\t\t\t/*This conditional block should be moved out to remove redundancy =)*/\n\t\t\t\t\tif( loaded + subbed === count ) {\n\n\t\t\t\t\t\t$imgs.remove();\n\t\t\t\t\t\tself.$el.removeClass( 'ri-grid-loading' );\n\t\t\t\t\t\t// the items\n\t\t\t\t\t\tself.$items = self.$list.children( 'li' );\n\t\t\t\t\t\t// make a copy of the items\n\t\t\t\t\t\tself.$itemsCache = self.$items.clone();\n\t\t\t\t\t\t// total number of items\n\t\t\t\t\t\tself.itemsTotal = self.$items.length;\n\t\t\t\t\t\t// the items that will be out of the grid\n\t\t\t\t\t\t// actually the item's child (anchor element)\n\t\t\t\t\t\tself.outItems= [];\n\t\t\t\t\t\tself._layout( function() {\n\t\t\t\t\t\t\tself._initEvents();\n\t\t\t\t\t\t} );\n\t\t\t\t\t\t// replace [options.step] items after [options.interval] time\n\t\t\t\t\t\t// the items that go out are randomly chosen, while the ones that get in\n\t\t\t\t\t\t// follow a \"First In First Out\" logic\n\t\t\t\t\t\tself._start();\n\n\t\t\t\t\t}\n\n\t\t\t\t} ).attr( 'src', src );\n\n\t\t\t\t// If something is wrong with the image…\n\t\t\t\t$( '<img/>' ).error( function() {\n\n\t\t\t\t\t++subbed;\n\n\t\t\t\t\t// Are there any substitute images?\n\t\t\t\t\tif( self.options.subImg ) {\n\n\t\t\t\t\t\t$img.parent().css( 'background-image', 'url(' + self.options.subImg + ')' );\n\n\t\t\t\t\t}\n\n\t\t\t\t\telse {\n\n\t\t\t\t\t\tvar color = Math.floor(Math.random() * 3)\n\t\t\t\t\t\t$img.parent().css( 'background', subColors[color] );\n\n\t\t\t\t\t}\n\n\t\t\t\t\t// console.log(self.options)\n\n\t\t\t\t\t/*This conditional block should be moved out to remove redundancy =)*/\n\t\t\t\t\tif( loaded + subbed === count ) {\n\n\t\t\t\t\t\t$imgs.remove();\n\t\t\t\t\t\tself.$el.removeClass( 'ri-grid-loading' );\n\t\t\t\t\t\t// the items\n\t\t\t\t\t\tself.$items = self.$list.children( 'li' );\n\t\t\t\t\t\t// make a copy of the items\n\t\t\t\t\t\tself.$itemsCache = self.$items.clone();\n\t\t\t\t\t\t// total number of items\n\t\t\t\t\t\tself.itemsTotal = self.$items.length;\n\t\t\t\t\t\t// the items that will be out of the grid\n\t\t\t\t\t\t// actually the item's child (anchor element)\n\t\t\t\t\t\tself.outItems= [];\n\t\t\t\t\t\tself._layout( function() {\n\t\t\t\t\t\t\tself._initEvents();\n\t\t\t\t\t\t} );\n\t\t\t\t\t\t// replace [options.step] items after [options.interval] time\n\t\t\t\t\t\t// the items that go out are randomly chosen, while the ones that get in\n\t\t\t\t\t\t// follow a \"First In First Out\" logic\n\t\t\t\t\t\tself._start();\n\n\t\t\t\t\t}\n\n\t\t\t\t}\t).attr( 'src', src );\n\n\n\n\t\t\t} );\n\n\t\t},\n\t\t_layout : function( callback ) {\n\n\t\t\tvar self = this;\n\n\t\t\t// sets the grid dimentions based on the container's width\n\t\t\tthis._setGridDim();\n\n\t\t\t// reset\n\t\t\tthis.$list.empty();\n\t\t\tthis.$items = this.$itemsCache.clone().appendTo( this.$list );\n\n\t\t\tvar $outItems = this.$items.filter( ':gt(' + ( this.showTotal - 1 ) + ')' ),\n\t\t\t\t$outAItems = $outItems.children( 'a' );\n\n\t\t\tthis.outItems.length = 0;\n\n\t\t\t$outAItems.each( function( i ) {\n\t\t\t\tself.outItems.push( $( this ) );\n\t\t\t} );\n\n\t\t\t$outItems.remove();\n\n\t\t\t\t// container's width\n\t\t\tvar containerWidth = ( document.defaultView ) ? parseInt( document.defaultView.getComputedStyle( this.$el.get( 0 ), null ).width ) : this.$el.width(),\n\t\t\t\t// item's width\n\t\t\t\titemWidth = Math.floor( containerWidth / this.columns ),\n\t\t\t\t// calculate gap\n\t\t\t\tgapWidth = containerWidth - ( this.columns * Math.floor( itemWidth ) );\n\n\t\t\tfor( var i = 0; i < this.rows; ++i ) {\n\n\t\t\t\tfor( var j = 0; j < this.columns; ++j ) {\n\n\t\t\t\t\tvar idx = this.columns * i + j,\n\t\t\t\t\t\t$item = this.$items.eq( idx );\n\n\t\t\t\t\t$item.css( {\n\t\t\t\t\t\twidth : j < Math.floor( gapWidth ) ? itemWidth + 1 : itemWidth,\n\t\t\t\t\t\theight : Math.floor( itemWidth * this.options.heightToWidthRatio )\n\t\t\t\t\t} );\n\n\t\t\t\t\tif( $.inArray( idx, this.options.nochange ) !== -1 ) {\n\t\t\t\t\t\t$item.addClass( 'ri-nochange' ).data( 'nochange', true );\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\tif( this.options.preventClick ) {\n\n\t\t\t\tthis.$items.children().css( 'cursor', 'default' ).on( 'click.gridrotator', false );\n\n\t\t\t}\n\n\t\t\tif( callback ) {\n\t\t\t\tcallback.call();\n\t\t\t}\n\n\t\t\tthis.options.onDraw.call(this);\n\n\t\t},\n\t\t// set the grid rows and columns\n\t\t_setGridDim\t : function() {\n\n\t\t\t// container's width\n\t\t\tvar c_w = this.$el.width();\n\n\t\t\t// we will choose the number of rows/columns according to the container's width and the values set in the plugin options\n\t\t\tswitch( true ) {\n\t\t\t\tcase ( c_w < 240 ) : this.rows = this.options.w240.rows; this.columns = this.options.w240.columns; break;\n\t\t\t\tcase ( c_w < 320 ) : this.rows = this.options.w320.rows; this.columns = this.options.w320.columns; break;\n\t\t\t\tcase ( c_w < 480 ) : this.rows = this.options.w480.rows; this.columns = this.options.w480.columns; break;\n\t\t\t\tcase ( c_w < 768 ) : this.rows = this.options.w768.rows; this.columns = this.options.w768.columns; break;\n\t\t\t\tcase ( c_w < 1024 ) : this.rows = this.options.w1024.rows; this.columns = this.options.w1024.columns; break;\n\t\t\t\tdefault : this.rows = this.options.rows; this.columns = this.options.columns; break;\n\t\t\t}\n\n\t\t\tthis.showTotal = this.rows * this.columns;\n\n\t\t},\n\t\t// init window resize event\n\t\t_initEvents : function() {\n\n\t\t\tvar self = this;\n\n\t\t\t$window.on( 'debouncedresize.gridrotator', function() {\n\t\t\t\tself._layout();\n\t\t\t} );\n\n\t\t\t// use the property name to generate the prefixed event name\n\t\t\tvar visProp = getHiddenProp();\n\n\t\t\t// HTML5 PageVisibility API\n\t\t\t// http://www.html5rocks.com/en/tutorials/pagevisibility/intro/\n\t\t\t// by Joe Marini (@joemarini)\n\t\t\tif (visProp) {\n\n\t\t\t\tvar evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';\n\t\t\t\tdocument.addEventListener(evtname, function() { self._visChange(); } );\n\n\t\t\t}\n\n\t\t\tif( !Modernizr.touch && this.options.onhover ) {\n\n\t\t\t\tself.$items.on( 'mouseenter.gridrotator', function() {\n\n\t\t\t\t\tvar $item = $( this );\n\t\t\t\t\tif( !$item.data( 'active' ) && !$item.data( 'hovered' ) && !$item.data( 'nochange' ) ) {\n\t\t\t\t\t\t$item.data( 'hovered', true );\n\t\t\t\t\t\tself._replace( $item );\n\t\t\t\t\t}\n\n\t\t\t\t} ).on( 'mouseleave.gridrotator', function() {\n\n\t\t\t\t\t$( this ).data( 'hovered', false );\n\n\t\t\t\t} );\n\n\t\t\t}\n\n\t\t},\n\t\t_visChange : function() {\n\n\t\t\tisHidden() ? clearTimeout( this.playtimeout ) : this._start();\n\n\t\t},\n\t\t// start rotating elements\n\t\t_start : function() {\n\n\t\t\tif( this.showTotal < this.itemsTotal && this.options.slideshow ) {\n\t\t\t\tthis._showNext();\n\t\t\t}\n\n\t\t},\n\t\t// get which type of animation\n\t\t_getAnimType : function() {\n\n\t\t\treturn this.animType === 'random' ? this.animTypes[ Math.floor( Math.random() * this.animTypesTotal ) ] : this.animType;\n\n\t\t},\n\t\t// get css properties for the transition effect\n\t\t_getAnimProperties : function( $out ) {\n\n\t\t\tvar startInProp = {}, startOutProp = {}, endInProp = {}, endOutProp = {},\n\t\t\t\tanimType = this._getAnimType(), speed, delay = 0;\n\n\t\t\tswitch( animType ) {\n\n\t\t\t\tcase 'showHide' :\n\n\t\t\t\t\tspeed = 0;\n\t\t\t\t\tendOutProp.opacity = 0;\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'fadeInOut' :\n\n\t\t\t\t\tendOutProp.opacity = 0;\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'slideLeft' :\n\n\t\t\t\t\tstartInProp.left = $out.width();\n\t\t\t\t\tendInProp.left = 0;\n\t\t\t\t\tendOutProp.left = -$out.width();\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'slideRight' :\n\n\t\t\t\t\tstartInProp.left = -$out.width();\n\t\t\t\t\tendInProp.left = 0;\n\t\t\t\t\tendOutProp.left = $out.width();\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'slideTop' :\n\n\t\t\t\t\tstartInProp.top = $out.height();\n\t\t\t\t\tendInProp.top = 0;\n\t\t\t\t\tendOutProp.top = -$out.height();\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'slideBottom' :\n\n\t\t\t\t\tstartInProp.top = -$out.height();\n\t\t\t\t\tendInProp.top = 0;\n\t\t\t\t\tendOutProp.top = $out.height();\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'rotateLeft' :\n\n\t\t\t\t\tspeed = this.options.animSpeed / 2;\n\t\t\t\t\tstartInProp.transform = 'rotateY(90deg)';\n\t\t\t\t\tendInProp.transform = 'rotateY(0deg)';\n\t\t\t\t\tdelay = speed;\n\t\t\t\t\tendOutProp.transform = 'rotateY(-90deg)';\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'rotateRight' :\n\n\t\t\t\t\tspeed = this.options.animSpeed / 2;\n\t\t\t\t\tstartInProp.transform = 'rotateY(-90deg)';\n\t\t\t\t\tendInProp.transform = 'rotateY(0deg)';\n\t\t\t\t\tdelay = speed;\n\t\t\t\t\tendOutProp.transform = 'rotateY(90deg)';\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'rotateTop' :\n\n\t\t\t\t\tspeed = this.options.animSpeed / 2;\n\t\t\t\t\tstartInProp.transform= 'rotateX(90deg)';\n\t\t\t\t\tendInProp.transform = 'rotateX(0deg)';\n\t\t\t\t\tdelay = speed;\n\t\t\t\t\tendOutProp.transform = 'rotateX(-90deg)';\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'rotateBottom' :\n\n\t\t\t\t\tspeed = this.options.animSpeed / 2;\n\t\t\t\t\tstartInProp.transform = 'rotateX(-90deg)';\n\t\t\t\t\tendInProp.transform = 'rotateX(0deg)';\n\t\t\t\t\tdelay = speed;\n\t\t\t\t\tendOutProp.transform = 'rotateX(90deg)';\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'scale' :\n\n\t\t\t\t\tspeed = this.options.animSpeed / 2;\n\t\t\t\t\tstartInProp.transform = 'scale(0)';\n\t\t\t\t\tstartOutProp.transform = 'scale(1)';\n\t\t\t\t\tendInProp.transform = 'scale(1)';\n\t\t\t\t\tdelay = speed;\n\t\t\t\t\tendOutProp.transform = 'scale(0)';\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'rotateLeftScale' :\n\n\t\t\t\t\tstartOutProp.transform = 'scale(1)';\n\t\t\t\t\tspeed = this.options.animSpeed / 2;\n\t\t\t\t\tstartInProp.transform = 'scale(0.3) rotateY(90deg)';\n\t\t\t\t\tendInProp.transform = 'scale(1) rotateY(0deg)';\n\t\t\t\t\tdelay = speed;\n\t\t\t\t\tendOutProp.transform = 'scale(0.3) rotateY(-90deg)';\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'rotateRightScale' :\n\n\t\t\t\t\tstartOutProp.transform = 'scale(1)';\n\t\t\t\t\tspeed = this.options.animSpeed / 2;\n\t\t\t\t\tstartInProp.transform = 'scale(0.3) rotateY(-90deg)';\n\t\t\t\t\tendInProp.transform = 'scale(1) rotateY(0deg)';\n\t\t\t\t\tdelay = speed;\n\t\t\t\t\tendOutProp.transform = 'scale(0.3) rotateY(90deg)';\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'rotateTopScale' :\n\n\t\t\t\t\tstartOutProp.transform = 'scale(1)';\n\t\t\t\t\tspeed = this.options.animSpeed / 2;\n\t\t\t\t\tstartInProp.transform = 'scale(0.3) rotateX(90deg)';\n\t\t\t\t\tendInProp.transform = 'scale(1) rotateX(0deg)';\n\t\t\t\t\tdelay = speed;\n\t\t\t\t\tendOutProp.transform = 'scale(0.3) rotateX(-90deg)';\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'rotateBottomScale' :\n\n\t\t\t\t\tstartOutProp.transform = 'scale(1)';\n\t\t\t\t\tspeed = this.options.animSpeed / 2;\n\t\t\t\t\tstartInProp.transform = 'scale(0.3) rotateX(-90deg)';\n\t\t\t\t\tendInProp.transform = 'scale(1) rotateX(0deg)';\n\t\t\t\t\tdelay = speed;\n\t\t\t\t\tendOutProp.transform = 'scale(0.3) rotateX(90deg)';\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'rotate3d' :\n\n\t\t\t\t\tspeed = this.options.animSpeed / 2;\n\t\t\t\t\tstartInProp.transform = 'rotate3d( 1, 1, 0, 90deg )';\n\t\t\t\t\tendInProp.transform = 'rotate3d( 1, 1, 0, 0deg )';\n\t\t\t\t\tdelay = speed;\n\t\t\t\t\tendOutProp.transform = 'rotate3d( 1, 1, 0, -90deg )';\n\t\t\t\t\tbreak;\n\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tstartInProp : startInProp,\n\t\t\t\tstartOutProp : startOutProp,\n\t\t\t\tendInProp : endInProp,\n\t\t\t\tendOutProp : endOutProp,\n\t\t\t\tdelay : delay,\n\t\t\t\tanimSpeed : speed != undefined ? speed : this.options.animSpeed\n\t\t\t};\n\n\t\t},\n\t\t// show next [option.step] elements\n\t\t_showNext : function( time ) {\n\n\t\t\tvar self = this;\n\n\t\t\tclearTimeout( this.playtimeout );\n\n\t\t\tthis.playtimeout = setTimeout( function() {\n\n\t\t\t\tvar step = self.options.step, max= self.options.maxStep, min = 1;\n\n\t\t\t\tif( max > self.showTotal ) {\n\t\t\t\t\tmax = self.showTotal;\n\t\t\t\t}\n\n\t\t\t\t\t// number of items to swith at this point of time\n\t\t\t\tvar nmbOut\t= step === 'random' ? Math.floor( Math.random() * max + min ) : Math.min( Math.abs( step ) , max ) ,\n\t\t\t\t\t// array with random indexes. These will be the indexes of the items we will replace\n\t\t\t\t\trandArr\t= self._getRandom( nmbOut, self.showTotal );\n\n\t\t\t\tfor( var i = 0; i < nmbOut; ++i ) {\n\n\t\t\t\t\t// element to go out\n\t\t\t\t\tvar $out = self.$items.eq( randArr[ i ] );\n\n\t\t\t\t\t// if element is active, which means it is currently animating,\n\t\t\t\t\t// then we need to get different positions..\n\t\t\t\t\tif( $out.data( 'active' ) || $out.data( 'nochange' ) ) {\n\n\t\t\t\t\t\t// one of the items is active, call again..\n\t\t\t\t\t\tself._showNext( 1 );\n\t\t\t\t\t\treturn false;\n\n\t\t\t\t\t}\n\n\t\t\t\t\tself._replace( $out );\n\n\t\t\t\t}\n\n\t\t\t\t// again and again..\n\t\t\t\tself._showNext();\n\n\t\t\t}, time || Math.max( Math.abs( this.options.interval ) , 300 ) );\n\n\t\t},\n\t\t_replace : function( $out ) {\n\n\t\t\t$out.data( 'active', true );\n\n\t\t\tvar self = this,\n\t\t\t\t$outA = $out.children( 'a:last' ),\n\t\t\t\tnewElProp = {\n\t\t\t\t\twidth : $outA.width(),\n\t\t\t\t\theight : $outA.height()\n\t\t\t\t};\n\n\t\t\t// element stays active\n\t\t\t$out.data( 'active', true );\n\n\t\t\t// get the element (anchor) that will go in (first one inserted in this.outItems)\n\t\t\tvar $inA = this.outItems.shift();\n\n\t\t\t// save element that went out\n\t\t\tthis.outItems.push( $outA.clone().css( 'transition', 'none' ) );\n\n\t\t\t// prepend in element\n\t\t\t$inA.css( newElProp ).prependTo( $out );\n\n\t\t\tvar animProp = this._getAnimProperties( $outA );\n\n\t\t\t$inA.css( animProp.startInProp );\n\t\t\t$outA.css( animProp.startOutProp );\n\n\t\t\tthis._setTransition( $inA, 'all', animProp.animSpeed, animProp.delay, this.options.animEasingIn );\n\t\t\tthis._setTransition( $outA, 'all', animProp.animSpeed, 0, this.options.animEasingOut );\n\n\t\t\tthis._applyTransition( $inA, animProp.endInProp, animProp.animSpeed, function() {\n\n\t\t\t\tvar $el = $( this ),\n\t\t\t\t\tt = animProp.animSpeed === self.options.animSpeed && isEmpty( animProp.endInProp ) ? animProp.animSpeed : 0;\n\n\t\t\t\tsetTimeout( function() {\n\n\t\t\t\t\tif( self.supportTransitions ) {\n\t\t\t\t\t\t$el.off( self.transEndEventName );\n\t\t\t\t\t}\n\n\t\t\t\t\t$el.next().remove();\n\t\t\t\t\t$el.parent().data( 'active', false );\n\n\t\t\t\t}, t );\n\n\t\t\t}, animProp.animSpeed === 0 || isEmpty( animProp.endInProp ) );\n\t\t\tthis._applyTransition( $outA, animProp.endOutProp, animProp.animSpeed );\n\n\t\t},\n\t\t_getRandom : function( cnt, limit ) {\n\n\t\t\tvar randArray = [];\n\n\t\t\tfor( var i = 0; i < limit; ++i ) {\n\t\t\t\trandArray.push( i )\n\t\t\t}\n\n\t\t\tshuffle(randArray);\n\n\t\t\treturn randArray.slice( 0, cnt );\n\n\t\t},\n\t\t_setTransition : function( el, prop, speed, delay, easing ) {\n\n\t\t\tsetTimeout( function() {\n\t\t\t\tel.css( 'transition', prop + ' ' + speed + 'ms ' + delay + 'ms ' + easing );\n\t\t\t}, 25 );\n\n\t\t},\n\t\t_applyTransition : function( el, styleCSS, speed, fncomplete, force ) {\n\n\t\t\tvar self = this;\n\t\t\tsetTimeout( function() {\n\t\t\t\t$.fn.applyStyle = self.supportTransitions ? $.fn.css : $.fn.animate;\n\n\t\t\t\tif( fncomplete && self.supportTransitions ) {\n\n\t\t\t\t\tel.on( self.transEndEventName, fncomplete );\n\n\t\t\t\t\tif( force ) {\n\t\t\t\t\t\tfncomplete.call( el );\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t\tfncomplete = fncomplete || function() { return false; };\n\n\t\t\t\tel.stop().applyStyle( styleCSS, $.extend( true, [], { duration : speed + 'ms', complete : fncomplete } ) );\n\t\t\t}, 25 );\n\n\t\t}\n\n\t};\n\n\tvar logError = function( message ) {\n\n\t\tif ( window.console ) {\n\n\t\t\twindow.console.error( message );\n\n\t\t}\n\n\t};\n\n\t$.fn.gridrotator = function( options ) {\n\n\t\tvar instance = $.data( this, 'gridrotator' );\n\n\t\tif ( typeof options === 'string' ) {\n\n\t\t\tvar args = Array.prototype.slice.call( arguments, 1 );\n\n\t\t\tthis.each(function() {\n\n\t\t\t\tif ( !instance ) {\n\n\t\t\t\t\tlogError( \"cannot call methods on gridrotator prior to initialization; \" +\n\t\t\t\t\t\"attempted to call method '\" + options + \"'\" );\n\t\t\t\t\treturn;\n\n\t\t\t\t}\n\n\t\t\t\tif ( !$.isFunction( instance[options] ) || options.charAt(0) === \"_\" ) {\n\n\t\t\t\t\tlogError( \"no such method '\" + options + \"' for gridrotator instance\" );\n\t\t\t\t\treturn;\n\n\t\t\t\t}\n\n\t\t\t\tinstance[ options ].apply( instance, args );\n\n\t\t\t});\n\n\t\t}\n\t\telse {\n\n\t\t\tthis.each(function() {\n\n\t\t\t\tif ( instance ) {\n\n\t\t\t\t\tinstance._init();\n\n\t\t\t\t}\n\t\t\t\telse {\n\n\t\t\t\t\tinstance = $.data( this, 'gridrotator', new $.GridRotator( options, this ) );\n\n\t\t\t\t}\n\n\t\t\t});\n\n\t\t}\n\n\t\treturn instance;\n\n\t};\n\n} )( jQuery, window );\n"
  },
  {
    "path": "js/modernizr.custom.26633.js",
    "content": "/* Modernizr 2.6.2 (Custom Build) | MIT & BSD\n * Build: http://modernizr.com/download/#-backgroundsize-csstransforms3d-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load\n */\n;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+\";\")+(b||\"\"))}function B(a,b){return typeof a===b}function C(a,b){return!!~(\"\"+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,\"-\")&&j[e]!==c)return b==\"pfx\"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,\"function\")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+\" \"+o.join(d+\" \")+d).split(\" \");return B(b,\"string\")||B(b,\"undefined\")?D(e,b):(e=(a+\" \"+p.join(d+\" \")+d).split(\" \"),E(e,b,c))}var d=\"2.6.2\",e={},f=!0,g=b.documentElement,h=\"modernizr\",i=b.createElement(h),j=i.style,k,l={}.toString,m=\" -webkit- -moz- -o- -ms- \".split(\" \"),n=\"Webkit Moz O ms\",o=n.split(\" \"),p=n.toLowerCase().split(\" \"),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement(\"div\"),m=b.body,n=m||b.createElement(\"body\");if(parseInt(d,10))while(d--)j=b.createElement(\"div\"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=[\"&#173;\",'<style id=\"s',h,'\">',a,\"</style>\"].join(\"\"),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background=\"\",n.style.overflow=\"hidden\",k=g.style.overflow,g.style.overflow=\"hidden\",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,\"undefined\")&&!B(x.call,\"undefined\")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],\"undefined\")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!=\"function\")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.touch=function(){var c;return\"ontouchstart\"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w([\"@media (\",m.join(\"touch-enabled),(\"),h,\")\",\"{#modernizr{top:9px;position:absolute}}\"].join(\"\"),function(a){c=a.offsetTop===9}),c},q.backgroundsize=function(){return F(\"backgroundSize\")},q.csstransforms3d=function(){var a=!!F(\"perspective\");return a&&\"webkitPerspective\"in g.style&&w(\"@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}\",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F(\"transition\")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?\"\":\"no-\")+v));return e.addTest=function(a,b){if(typeof a==\"object\")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b==\"function\"?b():b,typeof f!=\"undefined\"&&f&&(g.className+=\" \"+(b?\"\":\"no-\")+a),e[a]=b}return e},z(\"\"),i=k=null,function(a,b){function k(a,b){var c=a.createElement(\"p\"),d=a.getElementsByTagName(\"head\")[0]||a.documentElement;return c.innerHTML=\"x<style>\"+b+\"</style>\",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a==\"string\"?a.split(\" \"):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function(\"h,f\",\"return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(\"+l().join().replace(/\\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c(\"'+a+'\")'})+\");return n}\")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,\"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}\")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g=\"_html5shiv\",h=0,i={},j;(function(){try{var a=b.createElement(\"a\");a.innerHTML=\"<xyz></xyz>\",f=\"hidden\"in a,j=a.childNodes.length==1||function(){b.createElement(\"a\");var a=b.createDocumentFragment();return typeof a.cloneNode==\"undefined\"||typeof a.createDocumentFragment==\"undefined\"||typeof a.createElement==\"undefined\"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||\"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video\",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:\"default\",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,\"pfx\")},g.className=g.className.replace(/(^|\\s)no-js(\\s|$)/,\"$1$2\")+(f?\" js \"+t.join(\" \"):\"\"),e}(this,this.document),function(a,b,c){function d(a){return\"[object Function]\"==o.call(a)}function e(a){return\"string\"==typeof a}function f(){}function g(a){return!a||\"loaded\"==a||\"complete\"==a||\"uninitialized\"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){(\"c\"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){\"img\"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),\"object\"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height=\"0\",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),\"img\"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||\"j\",e(a)?i(\"c\"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName(\"script\")[0],o={}.toString,p=[],q=0,r=\"MozAppearance\"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&\"[object Opera]\"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?\"object\":l?\"script\":\"img\",v=l?\"script\":u,w=Array.isArray||function(a){return\"[object Array]\"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split(\"!\"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split(\"=\"),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(\".\").pop().split(\"?\").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split(\"/\").pop().split(\"?\")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&\"css\"==i.url.split(\".\").pop().split(\"?\").shift()?\"c\":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState=\"loading\",b.addEventListener(\"DOMContentLoaded\",A=function(){b.removeEventListener(\"DOMContentLoaded\",A,0),b.readyState=\"complete\"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement(\"script\"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement(\"link\"),j,c=i?h:c||f;e.href=a,e.rel=\"stylesheet\",e.type=\"text/css\";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};"
  }
]