Google Photos Material Gallery

Google Photos Material Gallery.markdown

Google Photos Material Gallery

A vanilla javascript photo gallery plugin inspired by Google Photos.

A Pen by Ettrics on CodePen.

License.

index.html

<h2>Material Photo Gallery</h2>
<p>
	<a href="https://github.com/ettrics/material-photo-gallery" class="demo-btn">Documentation</a>
	<a href="https://github.com/ettrics/material-photo-gallery/archive/master.zip" class="demo-btn" download="material-photo-gallery">Download</a>
</p>

<div class="m-p-g">
	<div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
		<img src="http://unsplash.it/600/400?image=940" data-full="http://unsplash.it/1200/800?image=940" class="m-p-g__thumbs-img" />
		<img src="http://unsplash.it/640/450?image=906" data-full="http://unsplash.it/1280/900?image=906" class="m-p-g__thumbs-img" />
		<img src="http://unsplash.it/550/420?image=885" data-full="http://unsplash.it/1100/840?image=885" class="m-p-g__thumbs-img" />
		<img src="http://unsplash.it/650/450?image=823" data-full="http://unsplash.it/1300/900?image=823" class="m-p-g__thumbs-img" />
		<img src="http://unsplash.it/600/350?image=815" data-full="http://unsplash.it/1200/700?image=815" class="m-p-g__thumbs-img" />
		<img src="http://unsplash.it/560/500?image=677" data-full="http://unsplash.it/1120/1000?image=677" class="m-p-g__thumbs-img" />
		<img src="http://unsplash.it/670/410?image=401" data-full="http://unsplash.it/1340/820?image=401" class="m-p-g__thumbs-img" />
		<img src="http://unsplash.it/620/340?image=623" data-full="http://unsplash.it/1240/680?image=623" class="m-p-g__thumbs-img" />
		<img src="http://unsplash.it/790/390?image=339" data-full="http://unsplash.it/1580/780?image=339" class="m-p-g__thumbs-img" />
	</div>

	<div class="m-p-g__fullscreen"></div>
</div>

<script>
	var elem = document.querySelector('.m-p-g');

	document.addEventListener('DOMContentLoaded', function() {
		var gallery = new MaterialPhotoGallery(elem);
	});
</script>

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/material-photo-gallery.min.js"></script>

style.css

/*------------------------------------*\
    MATERIAL PHOTO GALLERY
\*------------------------------------*/

$gallery-width: 860px;
$transition-duration: 0.5s;

.m-p-g {
	max-width: $gallery-width;
	margin: 0 auto;
	
	&__thumbs {
		
		&-img {
			margin: 0;
			float: left;
			vertical-align: bottom;
			cursor: pointer;
			z-index: 1;
			position: relative;
			opacity: 0;
			filter: brightness(100%);
			-webkit-tap-highlight-color: rgba(black, 0);
			will-change: opacity, transform;
			transition: all $transition-duration cubic-bezier(0.23, 1, 0.32, 1);
			
			&.active {
				z-index: 50;
			}
			
			&.layout-completed {
				opacity: 1;
			}

			&.hide {
				opacity: 0;
			}
			
			&:hover {
				filter: brightness(110%);
			}
		}
	}
	
	&__fullscreen {
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		background: rgba(black, 0);
		visibility: hidden;
		transition:
			background .25s ease-out,
			visibility .01s $transition-duration linear;
		will-change: background, visibility;
		backface-visibility: hidden;

		&.active {
			transition:
				background .25s ease-out,
				visibility .01s 0s linear;
			visibility: visible;
			background: rgba(black, 0.95);
		}

		&-img {
			pointer-events: none;
			position: absolute;
			transform-origin: left top;
			top: 50%;
			left: 50%;
			max-height: 100vh;
			max-width: 100%;
			visibility: hidden;
			will-change: visibility;
			transition: opacity $transition-duration ease-out;

			&.active {
				visibility: visible;
				opacity: 1 !important;
				transition:
					transform $transition-duration cubic-bezier(0.23, 1, 0.32, 1),
					opacity $transition-duration ease-out;
			}

			&.almost-active {
				opacity: 0;
				transform: translate3d(0,0,0) !important;
			}
		}
	}
	
	&__controls {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 200;
		height: 20vh;
		background: linear-gradient(to top, transparent 0%, rgba(black, 0.55) 100%);
		opacity: 0;
		visibility: hidden;
		transition: all $transition-duration cubic-bezier(0.23, 1, 0.32, 1);
		
		&.active {
			opacity: 1;
			visibility: visible;
		}
		
		&-close,
		&-arrow {
			appearance: none;
			border: none;
			background: none;

			&:focus {
				outline: none;
			}
		}

		&-arrow {
			position: absolute;
			z-index: 1;
			top: 0;
			width: 20%;
			height: 100vh;
			display: flex;
			align-items: center;
			cursor: pointer;
			-webkit-tap-highlight-color: rgba(black, 0);
			opacity: 0;
			
			&:hover {
				opacity: 1;
			}
			
			&--prev {
				left: 0;
				padding-left: 3vw;
				justify-content: flex-start;
			}
			
			&--next {
				right: 0;
				padding-right: 3vw;
				justify-content: flex-end;
			}
		}
		
		&-close {
			position: absolute;
			top: 3vh;
			left: 3vw;
			z-index: 5;
			cursor: pointer;
			-webkit-tap-highlight-color: rgba(black, 0);
		}
	}

	&__btn {
		$size: 50px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: $size;
		height: $size;
		border-radius: 50%;
		background: rgba(white, 0.07);
		transition: all .25s ease-out;

		&:hover {
			background: rgba(white, 0.15);
		}
	}

	&__alertBox {
		position: fixed;
		z-index: 999;
		max-width: 700px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		padding: 25px;
		border-radius: 3px;
		text-align: center;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
		color: grey;

		h2 {
			color: red;
		}
	}
}

/* DEMO */
body {
	background: #fefefe;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	font-family: 'Roboto Mono';
}

h2 {
	font-weight: 300;
	margin: 4vh 4vw;
	letter-spacing: 3px;
	color: grey;
	text-transform: uppercase;
}

.demo-btn {
	display: inline-block;
	margin: 0 2.5px 4vh 2.5px;
	text-decoration: none;
	color: grey;
	padding: 15px;
	line-height: 1;
	min-width: 140px;
	background: rgba(0,0,0, 0.07);
	border-radius: 6px;
}

.demo-btn:hover {
	background: rgba(0,0,0,0.12);
}

@media (max-width: 640px) {

	.demo-btn {
		min-width: 0;
		font-size: 14px;
	}
}