Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 13, 2016 10:42
Show Gist options
  • Save anonymous/bc4b9291b430b7444016c46cab93d2d3 to your computer and use it in GitHub Desktop.
Save anonymous/bc4b9291b430b7444016c46cab93d2d3 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/firive
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body {
margin:0;
padding:0;
}
ul {
margin:0;
padding:0;
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
ul li {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 200px;
margin: .5vw;
}
ul li img,
#dialog img{
width: 100%;
height: auto;
}
#overlay {
background: #000;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
background: rgba(0, 0, 0, 0.5);
z-index:90;
}
.hide {
display:none;
}
#dialog {
width:80%;
height:auto;
background:#fff;
position: absolute;
top:100px;
left:calc(50% - 10px);
margin-left:-40%;
padding:10px;
z-index:100;
}
#dialog span {
font-size: 14px;
font-family: arial;
}
</style>
</head>
<body>
<ul>
<li data-info="this image represents this and that"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li data-info="this image represents that and this"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350"></li>
</ul>
<div id="dialog" class="hide">
<img id="dialogImg" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350" />
<span></span>
</div>
<div id="overlay" class="hide">
</div>
<script id="jsbin-javascript">
(function() {
var isDialogOpen = false;
var dialog = document.getElementById('dialog');
var dialogImg = document.getElementById('dialogImg');
var overlay = document.getElementById('overlay');
var list = document.getElementsByTagName('li');
for( var i=0,il = list.length; i< il; i ++ ){
list[i].onclick = clickHandler;
}
function clickHandler() {
var text = this.getAttribute('data-info');
var imgSource = this.firstChild.getAttribute('src');
//console.log(this.firstChild.getAttribute('src'));
//return false;
isDialogOpen = true;
overlay.classList.remove('hide');
dialog.classList.remove('hide');
dialog.lastChild.textContent = text;
dialogImg.setAttribute('src', imgSource);
}
overlay.onclick = function(){
overlay.classList.add('hide');
dialog.classList.add('hide');
};
})();
</script>
<script id="jsbin-source-css" type="text/css">body {
margin:0;
padding:0;
}
ul {
margin:0;
padding:0;
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
ul li {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 200px;
margin: .5vw;
}
ul li img,
#dialog img{
width: 100%;
height: auto;
}
#overlay {
background: #000;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
background: rgba(0, 0, 0, 0.5);
z-index:90;
}
.hide {
display:none;
}
#dialog {
width:80%;
height:auto;
background:#fff;
position: absolute;
top:100px;
left:calc(50% - 10px);
margin-left:-40%;
padding:10px;
z-index:100;
}
#dialog span {
font-size: 14px;
font-family: arial;
}</script>
</body>
</html>
Raw
jsbin.firive.css
body {
margin:0;
padding:0;
}
ul {
margin:0;
padding:0;
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
ul li {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 200px;
margin: .5vw;
}
ul li img,
#dialog img{
width: 100%;
height: auto;
}
#overlay {
background: #000;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
background: rgba(0, 0, 0, 0.5);
z-index:90;
}
.hide {
display:none;
}
#dialog {
width:80%;
height:auto;
background:#fff;
position: absolute;
top:100px;
left:calc(50% - 10px);
margin-left:-40%;
padding:10px;
z-index:100;
}
#dialog span {
font-size: 14px;
font-family: arial;
}
Raw
jsbin.firive.js
(function() {
var isDialogOpen = false;
var dialog = document.getElementById('dialog');
var dialogImg = document.getElementById('dialogImg');
var overlay = document.getElementById('overlay');
var list = document.getElementsByTagName('li');
for( var i=0,il = list.length; i< il; i ++ ){
list[i].onclick = clickHandler;
}
function clickHandler() {
var text = this.getAttribute('data-info');
var imgSource = this.firstChild.getAttribute('src');
//console.log(this.firstChild.getAttribute('src'));
//return false;
isDialogOpen = true;
overlay.classList.remove('hide');
dialog.classList.remove('hide');
dialog.lastChild.textContent = text;
dialogImg.setAttribute('src', imgSource);
}
overlay.onclick = function(){
overlay.classList.add('hide');
dialog.classList.add('hide');
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment