Merge https://github.com/mdn/object-fit-gallery into this repo. Origi…

…nal code by @chrisdavidmills
jsnkuhn · Feb 10, 2017 · c985a56 · c985a56
2 parents a9fdccd + 992c6c3
commit c985a56
Show file tree

Hide file tree

Showing 20 changed files with 123 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -3,3 +3,5 @@
 This repository contains examples of CSS usage.
 
 The "editable-examples" directory contains CSS examples that are intended to be embedded in MDN pages as live editable samples.
+
+The "object-fit-gallery" directory contains a fun image gallery that uses <code>object-fit</code> to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/object-fit-gallery/).
diff --git a/object-fit-gallery/images/pic1.jpg b/object-fit-gallery/images/pic1.jpg
diff --git a/object-fit-gallery/images/pic10.jpg b/object-fit-gallery/images/pic10.jpg
diff --git a/object-fit-gallery/images/pic11.jpg b/object-fit-gallery/images/pic11.jpg
diff --git a/object-fit-gallery/images/pic12.jpg b/object-fit-gallery/images/pic12.jpg
diff --git a/object-fit-gallery/images/pic13.jpg b/object-fit-gallery/images/pic13.jpg
diff --git a/object-fit-gallery/images/pic14.jpg b/object-fit-gallery/images/pic14.jpg
diff --git a/object-fit-gallery/images/pic15.jpg b/object-fit-gallery/images/pic15.jpg
diff --git a/object-fit-gallery/images/pic16.jpg b/object-fit-gallery/images/pic16.jpg
diff --git a/object-fit-gallery/images/pic2.jpg b/object-fit-gallery/images/pic2.jpg
diff --git a/object-fit-gallery/images/pic3.jpg b/object-fit-gallery/images/pic3.jpg
diff --git a/object-fit-gallery/images/pic4.jpg b/object-fit-gallery/images/pic4.jpg
diff --git a/object-fit-gallery/images/pic5.jpg b/object-fit-gallery/images/pic5.jpg
diff --git a/object-fit-gallery/images/pic6.jpg b/object-fit-gallery/images/pic6.jpg
diff --git a/object-fit-gallery/images/pic7.jpg b/object-fit-gallery/images/pic7.jpg
diff --git a/object-fit-gallery/images/pic8.jpg b/object-fit-gallery/images/pic8.jpg
diff --git a/object-fit-gallery/images/pic9.jpg b/object-fit-gallery/images/pic9.jpg
diff --git a/object-fit-gallery/index.html b/object-fit-gallery/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+
+    <title>Object-fit gallery</title>
+
+    <link rel="stylesheet" href="style.css">
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <div class="top-row">
+      <img class="thumb">
+      <img class="thumb">
+      <img class="thumb">
+      <img class="thumb">
+    </div>
+    <div class="second-row">
+      <img class="thumb">
+      <img class="thumb">
+      <img class="thumb">
+      <img class="thumb">
+    </div>
+    <div class="third-row">
+      <img class="thumb">
+      <img class="thumb">
+      <img class="thumb">
+      <img class="thumb">
+    </div>
+    <div class="bottom-row">
+      <img class="thumb">
+      <img class="thumb">
+      <img class="thumb">
+      <img class="thumb">
+    </div>
+    <img class="main">
+  </body>
+  <script src="main.js"></script>
+</html>
diff --git a/object-fit-gallery/main.js b/object-fit-gallery/main.js
@@ -0,0 +1,33 @@
+var thumbs = document.querySelectorAll('.thumb');
+var mainImg = document.querySelector('.main');
+
+for(i = 1; i <= thumbs.length ; i++) {
+  var requestObj = 'images/pic' + i + '.jpg';
+  retrieveImage(requestObj,i-1);
+}
+
+function retrieveImage(requestObj,imageNo) {
+  var request = new XMLHttpRequest();
+  request.open('GET', requestObj, true);
+  request.responseType = 'blob';
+  request.send();
+
+  request.onload = function() {
+    var objectURL = URL.createObjectURL(request.response);
+    thumbs[imageNo].setAttribute('src',objectURL);
+    thumbs[imageNo].onclick = function() {
+      mainImg.setAttribute('src',objectURL);
+      mainImg.className = 'blowup';
+        for(i = 0; i < thumbs.length; i++) {
+          thumbs[i].className = 'thumb darken';
+        }
+    }
+  }
+}
+
+mainImg.onclick = function() {
+  mainImg.className = 'main';
+  for(i = 0; i < thumbs.length; i++) {
+    thumbs[i].className = 'thumb';
+  }
+}
diff --git a/object-fit-gallery/style.css b/object-fit-gallery/style.css
@@ -0,0 +1,44 @@
+html {
+	margin: 0;
+	background: black;
+	height: 100%;
+}
+
+body {
+	margin: 0;
+	width: 100%;
+	height: inherit;
+}
+
+/* the three main rows going down the page */
+
+body > div {
+  height: 25%;
+}
+
+.thumb {
+	float: left;
+	width: 25%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.main {
+  display: none;
+}
+
+.blowup {
+  display: block;
+  position: absolute;
+  object-fit: contain;
+  object-position: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2000;
+}
+
+.darken {
+  opacity: 0.4;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,3 +3,5 @@
		This repository contains examples of CSS usage.

		The "editable-examples" directory contains CSS examples that are intended to be embedded in MDN pages as live editable samples.

		The "object-fit-gallery" directory contains a fun image gallery that uses <code>object-fit</code> to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/object-fit-gallery/).