Photo Gallery 2

In this example below you will see how to do a Photo Gallery 2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by astara, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright astara ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Photo Gallery 2</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.linearicons.com/free/1.0.0/icon-font.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="gallery"></div>

<div id="viewer">
	<a class='x' onclick='viewerhide()'><i class='lnr lnr-cross'></i></a>
	<a class='x vq' onclick='showtip()'><i class='lnr lnr-question-circle'></i></a>
	
	<figure>
		<img id="viewimg">
		<img id="viewimgfx">
		<figcaption id="viewinfo"></figcaption>
	</figure>
</div>

<div id="viewtip"><i class='lnr lnr-arrow-right'></i> Right or Space = Next &nbsp; &nbsp; &nbsp; <i class='lnr lnr-arrow-left'></i> Left = Previous &nbsp; &nbsp; &nbsp; Esc = Close &nbsp; &nbsp; &nbsp; Shift = Toggle Labels</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://mind.im/js/jquery.transit.min.js'></script>
<script src='https://mind.im/js/exif.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/astara/photo-gallery-2-QEkLaZ */
body {
	font-family: sans-serif;
	font-size: 14px;
}
a {
	cursor: pointer;
}

.gallery figcaption {
	position: relative;
	bottom: 60px;
	background: rgba(255,255,255,0.7);
	padding: 4px;
}
.gallery figcaption {
	opacity: 0;
	transition: all 0.5s;
	cursor: default;
}
.gallery figure:hover figcaption {
	opacity: 1;
	bottom: 40px;
}
.gallery figure {
	display: inline-block;
	position: relative;
	height: 200px;
	width: 200px;
	overflow: hidden;
	cursor: pointer;
	margin: 4px;
}
.gallery figure>div {
	transition: all 0.6s;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
}
.gallery figure:hover div {
	transform: rotateY(.5turn) scale(0.8);
	opacity: 0.8;
}


#viewer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: #000;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s;
	color: #ccc;
}
#viewer.on {
	opacity: 1;
	pointer-events: all;
}
#viewer .x {
	position: absolute;
	right: 20px;
	top: 20px;
	font-size: xx-large;
	z-index: 1;
}
#viewer .x:hover {
	color: #0cf;
}
#viewer .vq {
	right: 27px;
	font-size: large;
	top: 70px;
	opacity: 0.5;
}

#viewimg, #viewimgfx {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	/* transition: all 1s; */
}
#viewimg {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}
#viewimg.trans {
	opacity:1;
}
#viewimgfx {
	opacity:0;
	pointer-events:none;
}
#viewimgfx.trans {
	opacity:1;
}

#viewinfo {
	position: absolute;
	z-index: 2;
	left: 16px;
	top: 16px;
	background: rgba(255,255,255,0.8);
	padding: 8px;
	color: #000;
	font-size: 16px;
	text-align: left;
}
#viewinfo b {
	font-weight: bold;
	font-size: x-large;
}

#viewtip {
	pointer-events: none;
	opacity: 0;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #222;
	color: #0cf;
	z-index: 18;
	padding: 20px;
	box-shadow: 5px 5px 18px
		rga(0,0,0,1);
	text-transform: uppercase;
	font-size: smaller;
}

/*Downloaded from https://www.codeseek.co/astara/photo-gallery-2-QEkLaZ */
var d=document,
	 $v = $('#viewer')

var pics = [
	{img:"http://mind.im/thumb.php?h=200&img=user/1/uploads/MyPics/porpoos.jpg",
	title:"Hi there, I'm a porpoos and I'm looking at you."},
	
	{img:"http://mind.im/thumb.php?h=200&img=user/1/uploads/MyPics/Rambotography.jpg",
	title:"<b>Rambo Photo</b><br>Rambo is an avid nature photographer who travels and often has extends stays in exotic locations."},
	
	{img:"http://mind.im/thumb.php?h=200&img=user/1/uploads/MyPics/feather%20shrug.jpg",
	title:"Feathery fluff."},
	
	{img:"http://mind.im/thumb.php?h=200&img=a/exif/jared polin beddia.jpg",
	title:"Pizza master."}
];

$(function(){

$(pics).each(function(i,o){
	var img=o.img, t=o.title
	$('.gallery').append("<figure>"
	+"<div style=\"background-image:url('"+img+"');\" data-src=\""+img+"\" data-title=\""+t+"\"></div>"
	+i+'#'
	+"</figure>")
})
	
	$(document).on('keyup', function(e){
		var k=e.which
		if(k==27) viewerhide()
		
		if($('#viewer').is(':visible')){
			if(k==39||k==32) viewer_next()
			else if(k==37) viewer_prev()
			//tab9 ~192 spc32 shft16 ctrl17
			else if(k==16||k==192) toggleinfo()
		}
	})

	$(document).on('click', '.gallery figure', function(e){
		var id=0
		viewershow($(this))
		
		showtip()
		
	})

})

function viewershow(a){
	var src = $(a).find('div').data('src')
	var srcbig = src.replace(/thumb(.*)img=/i, '')
	var index = $(a).index()
	var $gal = $(a).closest('.gallery')
	var txt = $(a).find('div').data('title')
	$('#viewer figcaption').html(txt)
	$('#viewer figure img').attr('src', srcbig)
	$('#viewer').addClass('on')
		.data('pos', index)
		.data('gal', $gal.index())
	
	$('#viewer figure img')
		.css({opacity:0})
		.transition({opacity:1})
}
function viewerhide(){
	$('#viewer').removeClass('on')
	$('#viewtip').stop()
		.transition({opacity:0},100)
}
function viewer_next(){
	var id=$v.data('pos'),
		 gid=$v.data('gal'),
		 $g=$('.gallery').eq(gid),
		 max=$g.children('figure').length-1,
		 next=id+1
		if(next>max)next=0
	var next_src=$g.find('figure').eq(next)
		.find('div').data('src')
	var next_txt=$g.find('figure').eq(next)
		.find('div').data('title')
	
	loadimg(gid,next,next_src,next_txt)
}
function viewer_prev(){
	var id=$v.data('pos'),
		 gid=$v.data('gal'),
		 $g=$('.gallery').eq(gid),
		 max=$g.children('figure').length-1,
		 prev=id-1
		if(prev<0)prev=max
	var prev_src=$g.find('figure').eq(prev)
		.find('div').data('src')
	var prev_txt=$g.find('figure').eq(prev)
		.find('div').data('title')
	
	loadimg(gid,prev,prev_src,prev_txt)
}

function loadimg(gal,id,src,txt){
	if(txt==undefined)txt=''
	src=src.replace(/thumb(.*)img=/i, '')
	var $v1=$('#viewimg'),
		 $v2=$('#viewimgfx')
	$('#viewer').data('pos', id)
	
	$('#viewinfo').html(txt)
	.transition({
		transform:'rotateX(360deg)'},
		function(){
		$(this).css({transform:''}) })
	
	$v2.css({opacity:0, transform:'translateX(-50%) scale(0.8)'})
		.attr('src',src)
		.transition({opacity:1, transform:'translateX(-50%) scale(1)'})
	$v1.css({opacity:1})
		.transition({opacity:0},
			function(){
				$v1.attr('src', src).css({opacity:1})
			})
}

function toggleinfo(){
	$('#viewinfo').fadeToggle('fast')
}

function showtip(){
	//Show Tip
	$('#viewtip').stop()
		.transition({opacity:1, marginBottom:20})
		.delay(6000)
		.transition({opacity:0, marginBottom:0})
}

Comments