Justified Gallery

Justified Gallery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.0/jquery.justifiedGallery.min.js"></script>
<div id="justifiedGallery">
  <a href="#" title="What's your destination?">
    <img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
  </a>
  <a href="#" title="Just in a dream Place">
    <img alt="Just in a dream Place" src="images.1.jpg" />
  </a>
  <a href="#" title="Il Capo at Palermo">
    <img alt="Il Capo at Palermo" src="http://lorempixel.com/300/226/?1" />
  </a>
 
</div>

CSS

/*!
 * Justified Gallery - v3.6.1
 * http://miromannino.github.io/Justified-Gallery/
 * Copyright (c) 2015 Miro Mannino
 * Licensed under the MIT license.
 */

@-webkit-keyframes justified-gallery-show-caption-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: .7;
  }
}

@-moz-keyframes justified-gallery-show-caption-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: .7;
  }
}

@-o-keyframes justified-gallery-show-caption-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: .7;
  }
}

@keyframes justified-gallery-show-caption-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: .7;
  }
}

@-webkit-keyframes justified-gallery-show-entry-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes justified-gallery-show-entry-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes justified-gallery-show-entry-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes justified-gallery-show-entry-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.justified-gallery {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.justified-gallery > a,
.justified-gallery > div {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
}

.justified-gallery > a > img,
.justified-gallery > div > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 5px;
  border: 0;
}

.justified-gallery > a > .caption,
.justified-gallery > div > .caption {
  display: none;
  position: absolute;
  bottom: 0;
  padding: 5px;
  background-color: #000;
  left: 0;
  right: 0;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
}

.justified-gallery > a > .caption.caption-visible,
.justified-gallery > div > .caption.caption-visible {
  display: initial;
  opacity: .7;
  filter:...

JavaScript

$("#justifiedGallery").justifiedGallery({
  'usedSuffix': 'lt240',
  'justifyLastRow': true,
  'rowHeight': 227,
  'fixedHeight': false,
  'lightbox': false,
  'captions': true,
  'margins': 1
});