Adding substitution for when the images are not available

codrops · Oct 9, 2013 · dbf516f · dbf516f
1 parent d82ef95
commit dbf516f
Show file tree

Hide file tree

Showing 9 changed files with 353 additions and 5 deletions.
diff --git a/images/subImg.png b/images/subImg.png
diff --git a/index.html b/index.html
@@ -47,6 +47,8 @@ <h2>Cycling through a set of images in a responsive grid.</h2>
 					<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>

diff --git a/index2.html b/index2.html
@@ -49,6 +49,8 @@ <h2>Cycling through a set of images in a responsive grid.</h2>
 					<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>

diff --git a/index3.html b/index3.html
@@ -110,6 +110,8 @@ <h2>Cycling through a set of images in a responsive grid.</h2>
 						<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>
 

diff --git a/index4.html b/index4.html
@@ -47,6 +47,8 @@ <h2>Cycling through a set of images in a responsive grid.</h2>
 					<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>

diff --git a/index5.html b/index5.html
@@ -47,6 +47,8 @@ <h2>Cycling through a set of images in a responsive grid.</h2>
 					<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>

diff --git a/index6.html b/index6.html
@@ -0,0 +1,136 @@
+<!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>&laquo; 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>
diff --git a/index7.html b/index7.html
@@ -0,0 +1,137 @@
+<!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>&laquo; 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>