Repository: codrops/AnimatedResponsiveImageGrid
Branch: master
Commit: 60aa60b8871a
Files: 15
Total size: 83.8 KB
Directory structure:
gitextract_utmmypxf/
├── README.md
├── bower.json
├── css/
│ ├── demo.css
│ ├── fallback.css
│ └── style.css
├── images/
│ └── ImageAttribution.txt
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── index5.html
├── index6.html
├── index7.html
└── js/
├── jquery.gridrotator.js
└── modernizr.custom.26633.js
================================================
FILE CONTENTS
================================================
================================================
FILE: README.md
================================================
AnimatedResponsiveImageGrid
=========
A 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.
[article on Codrops](http://tympanus.net/codrops/?p=10139)
[demo](http://tympanus.net/Development/AnimatedResponsiveImageGrid/)
Licensed under the MIT License
================================================
FILE: bower.json
================================================
{
"name": "AnimatedResponsiveImageGrid",
"version": "1.0.0",
"homepage": "https://github.com/codrops/AnimatedResponsiveImageGrid",
"authors": [
"Pedro Botelho"
],
"description": "A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings.",
"main": "js/jquery.gridrotator.js",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
================================================
FILE: css/demo.css
================================================
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* General Demo Style */
body {
font-family: 'Lato', 'Myriad Pro','Trebuchet MS', sans-serif;
background: #f9f9f9 url(../images/bg.jpg) repeat top left;
font-weight: 300;
font-size: 14px;
color: #333;
overflow: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
a img {
border: none;
}
.container {
position: relative;
background: transparent url(../images/light.png) fixed no-repeat center top;
}
.codrops-header{
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
.codrops-header h1,
.codrops-header-special h1{
font-size: 26px;
line-height: 26px;
margin: 0;
position: relative;
font-weight: 700;
color: #000;
}
.codrops-header h2,
.codrops-header-special h2{
font-size: 14px;
line-height: 14px;
font-weight: 300;
margin: 0;
padding: 3px 5px;
margin: 10px 0 5px;
color: #000;
display: inline-block;
}
/* Header Style */
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255,255,255,0.3);
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
.codrops-info {
padding: 20px;
margin: 0 auto;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
line-height: 22px;
}
/* Demo Buttons Style */
.codrops-demos{
text-align: center;
display: block;
line-height: 30px;
padding: 5px 0px;
}
.codrops-demos a{
display: inline-block;
margin: 0px 10px;
font-weight: bold;
color: #333;
line-height: 20px;
font-size: 12px;
background: #fff;
background: rgba(255,255,255,0.4);
padding: 0 4px;
}
.codrops-demos a:hover{
border-bottom: 2px solid #f7bb6d;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
border-bottom: 2px solid #f7bb6d;
color: #777;
}
.codrops-header-special{
position: absolute;
top: 80px;
left: 0px;
text-align: left;
}
.codrops-header-special h2{
padding: 5px 20px 5px 10px;
color: #fff;
line-height: 26px;
background: #000;
background: rgba(0,0,0,0.8);
}
.codrops-header-special h1{
background: #000;
background: rgba(0,0,0,0.8);
display: inline-block;
font-size: 32px;
line-height: 32px;
padding: 20px;
color: #fff;
text-shadow: 0 0 1px #fff;
}
.codrops-header-special .codrops-demos{
text-align: left;
}
.codrops-header-special .codrops-demos a{
background: rgba(255,255,255,1);
}
.codrops-header-special .codrops-info{
color: #fff;
background: #000;
background: rgba(0,0,0,0.8);
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
padding: 5px 20px 5px 10px;
line-height: 26px;
margin-top: 30px;
text-align: left;
}
================================================
FILE: css/fallback.css
================================================
.ri-grid{
width: 600px;
}
.ri-grid ul li,
.ri-grid ul li a{
width: 100px;
height: 100px;
}
.ri-grid ul li a img{
width: 100%;
}
================================================
FILE: css/style.css
================================================
.ri-grid{
margin: 30px auto 30px;
position: relative;
height: auto;
}
.ri-grid ul {
list-style: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
/* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.ri-grid ul:before,
.ri-grid ul:after{
content: '';
display: table;
}
.ri-grid ul:after {
clear: both;
}
.ri-grid ul {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.ri-grid ul li {
-webkit-perspective: 400px;
-moz-perspective: 400px;
-o-perspective: 400px;
-ms-perspective: 400px;
perspective: 400px;
margin: 0;
padding: 0;
float: left;
position: relative;
display: block;
overflow: hidden;
background: #000;
}
.ri-grid ul li a{
display: block;
outline: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
background-color: #333;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Grid wrapper sizes */
.ri-grid-size-1{
width: 55%;
}
.ri-grid-size-2{
width: 100%;
}
.ri-grid-size-3{
width: 100%;
margin-top: 0px;
}
/* Shadow style */
.ri-shadow:after,
.ri-shadow:before{
content: "";
position: absolute;
z-index: -2;
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
max-width: 300px;
max-height: 100px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.ri-shadow:after{
right: 10px;
left: auto;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
.ri-grid-loading:after,
.ri-grid-loading:before{
display: none;
}
.ri-loading-image{
display: none;
}
.ri-grid-loading .ri-loading-image{
position: relative;
width: 30px;
height: 30px;
left: 50%;
margin: 100px 0 0 -15px;
display: block;
}
================================================
FILE: images/ImageAttribution.txt
================================================
Images by Sherman Geronimo-Tan: http://www.flickr.com/people/smanography/
http://creativecommons.org/licenses/by/2.0/deed.en
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Animated Responsive Image Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Responsive Image Grid - Cycling through a set of images in a responsive grid." />
<meta name="keywords" content="grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
<![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/">
<strong>« Previous Demo: </strong>Photo Booth Strips with Lightbox
</a>
<span class="right">
<a href="http://www.flickr.com/people/smanography/">Images by Sherman Geronimo-Tan</a>
<a href="http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header class="codrops-header">
<h1>Animated Responsive Image Grid</h1>
<h2>Cycling through a set of images in a responsive grid.</h2>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
<a href="index7.html">Demo 7</a>
</nav>
</header>
<section class="main">
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
<img class="ri-loading-image" src="images/loading.gif"/>
<ul>
<li><a href="#"><img src="images/medium/1.jpg"/></a></li>
<li><a href="#"><img src="images/medium/2.jpg"/></a></li>
<li><a href="#"><img src="images/medium/3.jpg"/></a></li>
<li><a href="#"><img src="images/medium/4.jpg"/></a></li>
<li><a href="#"><img src="images/medium/5.jpg"/></a></li>
<li><a href="#"><img src="images/medium/6.jpg"/></a></li>
<li><a href="#"><img src="images/medium/7.jpg"/></a></li>
<li><a href="#"><img src="images/medium/8.jpg"/></a></li>
<li><a href="#"><img src="images/medium/9.jpg"/></a></li>
<li><a href="#"><img src="images/medium/10.jpg"/></a></li>
<li><a href="#"><img src="images/medium/11.jpg"/></a></li>
<li><a href="#"><img src="images/medium/12.jpg"/></a></li>
<li><a href="#"><img src="images/medium/13.jpg"/></a></li>
<li><a href="#"><img src="images/medium/14.jpg"/></a></li>
<li><a href="#"><img src="images/medium/15.jpg"/></a></li>
<li><a href="#"><img src="images/medium/16.jpg"/></a></li>
<li><a href="#"><img src="images/medium/17.jpg"/></a></li>
<li><a href="#"><img src="images/medium/18.jpg"/></a></li>
<li><a href="#"><img src="images/medium/19.jpg"/></a></li>
<li><a href="#"><img src="images/medium/20.jpg"/></a></li>
<li><a href="#"><img src="images/medium/21.jpg"/></a></li>
<li><a href="#"><img src="images/medium/22.jpg"/></a></li>
<li><a href="#"><img src="images/medium/23.jpg"/></a></li>
<li><a href="#"><img src="images/medium/24.jpg"/></a></li>
<li><a href="#"><img src="images/medium/25.jpg"/></a></li>
<li><a href="#"><img src="images/medium/26.jpg"/></a></li>
<li><a href="#"><img src="images/medium/27.jpg"/></a></li>
<li><a href="#"><img src="images/medium/28.jpg"/></a></li>
<li><a href="#"><img src="images/medium/29.jpg"/></a></li>
<li><a href="#"><img src="images/medium/30.jpg"/></a></li>
<li><a href="#"><img src="images/medium/31.jpg"/></a></li>
<li><a href="#"><img src="images/medium/32.jpg"/></a></li>
<li><a href="#"><img src="images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="images/medium/36.jpg"/></a></li>
<li><a href="#"><img src="images/medium/37.jpg"/></a></li>
<li><a href="#"><img src="images/medium/38.jpg"/></a></li>
<li><a href="#"><img src="images/medium/39.jpg"/></a></li>
<li><a href="#"><img src="images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="images/medium/41.jpg"/></a></li>
<li><a href="#"><img src="images/medium/42.jpg"/></a></li>
<li><a href="#"><img src="images/medium/43.jpg"/></a></li>
<li><a href="#"><img src="images/medium/44.jpg"/></a></li>
<li><a href="#"><img src="images/medium/45.jpg"/></a></li>
<li><a href="#"><img src="images/medium/46.jpg"/></a></li>
<li><a href="#"><img src="images/medium/47.jpg"/></a></li>
<li><a href="#"><img src="images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="images/medium/50.jpg"/></a></li>
<li><a href="#"><img src="images/medium/51.jpg"/></a></li>
<li><a href="#"><img src="images/medium/52.jpg"/></a></li>
<li><a href="#"><img src="images/medium/53.jpg"/></a></li>
<li><a href="#"><img src="images/medium/54.jpg"/></a></li>
</ul>
</div>
<p class="codrops-info"><strong>Demo 1:</strong> Random animations / 55% container width / 3s between switching </p>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
w320 : {
rows : 3,
columns : 4
},
w240 : {
rows : 3,
columns : 3
}
} );
});
</script>
</body>
</html>
================================================
FILE: index2.html
================================================
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Animated Responsive Image Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Responsive Image Grid - Cycling through a set of images in a responsive grid." />
<meta name="keywords" content="grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
<![endif]-->
</head>
<body>
<img src="images/loading.gif" style="display:none;"/>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/">
<strong>« Previous Demo: </strong>Photo Booth Strips with Lightbox
</a>
<span class="right">
<a href="http://www.flickr.com/people/smanography/">Images by Sherman Geronimo-Tan</a>
<a href="http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header class="codrops-header">
<h1>Animated Responsive Image Grid</h1>
<h2>Cycling through a set of images in a responsive grid.</h2>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
<a href="index7.html">Demo 7</a>
</nav>
</header>
<section class="main">
<div id="ri-grid" class="ri-grid ri-grid-size-2">
<img class="ri-loading-image" src="images/loading.gif"/>
<ul>
<li><a href="#"><img src="images/medium/1.jpg"/></a></li>
<li><a href="#"><img src="images/medium/2.jpg"/></a></li>
<li><a href="#"><img src="images/medium/3.jpg"/></a></li>
<li><a href="#"><img src="images/medium/4.jpg"/></a></li>
<li><a href="#"><img src="images/medium/5.jpg"/></a></li>
<li><a href="#"><img src="images/medium/6.jpg"/></a></li>
<li><a href="#"><img src="images/medium/7.jpg"/></a></li>
<li><a href="#"><img src="images/medium/8.jpg"/></a></li>
<li><a href="#"><img src="images/medium/9.jpg"/></a></li>
<li><a href="#"><img src="images/medium/10.jpg"/></a></li>
<li><a href="#"><img src="images/medium/11.jpg"/></a></li>
<li><a href="#"><img src="images/medium/12.jpg"/></a></li>
<li><a href="#"><img src="images/medium/13.jpg"/></a></li>
<li><a href="#"><img src="images/medium/14.jpg"/></a></li>
<li><a href="#"><img src="images/medium/15.jpg"/></a></li>
<li><a href="#"><img src="images/medium/16.jpg"/></a></li>
<li><a href="#"><img src="images/medium/17.jpg"/></a></li>
<li><a href="#"><img src="images/medium/18.jpg"/></a></li>
<li><a href="#"><img src="images/medium/19.jpg"/></a></li>
<li><a href="#"><img src="images/medium/20.jpg"/></a></li>
<li><a href="#"><img src="images/medium/21.jpg"/></a></li>
<li><a href="#"><img src="images/medium/22.jpg"/></a></li>
<li><a href="#"><img src="images/medium/23.jpg"/></a></li>
<li><a href="#"><img src="images/medium/24.jpg"/></a></li>
<li><a href="#"><img src="images/medium/25.jpg"/></a></li>
<li><a href="#"><img src="images/medium/26.jpg"/></a></li>
<li><a href="#"><img src="images/medium/27.jpg"/></a></li>
<li><a href="#"><img src="images/medium/28.jpg"/></a></li>
<li><a href="#"><img src="images/medium/29.jpg"/></a></li>
<li><a href="#"><img src="images/medium/30.jpg"/></a></li>
<li><a href="#"><img src="images/medium/31.jpg"/></a></li>
<li><a href="#"><img src="images/medium/32.jpg"/></a></li>
<li><a href="#"><img src="images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="images/medium/36.jpg"/></a></li>
<li><a href="#"><img src="images/medium/37.jpg"/></a></li>
<li><a href="#"><img src="images/medium/38.jpg"/></a></li>
<li><a href="#"><img src="images/medium/39.jpg"/></a></li>
<li><a href="#"><img src="images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="images/medium/41.jpg"/></a></li>
<li><a href="#"><img src="images/medium/42.jpg"/></a></li>
<li><a href="#"><img src="images/medium/43.jpg"/></a></li>
<li><a href="#"><img src="images/medium/44.jpg"/></a></li>
<li><a href="#"><img src="images/medium/45.jpg"/></a></li>
<li><a href="#"><img src="images/medium/46.jpg"/></a></li>
<li><a href="#"><img src="images/medium/47.jpg"/></a></li>
<li><a href="#"><img src="images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="images/medium/50.jpg"/></a></li>
<li><a href="#"><img src="images/medium/51.jpg"/></a></li>
<li><a href="#"><img src="images/medium/52.jpg"/></a></li>
<li><a href="#"><img src="images/medium/53.jpg"/></a></li>
<li><a href="#"><img src="images/medium/54.jpg"/></a></li>
</ul>
</div>
<p class="codrops-info"><strong>Demo 2:</strong> "fadeInOut" animation / 100% container width / 1 image switch at a time / 600ms between switching</p>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 3,
columns : 15,
animType : 'fadeInOut',
animSpeed : 1000,
interval : 600,
step : 1,
w320 : {
rows : 3,
columns : 4
},
w240 : {
rows : 3,
columns : 4
}
} );
});
</script>
</body>
</html>
================================================
FILE: index3.html
================================================
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Animated Responsive Image Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Responsive Image Grid - Cycling through a set of images in a responsive grid." />
<meta name="keywords" content="grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
<![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/">
<strong>« Previous Demo: </strong>Photo Booth Strips with Lightbox
</a>
<span class="right">
<a href="http://www.flickr.com/people/smanography/">Images by Sherman Geronimo-Tan</a>
<a href="http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<section class="main">
<div id="ri-grid" class="ri-grid ri-grid-size-3">
<img class="ri-loading-image" src="images/loading.gif"/>
<ul>
<li><a href="#"><img src="images/medium/1.jpg"/></a></li>
<li><a href="#"><img src="images/medium/2.jpg"/></a></li>
<li><a href="#"><img src="images/medium/3.jpg"/></a></li>
<li><a href="#"><img src="images/medium/4.jpg"/></a></li>
<li><a href="#"><img src="images/medium/5.jpg"/></a></li>
<li><a href="#"><img src="images/medium/6.jpg"/></a></li>
<li><a href="#"><img src="images/medium/7.jpg"/></a></li>
<li><a href="#"><img src="images/medium/8.jpg"/></a></li>
<li><a href="#"><img src="images/medium/9.jpg"/></a></li>
<li><a href="#"><img src="images/medium/10.jpg"/></a></li>
<li><a href="#"><img src="images/medium/11.jpg"/></a></li>
<li><a href="#"><img src="images/medium/12.jpg"/></a></li>
<li><a href="#"><img src="images/medium/13.jpg"/></a></li>
<li><a href="#"><img src="images/medium/14.jpg"/></a></li>
<li><a href="#"><img src="images/medium/15.jpg"/></a></li>
<li><a href="#"><img src="images/medium/16.jpg"/></a></li>
<li><a href="#"><img src="images/medium/17.jpg"/></a></li>
<li><a href="#"><img src="images/medium/18.jpg"/></a></li>
<li><a href="#"><img src="images/medium/19.jpg"/></a></li>
<li><a href="#"><img src="images/medium/20.jpg"/></a></li>
<li><a href="#"><img src="images/medium/21.jpg"/></a></li>
<li><a href="#"><img src="images/medium/22.jpg"/></a></li>
<li><a href="#"><img src="images/medium/23.jpg"/></a></li>
<li><a href="#"><img src="images/medium/24.jpg"/></a></li>
<li><a href="#"><img src="images/medium/25.jpg"/></a></li>
<li><a href="#"><img src="images/medium/26.jpg"/></a></li>
<li><a href="#"><img src="images/medium/27.jpg"/></a></li>
<li><a href="#"><img src="images/medium/28.jpg"/></a></li>
<li><a href="#"><img src="images/medium/29.jpg"/></a></li>
<li><a href="#"><img src="images/medium/30.jpg"/></a></li>
<li><a href="#"><img src="images/medium/31.jpg"/></a></li>
<li><a href="#"><img src="images/medium/32.jpg"/></a></li>
<li><a href="#"><img src="images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="images/medium/36.jpg"/></a></li>
<li><a href="#"><img src="images/medium/37.jpg"/></a></li>
<li><a href="#"><img src="images/medium/38.jpg"/></a></li>
<li><a href="#"><img src="images/medium/39.jpg"/></a></li>
<li><a href="#"><img src="images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="images/medium/41.jpg"/></a></li>
<li><a href="#"><img src="images/medium/42.jpg"/></a></li>
<li><a href="#"><img src="images/medium/43.jpg"/></a></li>
<li><a href="#"><img src="images/medium/44.jpg"/></a></li>
<li><a href="#"><img src="images/medium/45.jpg"/></a></li>
<li><a href="#"><img src="images/medium/46.jpg"/></a></li>
<li><a href="#"><img src="images/medium/47.jpg"/></a></li>
<li><a href="#"><img src="images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="images/medium/50.jpg"/></a></li>
<li><a href="#"><img src="images/medium/51.jpg"/></a></li>
<li><a href="#"><img src="images/medium/52.jpg"/></a></li>
<li><a href="#"><img src="images/medium/53.jpg"/></a></li>
<li><a href="#"><img src="images/medium/54.jpg"/></a></li>
</ul>
</div>
<header class="codrops-header-special">
<h1>Animated Responsive Image Grid</h1>
<br>
<h2>Cycling through a set of images in a responsive grid.</h2>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a class="current-demo" href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
<a href="index7.html">Demo 7</a>
</nav>
<p class="codrops-info"><strong>Demo 3:</strong> Random animations / 100% container width / max. 2 images switch at a time / 2s between switching</p>
</header>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 4,
columns : 8,
maxStep : 2,
interval : 2000,
w1024 : {
rows : 5,
columns : 6
},
w768 : {
rows : 5,
columns : 5
},
w480 : {
rows : 6,
columns : 4
},
w320 : {
rows : 7,
columns : 4
},
w240 : {
rows : 7,
columns : 3
},
} );
});
</script>
</body>
</html>
================================================
FILE: index4.html
================================================
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Animated Responsive Image Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Responsive Image Grid - Cycling through a set of images in a responsive grid." />
<meta name="keywords" content="grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
<![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/">
<strong>« Previous Demo: </strong>Photo Booth Strips with Lightbox
</a>
<span class="right">
<a href="http://www.flickr.com/people/smanography/">Images by Sherman Geronimo-Tan</a>
<a href="http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header class="codrops-header">
<h1>Animated Responsive Image Grid</h1>
<h2>Cycling through a set of images in a responsive grid.</h2>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a class="current-demo" href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
<a href="index7.html">Demo 7</a>
</nav>
</header>
<section class="main">
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
<img class="ri-loading-image" src="images/loading.gif"/>
<ul>
<li><a href="#"><img src="images/medium/1.jpg"/></a></li>
<li><a href="#"><img src="images/medium/2.jpg"/></a></li>
<li><a href="#"><img src="images/medium/3.jpg"/></a></li>
<li><a href="#"><img src="images/medium/4.jpg"/></a></li>
<li><a href="#"><img src="images/medium/5.jpg"/></a></li>
<li><a href="#"><img src="images/medium/6.jpg"/></a></li>
<li><a href="#"><img src="images/medium/7.jpg"/></a></li>
<li><a href="#"><img src="images/medium/8.jpg"/></a></li>
<li><a href="#"><img src="images/medium/9.jpg"/></a></li>
<li><a href="#"><img src="images/medium/10.jpg"/></a></li>
<li><a href="#"><img src="images/medium/11.jpg"/></a></li>
<li><a href="#"><img src="images/medium/12.jpg"/></a></li>
<li><a href="#"><img src="images/medium/13.jpg"/></a></li>
<li><a href="#"><img src="images/medium/14.jpg"/></a></li>
<li><a href="#"><img src="images/medium/15.jpg"/></a></li>
<li><a href="#"><img src="images/medium/16.jpg"/></a></li>
<li><a href="#"><img src="images/medium/17.jpg"/></a></li>
<li><a href="#"><img src="images/medium/18.jpg"/></a></li>
<li><a href="#"><img src="images/medium/19.jpg"/></a></li>
<li><a href="#"><img src="images/medium/20.jpg"/></a></li>
<li><a href="#"><img src="images/medium/21.jpg"/></a></li>
<li><a href="#"><img src="images/medium/22.jpg"/></a></li>
<li><a href="#"><img src="images/medium/23.jpg"/></a></li>
<li><a href="#"><img src="images/medium/24.jpg"/></a></li>
<li><a href="#"><img src="images/medium/25.jpg"/></a></li>
<li><a href="#"><img src="images/medium/26.jpg"/></a></li>
<li><a href="#"><img src="images/medium/27.jpg"/></a></li>
<li><a href="#"><img src="images/medium/28.jpg"/></a></li>
<li><a href="#"><img src="images/medium/29.jpg"/></a></li>
<li><a href="#"><img src="images/medium/30.jpg"/></a></li>
<li><a href="#"><img src="images/medium/31.jpg"/></a></li>
<li><a href="#"><img src="images/medium/32.jpg"/></a></li>
<li><a href="#"><img src="images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="images/medium/36.jpg"/></a></li>
<li><a href="#"><img src="images/medium/37.jpg"/></a></li>
<li><a href="#"><img src="images/medium/38.jpg"/></a></li>
<li><a href="#"><img src="images/medium/39.jpg"/></a></li>
<li><a href="#"><img src="images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="images/medium/41.jpg"/></a></li>
<li><a href="#"><img src="images/medium/42.jpg"/></a></li>
<li><a href="#"><img src="images/medium/43.jpg"/></a></li>
<li><a href="#"><img src="images/medium/44.jpg"/></a></li>
<li><a href="#"><img src="images/medium/45.jpg"/></a></li>
<li><a href="#"><img src="images/medium/46.jpg"/></a></li>
<li><a href="#"><img src="images/medium/47.jpg"/></a></li>
<li><a href="#"><img src="images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="images/medium/50.jpg"/></a></li>
<li><a href="#"><img src="images/medium/51.jpg"/></a></li>
<li><a href="#"><img src="images/medium/52.jpg"/></a></li>
<li><a href="#"><img src="images/medium/53.jpg"/></a></li>
<li><a href="#"><img src="images/medium/54.jpg"/></a></li>
</ul>
</div>
<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>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
w320 : {
rows : 3,
columns : 4
},
w240 : {
rows : 3,
columns : 3
},
nochange : [0,1,2,3],
preventClick : false
} );
});
</script>
</body>
</html>
================================================
FILE: index5.html
================================================
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Animated Responsive Image Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Responsive Image Grid - Cycling through a set of images in a responsive grid." />
<meta name="keywords" content="grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
<![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/">
<strong>« Previous Demo: </strong>Photo Booth Strips with Lightbox
</a>
<span class="right">
<a href="http://www.flickr.com/people/smanography/">Images by Sherman Geronimo-Tan</a>
<a href="http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header class="codrops-header">
<h1>Animated Responsive Image Grid</h1>
<h2>Cycling through a set of images in a responsive grid.</h2>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a class="current-demo" href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
<a href="index7.html">Demo 7</a>
</nav>
</header>
<section class="main">
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
<img class="ri-loading-image" src="images/loading.gif"/>
<ul>
<li><a href="#"><img src="images/medium/1.jpg"/></a></li>
<li><a href="#"><img src="images/medium/2.jpg"/></a></li>
<li><a href="#"><img src="images/medium/3.jpg"/></a></li>
<li><a href="#"><img src="images/medium/4.jpg"/></a></li>
<li><a href="#"><img src="images/medium/5.jpg"/></a></li>
<li><a href="#"><img src="images/medium/6.jpg"/></a></li>
<li><a href="#"><img src="images/medium/7.jpg"/></a></li>
<li><a href="#"><img src="images/medium/8.jpg"/></a></li>
<li><a href="#"><img src="images/medium/9.jpg"/></a></li>
<li><a href="#"><img src="images/medium/10.jpg"/></a></li>
<li><a href="#"><img src="images/medium/11.jpg"/></a></li>
<li><a href="#"><img src="images/medium/12.jpg"/></a></li>
<li><a href="#"><img src="images/medium/13.jpg"/></a></li>
<li><a href="#"><img src="images/medium/14.jpg"/></a></li>
<li><a href="#"><img src="images/medium/15.jpg"/></a></li>
<li><a href="#"><img src="images/medium/16.jpg"/></a></li>
<li><a href="#"><img src="images/medium/17.jpg"/></a></li>
<li><a href="#"><img src="images/medium/18.jpg"/></a></li>
<li><a href="#"><img src="images/medium/19.jpg"/></a></li>
<li><a href="#"><img src="images/medium/20.jpg"/></a></li>
<li><a href="#"><img src="images/medium/21.jpg"/></a></li>
<li><a href="#"><img src="images/medium/22.jpg"/></a></li>
<li><a href="#"><img src="images/medium/23.jpg"/></a></li>
<li><a href="#"><img src="images/medium/24.jpg"/></a></li>
<li><a href="#"><img src="images/medium/25.jpg"/></a></li>
<li><a href="#"><img src="images/medium/26.jpg"/></a></li>
<li><a href="#"><img src="images/medium/27.jpg"/></a></li>
<li><a href="#"><img src="images/medium/28.jpg"/></a></li>
<li><a href="#"><img src="images/medium/29.jpg"/></a></li>
<li><a href="#"><img src="images/medium/30.jpg"/></a></li>
<li><a href="#"><img src="images/medium/31.jpg"/></a></li>
<li><a href="#"><img src="images/medium/32.jpg"/></a></li>
<li><a href="#"><img src="images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="images/medium/36.jpg"/></a></li>
<li><a href="#"><img src="images/medium/37.jpg"/></a></li>
<li><a href="#"><img src="images/medium/38.jpg"/></a></li>
<li><a href="#"><img src="images/medium/39.jpg"/></a></li>
<li><a href="#"><img src="images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="images/medium/41.jpg"/></a></li>
<li><a href="#"><img src="images/medium/42.jpg"/></a></li>
<li><a href="#"><img src="images/medium/43.jpg"/></a></li>
<li><a href="#"><img src="images/medium/44.jpg"/></a></li>
<li><a href="#"><img src="images/medium/45.jpg"/></a></li>
<li><a href="#"><img src="images/medium/46.jpg"/></a></li>
<li><a href="#"><img src="images/medium/47.jpg"/></a></li>
<li><a href="#"><img src="images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="images/medium/50.jpg"/></a></li>
<li><a href="#"><img src="images/medium/51.jpg"/></a></li>
<li><a href="#"><img src="images/medium/52.jpg"/></a></li>
<li><a href="#"><img src="images/medium/53.jpg"/></a></li>
<li><a href="#"><img src="images/medium/54.jpg"/></a></li>
</ul>
</div>
<p class="codrops-info"><strong>Demo 5:</strong> rotateBottom animation / 55% container width / no slideshow / onhover true </p>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
animSpeed : 300,
animType : 'rotateBottom',
w320 : {
rows : 3,
columns : 4
},
w240 : {
rows : 3,
columns : 3
},
slideshow : false,
onhover : true
} );
});
</script>
</body>
</html>
================================================
FILE: index6.html
================================================
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Animated Responsive Image Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Responsive Image Grid - Cycling through a set of images in a responsive grid." />
<meta name="keywords" content="grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
<![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/">
<strong>« Previous Demo: </strong>Photo Booth Strips with Lightbox
</a>
<span class="right">
<a href="http://www.flickr.com/people/smanography/">Images by Sherman Geronimo-Tan</a>
<a href="http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header class="codrops-header">
<h1>Animated Responsive Image Grid</h1>
<h2>Cycling through a set of images in a responsive grid.</h2>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a class="current-demo" href="index6.html">Demo 6</a>
<a href="index7.html">Demo 7</a>
</nav>
</header>
<section class="main">
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
<img class="ri-loading-image" src="images/loading.gif"/>
<ul>
<li><a href="#"><img src="images/medium/a.jpg"/></a></li>
<li><a href="#"><img src="images/medium/2.jpg"/></a></li>
<li><a href="#"><img src="images/medium/3.jpg"/></a></li>
<li><a href="#"><img src="images/medium/4.jpg"/></a></li>
<li><a href="#"><img src="images/medium/b.jpg"/></a></li>
<li><a href="#"><img src="images/medium/6.jpg"/></a></li>
<li><a href="#"><img src="images/medium/7.jpg"/></a></li>
<li><a href="#"><img src="images/medium/8.jpg"/></a></li>
<li><a href="#"><img src="images/medium/9.jpg"/></a></li>
<li><a href="#"><img src="images/medium/10.jpg"/></a></li>
<li><a href="#"><img src="images/medium/11.jpg"/></a></li>
<li><a href="#"><img src="images/medium/12.jpg"/></a></li>
<li><a href="#"><img src="images/medium/13.jpg"/></a></li>
<li><a href="#"><img src="images/medium/14.jpg"/></a></li>
<li><a href="#"><img src="images/medium/15.jpg"/></a></li>
<li><a href="#"><img src="images/medium/16.jpg"/></a></li>
<li><a href="#"><img src="images/medium/17.jpg"/></a></li>
<li><a href="#"><img src="images/medium/18.jpg"/></a></li>
<li><a href="#"><img src="images/medium/19.jpg"/></a></li>
<li><a href="#"><img src="images/medium/20.jpg"/></a></li>
<li><a href="#"><img src="images/medium/21.jpg"/></a></li>
<li><a href="#"><img src="images/medium/22.jpg"/></a></li>
<li><a href="#"><img src="images/medium/23.jpg"/></a></li>
<li><a href="#"><img src="images/medium/24.jpg"/></a></li>
<li><a href="#"><img src="images/medium/25.jpg"/></a></li>
<li><a href="#"><img src="images/medium/26.jpg"/></a></li>
<li><a href="#"><img src="images/medium/27.jpg"/></a></li>
<li><a href="#"><img src="images/medium/28.jpg"/></a></li>
<li><a href="#"><img src="images/medium/29.jpg"/></a></li>
<li><a href="#"><img src="images/medium/30.jpg"/></a></li>
<li><a href="#"><img src="images/medium/31.jpg"/></a></li>
<li><a href="#"><img src="images/medium/32.jpg"/></a></li>
<li><a href="#"><img src="images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="images/medium/36.jpg"/></a></li>
<li><a href="#"><img src="images/medium/37.jpg"/></a></li>
<li><a href="#"><img src="images/medium/38.jpg"/></a></li>
<li><a href="#"><img src="images/medium/39.jpg"/></a></li>
<li><a href="#"><img src="images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="images/medium/41.jpg"/></a></li>
<li><a href="#"><img src="images/medium/42.jpg"/></a></li>
<li><a href="#"><img src="images/medium/43.jpg"/></a></li>
<li><a href="#"><img src="images/medium/44.jpg"/></a></li>
<li><a href="#"><img src="images/medium/45.jpg"/></a></li>
<li><a href="#"><img src="images/medium/46.jpg"/></a></li>
<li><a href="#"><img src="images/medium/47.jpg"/></a></li>
<li><a href="#"><img src="images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="images/medium/50.jpg"/></a></li>
<li><a href="#"><img src="images/medium/51.jpg"/></a></li>
<li><a href="#"><img src="images/medium/52.jpg"/></a></li>
<li><a href="#"><img src="images/medium/53.jpg"/></a></li>
<li><a href="#"><img src="images/medium/54.jpg"/></a></li>
</ul>
</div>
<p class="codrops-info"><strong>Demo 1:</strong> Random animations / 55% container width / 3s between switching / some images unavailabe, replaced with color block</p>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 2,
columns : 3
} );
});
</script>
</body>
</html>
================================================
FILE: index7.html
================================================
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Animated Responsive Image Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Responsive Image Grid - Cycling through a set of images in a responsive grid." />
<meta name="keywords" content="grid, images, thumbnails, responsive, css3, jquery, javascript, random, transition, 3d, perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
<![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/">
<strong>« Previous Demo: </strong>Photo Booth Strips with Lightbox
</a>
<span class="right">
<a href="http://www.flickr.com/people/smanography/">Images by Sherman Geronimo-Tan</a>
<a href="http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header class="codrops-header">
<h1>Animated Responsive Image Grid</h1>
<h2>Cycling through a set of images in a responsive grid.</h2>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
<a class="current-demo" href="index7.html">Demo 7</a>
</nav>
</header>
<section class="main">
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
<img class="ri-loading-image" src="images/loading.gif"/>
<ul>
<li><a href="#"><img src="images/medium/a.jpg"/></a></li>
<li><a href="#"><img src="images/medium/2.jpg"/></a></li>
<li><a href="#"><img src="images/medium/3.jpg"/></a></li>
<li><a href="#"><img src="images/medium/4.jpg"/></a></li>
<li><a href="#"><img src="images/medium/b.jpg"/></a></li>
<li><a href="#"><img src="images/medium/6.jpg"/></a></li>
<li><a href="#"><img src="images/medium/7.jpg"/></a></li>
<li><a href="#"><img src="images/medium/8.jpg"/></a></li>
<li><a href="#"><img src="images/medium/9.jpg"/></a></li>
<li><a href="#"><img src="images/medium/10.jpg"/></a></li>
<li><a href="#"><img src="images/medium/11.jpg"/></a></li>
<li><a href="#"><img src="images/medium/12.jpg"/></a></li>
<li><a href="#"><img src="images/medium/13.jpg"/></a></li>
<li><a href="#"><img src="images/medium/14.jpg"/></a></li>
<li><a href="#"><img src="images/medium/15.jpg"/></a></li>
<li><a href="#"><img src="images/medium/16.jpg"/></a></li>
<li><a href="#"><img src="images/medium/17.jpg"/></a></li>
<li><a href="#"><img src="images/medium/18.jpg"/></a></li>
<li><a href="#"><img src="images/medium/19.jpg"/></a></li>
<li><a href="#"><img src="images/medium/20.jpg"/></a></li>
<li><a href="#"><img src="images/medium/21.jpg"/></a></li>
<li><a href="#"><img src="images/medium/22.jpg"/></a></li>
<li><a href="#"><img src="images/medium/23.jpg"/></a></li>
<li><a href="#"><img src="images/medium/24.jpg"/></a></li>
<li><a href="#"><img src="images/medium/25.jpg"/></a></li>
<li><a href="#"><img src="images/medium/26.jpg"/></a></li>
<li><a href="#"><img src="images/medium/27.jpg"/></a></li>
<li><a href="#"><img src="images/medium/28.jpg"/></a></li>
<li><a href="#"><img src="images/medium/29.jpg"/></a></li>
<li><a href="#"><img src="images/medium/30.jpg"/></a></li>
<li><a href="#"><img src="images/medium/31.jpg"/></a></li>
<li><a href="#"><img src="images/medium/32.jpg"/></a></li>
<li><a href="#"><img src="images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="images/medium/36.jpg"/></a></li>
<li><a href="#"><img src="images/medium/37.jpg"/></a></li>
<li><a href="#"><img src="images/medium/38.jpg"/></a></li>
<li><a href="#"><img src="images/medium/39.jpg"/></a></li>
<li><a href="#"><img src="images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="images/medium/41.jpg"/></a></li>
<li><a href="#"><img src="images/medium/42.jpg"/></a></li>
<li><a href="#"><img src="images/medium/43.jpg"/></a></li>
<li><a href="#"><img src="images/medium/44.jpg"/></a></li>
<li><a href="#"><img src="images/medium/45.jpg"/></a></li>
<li><a href="#"><img src="images/medium/46.jpg"/></a></li>
<li><a href="#"><img src="images/medium/47.jpg"/></a></li>
<li><a href="#"><img src="images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="images/medium/50.jpg"/></a></li>
<li><a href="#"><img src="images/medium/51.jpg"/></a></li>
<li><a href="#"><img src="images/medium/52.jpg"/></a></li>
<li><a href="#"><img src="images/medium/53.jpg"/></a></li>
<li><a href="#"><img src="images/medium/54.jpg"/></a></li>
</ul>
</div>
<p class="codrops-info"><strong>Demo 1:</strong> Random animations / 55% container width / 3s between switching / some images unavailabe, replaced with substitute image</p>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 2,
columns : 3,
subImg : "images/subImg.png"
} );
});
</script>
</body>
</html>
================================================
FILE: js/jquery.gridrotator.js
================================================
/**
* jquery.gridrotator.js v1.1.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2012, Codrops
* http://www.codrops.com
*/
;( function( $, window, undefined ) {
'use strict';
/*
* debouncedresize: special jQuery event that happens once after a window resize
*
* latest version and complete README available on Github:
* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
*
* Copyright 2011 @louis_remi
* Licensed under the MIT license.
*/
var $event = $.event,
$special,
resizeTimeout;
$special = $event.special.debouncedresize = {
setup: function() {
$( this ).on( "resize", $special.handler );
},
teardown: function() {
$( this ).off( "resize", $special.handler );
},
handler: function( event, execAsap ) {
// Save the context
var context = this,
args = arguments,
dispatch = function() {
// set correct event type
event.type = "debouncedresize";
$event.dispatch.apply( context, args );
};
if ( resizeTimeout ) {
clearTimeout( resizeTimeout );
}
execAsap ?
dispatch() :
resizeTimeout = setTimeout( dispatch, $special.threshold );
},
threshold: 100
};
// http://www.hardcode.nl/subcategory_1/article_317-array-shuffle-function
function shuffle(a) {
var i=a.length,p,t;
while (i--) {
p = Math.floor(Math.random()*this.length);
t = a[i];
a[i]=a[p];
a[p]=t;
}
}
// HTML5 PageVisibility API
// http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
// by Joe Marini (@joemarini)
function getHiddenProp(){
var prefixes = ['webkit','moz','ms','o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++){
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
function isHidden() {
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
function isEmpty( obj ) {
return Object.keys(obj).length === 0;
}
// global
var $window = $( window ),
Modernizr = window.Modernizr;
$.GridRotator = function( options, element ) {
this.$el = $( element );
if( Modernizr.backgroundsize ) {
var self = this;
this.$el.addClass( 'ri-grid-loading' );
this._init( options );
}
};
// the options
$.GridRotator.defaults = {
// number of rows
rows : 4,
// number of columns
columns : 10,
w1024 : { rows : 3, columns : 8 },
w768 : {rows : 3,columns : 7 },
w480 : {rows : 3,columns : 5 },
w320 : {rows : 2,columns : 4 },
w240 : {rows : 2,columns : 3 },
// step: number of items that are replaced at the same time
// random || [some number]
// note: for performance issues, the number "can't" be > options.maxStep
step : 'random',
// change it as you wish..
maxStep : 3,
// prevent user to click the items
preventClick : true,
// animation type
// showHide || fadeInOut ||
// slideLeft || slideRight || slideTop || slideBottom ||
// rotateBottom || rotateLeft || rotateRight || rotateTop ||
// scale ||
// rotate3d ||
// rotateLeftScale || rotateRightScale || rotateTopScale || rotateBottomScale ||
// random
animType : 'random',
// animation speed
animSpeed : 800,
// animation easings
animEasingOut : 'linear',
animEasingIn: 'linear',
// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can't" be < 300 ms
interval : 3000,
// if false the animations will not start
// use false if onhover is true for example
slideshow : true,
// if true the items will switch when hovered
onhover : false,
// ids of elements that shouldn't change
nochange : [],
// callback function when drawn
onDraw : function(){},
// 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).
heightToWidthRatio : 1,
subImg : false
};
$.GridRotator.prototype = {
_init : function( options ) {
// options
this.options = $.extend( true, {}, $.GridRotator.defaults, options );
// cache some elements + variables
this._config();
},
_config : function() {
var self = this,
transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
};
// support CSS transitions and 3d transforms
this.supportTransitions = Modernizr.csstransitions;
this.supportTransforms3D = Modernizr.csstransforms3d;
this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.gridrotator';
// all animation types for the random option
this.animTypes = this.supportTransforms3D ? [
'fadeInOut',
'slideLeft',
'slideRight',
'slideTop',
'slideBottom',
'rotateLeft',
'rotateRight',
'rotateTop',
'rotateBottom',
'scale',
'rotate3d',
'rotateLeftScale',
'rotateRightScale',
'rotateTopScale',
'rotateBottomScale' ] :
[ 'fadeInOut', 'slideLeft', 'slideRight', 'slideTop', 'slideBottom' ];
this.animType = this.options.animType;
if( this.animType !== 'random' && !this.supportTransforms3D && $.inArray( this.animType, this.animTypes ) === -1 && this.animType !== 'showHide' ) {
// fallback to 'fadeInOut' if user sets a type which is not supported
this.animType = 'fadeInOut';
}
this.animTypesTotal = this.animTypes.length;
// the <ul> where the items are placed
this.$list = this.$el.children( 'ul' );
// remove images and add background-image to anchors
// preload the images before
var loaded = 0,
subbed = 0,
$imgs = this.$list.find( 'img' ),
count = $imgs.length,
subColors = ["#D92727", "#FFE433", "#0DB8B5"];
// Check if the substitute image is available
if( self.options.subImg ) {
$( '<img/>' ).error( function() {
self.options.subImg = false;
} ).attr('src', self.options.subImg);
}
$imgs.each( function() {
var $img = $( this ), src = $img.attr( 'src' );
$( '<img/>' ).load( function() {
++loaded;
$img.parent().css( 'background-image', 'url(' + src + ')' );
/*This conditional block should be moved out to remove redundancy =)*/
if( loaded + subbed === count ) {
$imgs.remove();
self.$el.removeClass( 'ri-grid-loading' );
// the items
self.$items = self.$list.children( 'li' );
// make a copy of the items
self.$itemsCache = self.$items.clone();
// total number of items
self.itemsTotal = self.$items.length;
// the items that will be out of the grid
// actually the item's child (anchor element)
self.outItems= [];
self._layout( function() {
self._initEvents();
} );
// replace [options.step] items after [options.interval] time
// the items that go out are randomly chosen, while the ones that get in
// follow a "First In First Out" logic
self._start();
}
} ).attr( 'src', src );
// If something is wrong with the image…
$( '<img/>' ).error( function() {
++subbed;
// Are there any substitute images?
if( self.options.subImg ) {
$img.parent().css( 'background-image', 'url(' + self.options.subImg + ')' );
}
else {
var color = Math.floor(Math.random() * 3)
$img.parent().css( 'background', subColors[color] );
}
// console.log(self.options)
/*This conditional block should be moved out to remove redundancy =)*/
if( loaded + subbed === count ) {
$imgs.remove();
self.$el.removeClass( 'ri-grid-loading' );
// the items
self.$items = self.$list.children( 'li' );
// make a copy of the items
self.$itemsCache = self.$items.clone();
// total number of items
self.itemsTotal = self.$items.length;
// the items that will be out of the grid
// actually the item's child (anchor element)
self.outItems= [];
self._layout( function() {
self._initEvents();
} );
// replace [options.step] items after [options.interval] time
// the items that go out are randomly chosen, while the ones that get in
// follow a "First In First Out" logic
self._start();
}
} ).attr( 'src', src );
} );
},
_layout : function( callback ) {
var self = this;
// sets the grid dimentions based on the container's width
this._setGridDim();
// reset
this.$list.empty();
this.$items = this.$itemsCache.clone().appendTo( this.$list );
var $outItems = this.$items.filter( ':gt(' + ( this.showTotal - 1 ) + ')' ),
$outAItems = $outItems.children( 'a' );
this.outItems.length = 0;
$outAItems.each( function( i ) {
self.outItems.push( $( this ) );
} );
$outItems.remove();
// container's width
var containerWidth = ( document.defaultView ) ? parseInt( document.defaultView.getComputedStyle( this.$el.get( 0 ), null ).width ) : this.$el.width(),
// item's width
itemWidth = Math.floor( containerWidth / this.columns ),
// calculate gap
gapWidth = containerWidth - ( this.columns * Math.floor( itemWidth ) );
for( var i = 0; i < this.rows; ++i ) {
for( var j = 0; j < this.columns; ++j ) {
var idx = this.columns * i + j,
$item = this.$items.eq( idx );
$item.css( {
width : j < Math.floor( gapWidth ) ? itemWidth + 1 : itemWidth,
height : Math.floor( itemWidth * this.options.heightToWidthRatio )
} );
if( $.inArray( idx, this.options.nochange ) !== -1 ) {
$item.addClass( 'ri-nochange' ).data( 'nochange', true );
}
}
}
if( this.options.preventClick ) {
this.$items.children().css( 'cursor', 'default' ).on( 'click.gridrotator', false );
}
if( callback ) {
callback.call();
}
this.options.onDraw.call(this);
},
// set the grid rows and columns
_setGridDim : function() {
// container's width
var c_w = this.$el.width();
// we will choose the number of rows/columns according to the container's width and the values set in the plugin options
switch( true ) {
case ( c_w < 240 ) : this.rows = this.options.w240.rows; this.columns = this.options.w240.columns; break;
case ( c_w < 320 ) : this.rows = this.options.w320.rows; this.columns = this.options.w320.columns; break;
case ( c_w < 480 ) : this.rows = this.options.w480.rows; this.columns = this.options.w480.columns; break;
case ( c_w < 768 ) : this.rows = this.options.w768.rows; this.columns = this.options.w768.columns; break;
case ( c_w < 1024 ) : this.rows = this.options.w1024.rows; this.columns = this.options.w1024.columns; break;
default : this.rows = this.options.rows; this.columns = this.options.columns; break;
}
this.showTotal = this.rows * this.columns;
},
// init window resize event
_initEvents : function() {
var self = this;
$window.on( 'debouncedresize.gridrotator', function() {
self._layout();
} );
// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
// HTML5 PageVisibility API
// http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
// by Joe Marini (@joemarini)
if (visProp) {
var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
document.addEventListener(evtname, function() { self._visChange(); } );
}
if( !Modernizr.touch && this.options.onhover ) {
self.$items.on( 'mouseenter.gridrotator', function() {
var $item = $( this );
if( !$item.data( 'active' ) && !$item.data( 'hovered' ) && !$item.data( 'nochange' ) ) {
$item.data( 'hovered', true );
self._replace( $item );
}
} ).on( 'mouseleave.gridrotator', function() {
$( this ).data( 'hovered', false );
} );
}
},
_visChange : function() {
isHidden() ? clearTimeout( this.playtimeout ) : this._start();
},
// start rotating elements
_start : function() {
if( this.showTotal < this.itemsTotal && this.options.slideshow ) {
this._showNext();
}
},
// get which type of animation
_getAnimType : function() {
return this.animType === 'random' ? this.animTypes[ Math.floor( Math.random() * this.animTypesTotal ) ] : this.animType;
},
// get css properties for the transition effect
_getAnimProperties : function( $out ) {
var startInProp = {}, startOutProp = {}, endInProp = {}, endOutProp = {},
animType = this._getAnimType(), speed, delay = 0;
switch( animType ) {
case 'showHide' :
speed = 0;
endOutProp.opacity = 0;
break;
case 'fadeInOut' :
endOutProp.opacity = 0;
break;
case 'slideLeft' :
startInProp.left = $out.width();
endInProp.left = 0;
endOutProp.left = -$out.width();
break;
case 'slideRight' :
startInProp.left = -$out.width();
endInProp.left = 0;
endOutProp.left = $out.width();
break;
case 'slideTop' :
startInProp.top = $out.height();
endInProp.top = 0;
endOutProp.top = -$out.height();
break;
case 'slideBottom' :
startInProp.top = -$out.height();
endInProp.top = 0;
endOutProp.top = $out.height();
break;
case 'rotateLeft' :
speed = this.options.animSpeed / 2;
startInProp.transform = 'rotateY(90deg)';
endInProp.transform = 'rotateY(0deg)';
delay = speed;
endOutProp.transform = 'rotateY(-90deg)';
break;
case 'rotateRight' :
speed = this.options.animSpeed / 2;
startInProp.transform = 'rotateY(-90deg)';
endInProp.transform = 'rotateY(0deg)';
delay = speed;
endOutProp.transform = 'rotateY(90deg)';
break;
case 'rotateTop' :
speed = this.options.animSpeed / 2;
startInProp.transform= 'rotateX(90deg)';
endInProp.transform = 'rotateX(0deg)';
delay = speed;
endOutProp.transform = 'rotateX(-90deg)';
break;
case 'rotateBottom' :
speed = this.options.animSpeed / 2;
startInProp.transform = 'rotateX(-90deg)';
endInProp.transform = 'rotateX(0deg)';
delay = speed;
endOutProp.transform = 'rotateX(90deg)';
break;
case 'scale' :
speed = this.options.animSpeed / 2;
startInProp.transform = 'scale(0)';
startOutProp.transform = 'scale(1)';
endInProp.transform = 'scale(1)';
delay = speed;
endOutProp.transform = 'scale(0)';
break;
case 'rotateLeftScale' :
startOutProp.transform = 'scale(1)';
speed = this.options.animSpeed / 2;
startInProp.transform = 'scale(0.3) rotateY(90deg)';
endInProp.transform = 'scale(1) rotateY(0deg)';
delay = speed;
endOutProp.transform = 'scale(0.3) rotateY(-90deg)';
break;
case 'rotateRightScale' :
startOutProp.transform = 'scale(1)';
speed = this.options.animSpeed / 2;
startInProp.transform = 'scale(0.3) rotateY(-90deg)';
endInProp.transform = 'scale(1) rotateY(0deg)';
delay = speed;
endOutProp.transform = 'scale(0.3) rotateY(90deg)';
break;
case 'rotateTopScale' :
startOutProp.transform = 'scale(1)';
speed = this.options.animSpeed / 2;
startInProp.transform = 'scale(0.3) rotateX(90deg)';
endInProp.transform = 'scale(1) rotateX(0deg)';
delay = speed;
endOutProp.transform = 'scale(0.3) rotateX(-90deg)';
break;
case 'rotateBottomScale' :
startOutProp.transform = 'scale(1)';
speed = this.options.animSpeed / 2;
startInProp.transform = 'scale(0.3) rotateX(-90deg)';
endInProp.transform = 'scale(1) rotateX(0deg)';
delay = speed;
endOutProp.transform = 'scale(0.3) rotateX(90deg)';
break;
case 'rotate3d' :
speed = this.options.animSpeed / 2;
startInProp.transform = 'rotate3d( 1, 1, 0, 90deg )';
endInProp.transform = 'rotate3d( 1, 1, 0, 0deg )';
delay = speed;
endOutProp.transform = 'rotate3d( 1, 1, 0, -90deg )';
break;
}
return {
startInProp : startInProp,
startOutProp : startOutProp,
endInProp : endInProp,
endOutProp : endOutProp,
delay : delay,
animSpeed : speed != undefined ? speed : this.options.animSpeed
};
},
// show next [option.step] elements
_showNext : function( time ) {
var self = this;
clearTimeout( this.playtimeout );
this.playtimeout = setTimeout( function() {
var step = self.options.step, max= self.options.maxStep, min = 1;
if( max > self.showTotal ) {
max = self.showTotal;
}
// number of items to swith at this point of time
var nmbOut = step === 'random' ? Math.floor( Math.random() * max + min ) : Math.min( Math.abs( step ) , max ) ,
// array with random indexes. These will be the indexes of the items we will replace
randArr = self._getRandom( nmbOut, self.showTotal );
for( var i = 0; i < nmbOut; ++i ) {
// element to go out
var $out = self.$items.eq( randArr[ i ] );
// if element is active, which means it is currently animating,
// then we need to get different positions..
if( $out.data( 'active' ) || $out.data( 'nochange' ) ) {
// one of the items is active, call again..
self._showNext( 1 );
return false;
}
self._replace( $out );
}
// again and again..
self._showNext();
}, time || Math.max( Math.abs( this.options.interval ) , 300 ) );
},
_replace : function( $out ) {
$out.data( 'active', true );
var self = this,
$outA = $out.children( 'a:last' ),
newElProp = {
width : $outA.width(),
height : $outA.height()
};
// element stays active
$out.data( 'active', true );
// get the element (anchor) that will go in (first one inserted in this.outItems)
var $inA = this.outItems.shift();
// save element that went out
this.outItems.push( $outA.clone().css( 'transition', 'none' ) );
// prepend in element
$inA.css( newElProp ).prependTo( $out );
var animProp = this._getAnimProperties( $outA );
$inA.css( animProp.startInProp );
$outA.css( animProp.startOutProp );
this._setTransition( $inA, 'all', animProp.animSpeed, animProp.delay, this.options.animEasingIn );
this._setTransition( $outA, 'all', animProp.animSpeed, 0, this.options.animEasingOut );
this._applyTransition( $inA, animProp.endInProp, animProp.animSpeed, function() {
var $el = $( this ),
t = animProp.animSpeed === self.options.animSpeed && isEmpty( animProp.endInProp ) ? animProp.animSpeed : 0;
setTimeout( function() {
if( self.supportTransitions ) {
$el.off( self.transEndEventName );
}
$el.next().remove();
$el.parent().data( 'active', false );
}, t );
}, animProp.animSpeed === 0 || isEmpty( animProp.endInProp ) );
this._applyTransition( $outA, animProp.endOutProp, animProp.animSpeed );
},
_getRandom : function( cnt, limit ) {
var randArray = [];
for( var i = 0; i < limit; ++i ) {
randArray.push( i )
}
shuffle(randArray);
return randArray.slice( 0, cnt );
},
_setTransition : function( el, prop, speed, delay, easing ) {
setTimeout( function() {
el.css( 'transition', prop + ' ' + speed + 'ms ' + delay + 'ms ' + easing );
}, 25 );
},
_applyTransition : function( el, styleCSS, speed, fncomplete, force ) {
var self = this;
setTimeout( function() {
$.fn.applyStyle = self.supportTransitions ? $.fn.css : $.fn.animate;
if( fncomplete && self.supportTransitions ) {
el.on( self.transEndEventName, fncomplete );
if( force ) {
fncomplete.call( el );
}
}
fncomplete = fncomplete || function() { return false; };
el.stop().applyStyle( styleCSS, $.extend( true, [], { duration : speed + 'ms', complete : fncomplete } ) );
}, 25 );
}
};
var logError = function( message ) {
if ( window.console ) {
window.console.error( message );
}
};
$.fn.gridrotator = function( options ) {
var instance = $.data( this, 'gridrotator' );
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
if ( !instance ) {
logError( "cannot call methods on gridrotator prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for gridrotator instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
if ( instance ) {
instance._init();
}
else {
instance = $.data( this, 'gridrotator', new $.GridRotator( options, this ) );
}
});
}
return instance;
};
} )( jQuery, window );
================================================
FILE: js/modernizr.custom.26633.js
================================================
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-backgroundsize-csstransforms3d-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
*/
;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=["­",'<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))};
gitextract_utmmypxf/
├── README.md
├── bower.json
├── css/
│ ├── demo.css
│ ├── fallback.css
│ └── style.css
├── images/
│ └── ImageAttribution.txt
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── index5.html
├── index6.html
├── index7.html
└── js/
├── jquery.gridrotator.js
└── modernizr.custom.26633.js
SYMBOL INDEX (29 symbols across 2 files)
FILE: js/jquery.gridrotator.js
function shuffle (line 57) | function shuffle(a) {
function getHiddenProp (line 70) | function getHiddenProp(){
function isHidden (line 85) | function isHidden() {
function isEmpty (line 92) | function isEmpty( obj ) {
FILE: js/modernizr.custom.26633.js
function z (line 4) | function z(a){j.cssText=a}
function A (line 4) | function A(a,b){return z(m.join(a+";")+(b||""))}
function B (line 4) | function B(a,b){return typeof a===b}
function C (line 4) | function C(a,b){return!!~(""+a).indexOf(b)}
function D (line 4) | function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return...
function E (line 4) | function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a...
function F (line 4) | function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o....
function k (line 4) | function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("hea...
function l (line 4) | function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}
function m (line 4) | function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}
function n (line 4) | function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));va...
function o (line 4) | function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a...
function p (line 4) | function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.crea...
function q (line 4) | function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.ha...
function d (line 4) | function d(a){return"[object Function]"==o.call(a)}
function e (line 4) | function e(a){return"string"==typeof a}
function f (line 4) | function f(){}
function g (line 4) | function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}
function h (line 4) | function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCs...
function i (line 4) | function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1...
function j (line 4) | function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++...
function k (line 4) | function k(){var a=B;return a.loader={load:j,i:0},a}
function b (line 4) | function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:...
function g (line 4) | function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop()...
function h (line 4) | function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[]....
Condensed preview — 15 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (97K chars).
[
{
"path": "README.md",
"chars": 475,
"preview": "\r\nAnimatedResponsiveImageGrid\r\n=========\r\n\r\nA jQuery plugin for creating a responsive image grid that will switch images"
},
{
"path": "bower.json",
"chars": 473,
"preview": "{\n \"name\": \"AnimatedResponsiveImageGrid\",\n \"version\": \"1.0.0\",\n \"homepage\": \"https://github.com/codrops/AnimatedRespo"
},
{
"path": "css/demo.css",
"chars": 3322,
"preview": "@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: "
},
{
"path": "css/fallback.css",
"chars": 133,
"preview": ".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\twi"
},
{
"path": "css/style.css",
"chars": 2443,
"preview": ".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: blo"
},
{
"path": "images/ImageAttribution.txt",
"chars": 125,
"preview": "Images by Sherman Geronimo-Tan: http://www.flickr.com/people/smanography/\r\nhttp://creativecommons.org/licenses/by/2.0/de"
},
{
"path": "index.html",
"chars": 6642,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n <head>\n\t\t<meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Comp"
},
{
"path": "index2.html",
"chars": 6843,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n <head>\n\t\t<meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Comp"
},
{
"path": "index3.html",
"chars": 6935,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n <head>\n\t\t<meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Comp"
},
{
"path": "index4.html",
"chars": 6749,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n <head>\n\t\t<meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Comp"
},
{
"path": "index5.html",
"chars": 6751,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n <head>\n\t\t<meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Comp"
},
{
"path": "index6.html",
"chars": 7120,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Co"
},
{
"path": "index7.html",
"chars": 7165,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Co"
},
{
"path": "js/jquery.gridrotator.js",
"chars": 21153,
"preview": "/**\n * jquery.gridrotator.js v1.1.0\n * http://www.codrops.com\n *\n * Licensed under the MIT license.\n * http://www.openso"
},
{
"path": "js/modernizr.custom.26633.js",
"chars": 9447,
"preview": "/* Modernizr 2.6.2 (Custom Build) | MIT & BSD\n * Build: http://modernizr.com/download/#-backgroundsize-csstransforms3d-c"
}
]
About this extraction
This page contains the full source code of the codrops/AnimatedResponsiveImageGrid GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 15 files (83.8 KB), approximately 26.1k tokens, and a symbol index with 29 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.