<!-- 
This is the BEST photo gallery out there. Read why:

https://github.com/yairEO/photobox
-->
<ul id='gallery'></ul>

html{ min-height:100%; overflow-y:scroll;  background:#000; }
body{ font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; padding:0; }
 

a{ text-decoration:none; }

#wrap{ overflow:hidden; padding:3%; }
#pbOverlay.show ~ #wrap{ -webkit-filter:blur(2px) grayscale(.4); }
		
#gallery{ padding:20px; }
	#gallery li{ list-style:none; perspective:100px; -webkit-perspective:100px; margin:1px; float:right; position:relative; transition:.1s; -webkit-transition:0.1s; }
		#gallery li.video::before{ content:'\25BA'; color:#FFF; font-size:20px; height:20px; width:20px; line-height:0.9; position:absolute; bottom:3px; left:4px; z-index:1; background:rgba(0,0,0,0.4); box-shadow:0 0 0 3px rgba(0,0,0,0.4); border-radius:0 3px 0 0; pointer-events:none; opacity:0; transition:.5s 0.2s; }
		#gallery li.loaded.video::before{ opacity:1; }
		#gallery a{ display:block; width:75px; height:68px; vertical-align:bottom; overflow:hidden; background:rgba(0,0,0,0.1);
					transition:.4s ease-out; -webkit-transition:0.4s ease-out; -webkit-transform:rotateX(90deg) translate(-50px,-50%); transform:rotateX(90deg) translate(-50px,-50%); }
		#gallery a:active, #gallery a:focus{ outline:none; }
		#gallery a img{ min-height:100%; width:100%; transition:.3s ease-out; -webkit-transition:0.3s ease-out; }
		#gallery .loaded a{ -webkit-transform:rotateX(0deg) translate(0,0); transform:rotateX(0deg) translate(0,0); }
			#gallery li.loaded:hover{ z-index:2; transform:scale(1.5); -webkit-transform:scale(1.5); }
			#gallery li.loaded a:hover{ box-shadow:0 0 0 2px #FFF, 0 0 20px 5px #000; transition:.1s; -webkit-transition:0.1s; }
			#gallery li.loaded:hover img{ transform:scale(1.2); -webkit-transform:scale(1.2); }
			#gallery li.loaded.video:hover::before{ opacity:0; }
//-------------------------------------------
// THIS IS NOT A PART OF THE PLUGIN. 
// ONLY FOR THE DEMO.
//-------------------------------------------
!(function(){
    'use strict';

	var numOfImages = window.location.search ? parseInt(window.location.search.match(/\d+$/)[0]) : 70,
		gallery = $('#gallery'),
		videos = [
			{
				title: "Victoria's Secret",
				url: "https://player.vimeo.com/video/8974462?byline=0&portrait=0",
				thumb: "https://b.vimeocdn.com/ts/432/699/43269900_100.jpg"
			},
			{
				title: "PEOPLE ARE AWESOME 2013 FULL HD ",
				url: "https://www.youtube.com/embed/W3OQgh_h4U4",
				thumb: "https://img.youtube.com/vi/W3OQgh_h4U4/0.jpg"
			},
			{
				title: "Biting Elbows - 'Bad Motherfucker' Official Music Video",
				url: "https://player.vimeo.com/video/62092214?byline=0&portrait=0",
				thumb: "https://b.vimeocdn.com/ts/431/797/431797120_100.jpg"
			}
		];
		
    // Get some photos from Flickr for the demo
    $.ajax({
        url: 'https://api.flickr.com/services/rest/',
        data: {
            format: 'json',
            method: 'flickr.interestingness.getList',
			per_page : numOfImages,
            api_key: 'b51d3a7c3988ba6052e25cb152aecba2' // this is my own API key, please use yours
        },
	    dataType: 'jsonp',
        jsonp: 'jsoncallback'
    })
	.done(function (data){
        var loadedIndex = 1, isVideo;
		
		// add the videos to the collection
		data.photos.photo = data.photos.photo.concat(videos);
		
        $.each( data.photos.photo, function(index, photo){
			isVideo = photo.thumb ? true : false;
			// http://www.flickr.com/services/api/misc.urls.html
            var url = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret,
				img = document.createElement('img');
			
			// lazy show the photos one by one
			img.onload = function(e){
				img.onload = null;
				var link = document.createElement('a'),
				li = document.createElement('li')
				link.href = this.largeUrl;

				link.appendChild(this);
				if( this.isVideo ){
					link.rel = 'video';
					li.className = 'video'
				}
				li.appendChild(link);
				gallery[0].appendChild(li);
			
				setTimeout( function(){ 
					$(li).addClass('loaded');
				}, 25*loadedIndex++);
			};
			
			img['largeUrl'] = isVideo ? photo.url : url + '_b.jpg';
			img['isVideo'] = isVideo;
			img.src = isVideo ? photo.thumb : url + '_t.jpg';
			img.title = photo.title;
        });

		// finally, initialize photobox on all retrieved images
		$('#gallery').photobox('a', { thumbs:true }, callback);
		// using setTimeout to make sure all images were in the DOM, before the history.load() function is looking them up to match the url hash
		setTimeout(window._photobox.history.load, 1000);
		function callback(){
			console.log('callback for loaded content:', this);
		};
    });
})();

External CSS

  1. https://cdn.rawgit.com/yairEO/photobox/master/photobox/photobox.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdn.rawgit.com/yairEO/photobox/master/photobox/jquery.photobox.js