Skip to content

Instantly share code, notes, and snippets.

@tmitz

tmitz/index.html

Created March 28, 2017 09:13
Show Gist options
  • Save tmitz/f765868bfbaf32a0821b8fa3373bf424 to your computer and use it in GitHub Desktop.
Save tmitz/f765868bfbaf32a0821b8fa3373bf424 to your computer and use it in GitHub Desktop.
Download ZIP
Image gallery // source http://jsbin.com/hiyajog
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image gallery</title>
<style id="jsbin-css">
h1 {
font-family: helvetica, arial, sans-serif;
text-align: center;
}
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba(0,0,0,0);
}
button {
border: 0;
background: rgba(150,150,150,0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="http://i.imgur.com/IdTKENo.jpg">
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar">
</div>
<script id="jsbin-javascript">
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
/* Looping through images */
var images = [
'http://i.imgur.com/IdTKENo.jpg',
'http://i.imgur.com/l8t6lgd.jpg',
'http://i.imgur.com/bpUTjyu.jpg',
'http://i.imgur.com/OhGfaXN.jpg',
'http://i.imgur.com/wiPXNjA.jpg'
]
for (var i = 0; i < images.length; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', images[i]);
thumbBar.appendChild(newImage);
newImage.onclick = function() {
var imgSrc = this.getAttribute('src')
displayedImage.setAttribute('src', imgSrc)
}
}
/* Wiring up the Darken/Lighten button */
btn.addEventListener('click', function(e) {
cla = btn.getAttribute('class')
if (cla == 'dark') {
btn.setAttribute('class', 'light');
btn.textContent = 'Lighten';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)'
} else if (cla == 'light') {
btn.setAttribute('class', 'dark');
btn.textContent = 'Darken';
overlay.style.backgroundColor = 'rgba(0,0,0,0)'
}
});
</script>
<script id="jsbin-source-css" type="text/css">h1 {
font-family: helvetica, arial, sans-serif;
text-align: center;
}
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba(0,0,0,0);
}
button {
border: 0;
background: rgba(150,150,150,0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
/* Looping through images */
var images = [
'http://i.imgur.com/IdTKENo.jpg',
'http://i.imgur.com/l8t6lgd.jpg',
'http://i.imgur.com/bpUTjyu.jpg',
'http://i.imgur.com/OhGfaXN.jpg',
'http://i.imgur.com/wiPXNjA.jpg'
]
for (var i = 0; i < images.length; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', images[i]);
thumbBar.appendChild(newImage);
newImage.onclick = function() {
var imgSrc = this.getAttribute('src')
displayedImage.setAttribute('src', imgSrc)
}
}
/* Wiring up the Darken/Lighten button */
btn.addEventListener('click', function(e) {
cla = btn.getAttribute('class')
if (cla == 'dark') {
btn.setAttribute('class', 'light');
btn.textContent = 'Lighten';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)'
} else if (cla == 'light') {
btn.setAttribute('class', 'dark');
btn.textContent = 'Darken';
overlay.style.backgroundColor = 'rgba(0,0,0,0)'
}
});</script></body>
</html>
Raw
jsbin.hiyajog.css
h1 {
font-family: helvetica, arial, sans-serif;
text-align: center;
}
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba(0,0,0,0);
}
button {
border: 0;
background: rgba(150,150,150,0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
Raw
jsbin.hiyajog.js
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
/* Looping through images */
var images = [
'http://i.imgur.com/IdTKENo.jpg',
'http://i.imgur.com/l8t6lgd.jpg',
'http://i.imgur.com/bpUTjyu.jpg',
'http://i.imgur.com/OhGfaXN.jpg',
'http://i.imgur.com/wiPXNjA.jpg'
]
for (var i = 0; i < images.length; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', images[i]);
thumbBar.appendChild(newImage);
newImage.onclick = function() {
var imgSrc = this.getAttribute('src')
displayedImage.setAttribute('src', imgSrc)
}
}
/* Wiring up the Darken/Lighten button */
btn.addEventListener('click', function(e) {
cla = btn.getAttribute('class')
if (cla == 'dark') {
btn.setAttribute('class', 'light');
btn.textContent = 'Lighten';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)'
} else if (cla == 'light') {
btn.setAttribute('class', 'dark');
btn.textContent = 'Darken';
overlay.style.backgroundColor = 'rgba(0,0,0,0)'
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment