Shuffle JS

by bluehelmet

HTML

<script src="https://cdn.rawgit.com/Vestride/Shuffle/master/dist/jquery.shuffle.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/dimsemenov/PhotoSwipe/master/dist/photoswipe-ui-default.min.js"></script>
<script src="https://cdn.rawgit.com/dimsemenov/PhotoSwipe/master/dist/photoswipe.min.js"></script>
<script src="https://cdn.rawgit.com/Vestride/Shuffle/master/dist/jquery.shuffle.modernizr.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/dimsemenov/PhotoSwipe/master/dist/photoswipe.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/dimsemenov/PhotoSwipe/master/dist/default-skin/default-skin.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.js"></script>
<script src="https://cdn.rawgit.com/Vestride/Shuffle/master/js/viewport.js"></script>
<div id="content" class="container-fluid" style="padding: 0px;">
    <div class="gallery">
<ul class="filter-tags">
    <li><a class="active" href="#" data-group="all">All</a></li>
    <li><a href="#" data-group="vintage">Vintage</a></li>
    <li><a href="#" data-group="tech">Technology</a></li>
    <li><a href="#" data-group="nature">Nature</a></li>
    <li><a href="#" data-group="life">Lifestyle</a></li>
    <li><a href="#" data-group="arch">Architecture</a></li> 
</ul>
    </div>
    <div class="clearfix"></div>
    
    <img id="loader" class="loader" alt="Loading..."...

CSS

.filter-tags {
    display: block;
    width: 100%;
    line-height: 25px;
    margin: 5px 0 5px 0;
    list-style-type: none;
}

.filter-tags a {
    color: #00A88C;
    font-size: 12px;
    padding: 8px;
    background-color: rgba(19, 235, 199, .7);
    border: solid 1px #13ebc7;
    border-radius: 0px 10px;
    margin-left: 2px;
    float: right;
}
.filter-tags a:hover {
    background-color: rgba(19, 235, 199, 0);
}

.masonry-gallery img {
    width: 100%;
    height: auto;
    padding:2px;
}

.photo-title {
    background-color:white;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    opacity:0;
    transform: scale(.8, .8);
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    -ms-transform: scale(.8, .8);
    -o-transform: scale(.8, .8);
}
.photo-title h2 {
    text-transform: uppercase;
    padding:5px;
    text-align:center;
    position:relative;
    top: 45%;
    line-height: 30px;
    transform: translateY(-50%);
}
.masonry-gallery figure {
    position:relative;
    display: block;
    margin: 0px;
    width: 20%;
}
.masonry-gallery figure:hover .photo-title {
    opacity:.8;
}
.masonry-gallery figcaption {
    display: none;
}
.masonry-gallery figure, .masonry-gallery figure:hover .photo-title, .filter-tags a, .filter-tags a:hover {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transform: translateZ(0);
}

.masonry-gallery {
    /* Prevent vertical gaps */
    line-height: 0;
    -webkit-column-count: 5;
    -webkit-column-gap: 0;
    -moz-column-count: 5;
    -moz-column-gap: 0;
    column-count: 5;
    column-gap:0;
}

@media (max-width: 1200px) {
    .masonry-gallery {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
    .masonry-gallery figure {
        width:25%;
    }
}
@media...

JavaScript

///////////////////////  IMAGESLOADED  //////////////////////

var ImageLoad = (function( $, imagesLoaded ) {

  var $shuffle = $('.masonry-gallery'),
      $imgs = $shuffle.find('img'),
      $loader = $('#loader'),
      sizer = document.getElementById('#shuffle-sizer'),
      imgLoad,

  init = function() {

    // Create a new imagesLoaded instance
    imgLoad = new imagesLoaded( $imgs.get() );

    // Listen for when all images are done
    // will be executed even if some images fail
    imgLoad.on( 'always', onAllImagesFinished );
  },

  onAllImagesFinished = function( instance ) {

    if ( window.console && window.console.log ) {
      console.log( instance );
    }

    // Hide loader
    $loader.addClass('hidden');

    // Adds visibility: visible;
    $shuffle.addClass('images-loaded');

    // Initialize shuffle
    $shuffle.shuffle({
      sizer: sizer,
      itemSelector: '.gallery-photo'
    });
  };

  return {
    init: init
  };
}( jQuery, window.imagesLoaded ));

$(document).ready(function() {
  ImageLoad.init();
});  




///////////////////////  SHUFFLE  //////////////////////



$(document).ready(function() {

			/* initialize shuffle plugin */
			var $grid = $('.masonry-gallery'),
                 $sizer = $grid.find('#shuffle-sizer');
    
                  $grid.shuffle({
                    itemSelector: '.gallery-photo',
                    sizer: $sizer,
			});

			/* reshuffle when user clicks a filter item */
			$('.filter-tags a').click(function (e) {
				e.preventDefault();

				// set active class
				$('.filter-tags a').removeClass('active');
				$(this).addClass('active');

				// get group name from clicked item
				var groupName = $(this).attr('data-group');

				// reshuffle grid
				$grid.shuffle('shuffle', groupName );
			});

		});



///////////////////////  PHOTOSWIPE  //////////////////////



var initPhotoSwipeFromDOM = function (gallerySelector) {

      // parse slide data (url, title, size ...) from DOM elements 
...