Skip to content

Commit c985a56

Browse files
Elchi3Elchi3
committed
Merge https://github.com/mdn/object-fit-gallery into this repo. Original code by @chrisdavidmills 
2 parents a9fdccd + 992c6c3 commit c985a56

File tree

20 files changed

+123
-0
lines changed

20 files changed

+123
-0
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@
33
This repository contains examples of CSS usage.
44

55
The "editable-examples" directory contains CSS examples that are intended to be embedded in MDN pages as live editable samples.
6+
7+
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/).

‎object-fit-gallery/images/pic1.jpg

19 KB
Loading

‎object-fit-gallery/images/pic10.jpg

41.8 KB
Loading

‎object-fit-gallery/images/pic11.jpg

52.4 KB
Loading

‎object-fit-gallery/images/pic12.jpg

132 KB
Loading

‎object-fit-gallery/images/pic13.jpg

102 KB
Loading

‎object-fit-gallery/images/pic14.jpg

96.5 KB
Loading

‎object-fit-gallery/images/pic15.jpg

37.4 KB
Loading

‎object-fit-gallery/images/pic16.jpg

60.8 KB
Loading

‎object-fit-gallery/images/pic2.jpg

101 KB
Loading

‎object-fit-gallery/images/pic3.jpg

94.2 KB
Loading

‎object-fit-gallery/images/pic4.jpg

63.7 KB
Loading

‎object-fit-gallery/images/pic5.jpg

72.5 KB
Loading

‎object-fit-gallery/images/pic6.jpg

95 KB
Loading

‎object-fit-gallery/images/pic7.jpg

59.2 KB
Loading

‎object-fit-gallery/images/pic8.jpg

108 KB
Loading

‎object-fit-gallery/images/pic9.jpg

74.5 KB
Loading

‎object-fit-gallery/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="viewport" content="width=device-width">
7+
8+
<title>Object-fit gallery</title>
9+
10+
<link rel="stylesheet" href="style.css">
11+
<!--[if lt IE 9]>
12+
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
13+
<![endif]-->
14+
</head>
15+
16+
<body>
17+
<div class="top-row">
18+
<img class="thumb">
19+
<img class="thumb">
20+
<img class="thumb">
21+
<img class="thumb">
22+
</div>
23+
<div class="second-row">
24+
<img class="thumb">
25+
<img class="thumb">
26+
<img class="thumb">
27+
<img class="thumb">
28+
</div>
29+
<div class="third-row">
30+
<img class="thumb">
31+
<img class="thumb">
32+
<img class="thumb">
33+
<img class="thumb">
34+
</div>
35+
<div class="bottom-row">
36+
<img class="thumb">
37+
<img class="thumb">
38+
<img class="thumb">
39+
<img class="thumb">
40+
</div>
41+
<img class="main">
42+
</body>
43+
<script src="main.js"></script>
44+
</html>

‎object-fit-gallery/main.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
var thumbs = document.querySelectorAll('.thumb');
2+
var mainImg = document.querySelector('.main');
3+
4+
for(i = 1; i <= thumbs.length ; i++) {
5+
var requestObj = 'images/pic' + i + '.jpg';
6+
retrieveImage(requestObj,i-1);
7+
}
8+
9+
function retrieveImage(requestObj,imageNo) {
10+
var request = new XMLHttpRequest();
11+
request.open('GET', requestObj, true);
12+
request.responseType = 'blob';
13+
request.send();
14+
15+
request.onload = function() {
16+
var objectURL = URL.createObjectURL(request.response);
17+
thumbs[imageNo].setAttribute('src',objectURL);
18+
thumbs[imageNo].onclick = function() {
19+
mainImg.setAttribute('src',objectURL);
20+
mainImg.className = 'blowup';
21+
for(i = 0; i < thumbs.length; i++) {
22+
thumbs[i].className = 'thumb darken';
23+
}
24+
}
25+
}
26+
}
27+
28+
mainImg.onclick = function() {
29+
mainImg.className = 'main';
30+
for(i = 0; i < thumbs.length; i++) {
31+
thumbs[i].className = 'thumb';
32+
}
33+
}

‎object-fit-gallery/style.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
html {
2+
margin: 0;
3+
background: black;
4+
height: 100%;
5+
}
6+
7+
body {
8+
margin: 0;
9+
width: 100%;
10+
height: inherit;
11+
}
12+
13+
/* the three main rows going down the page */
14+
15+
body > div {
16+
height: 25%;
17+
}
18+
19+
.thumb {
20+
float: left;
21+
width: 25%;
22+
height: 100%;
23+
object-fit: cover;
24+
}
25+
26+
.main {
27+
display: none;
28+
}
29+
30+
.blowup {
31+
display: block;
32+
position: absolute;
33+
object-fit: contain;
34+
object-position: center;
35+
top: 0;
36+
left: 0;
37+
width: 100%;
38+
height: 100%;
39+
z-index: 2000;
40+
}
41+
42+
.darken {
43+
opacity: 0.4;
44+
}

0 commit comments

Comments
 (0)