resoponsive img galery tiles
by John Doe
HTML
<div style="height: 283.179px; width:100%;" class="justified-gallery" id="liveDemo">
<div>
<img alt="What's your destination?" src="http://miromannino.github.io/Justified-Gallery//photos/8083451788_552becfbc7_m.jpg">
</div>
<div>
<img alt="Just in a dream Place" src="http://miromannino.github.io/Justified-Gallery//photos/7948632554_01f6ae6b6f_m.jpg">
</div>
<div>
<img alt="Truthful Innocence" src="http://miromannino.github.io/Justified-Gallery//photos/7302459122_19fa1d8223_m.jpg">
</div>
<div>
<img alt="Simply my Brother" src="http://miromannino.github.io/Justified-Gallery//photos/7222046648_5bf70e893a_m.jpg">
</div>
<div>
<img alt="Freedom" src="http://miromannino.github.io/Justified-Gallery//photos/7002395006_29fdc85f7a_m.jpg">
</div>
<div>
<img alt="Maybe spring" src="http://miromannino.github.io/Justified-Gallery//photos/7062575651_b23918b11a_m.jpg">
</div>
<div>
<img alt="Love" src="http://miromannino.github.io/Justified-Gallery//photos/6841267340_855273fd7e_m.jpg">
</div>
<div>
<img alt="Young Lovers' Wall and the Old Rain" src="http://miromannino.github.io/Justified-Gallery//photos/6958456697_e56a37bb5f_m.jpg">
</div>
<div>
<img alt="These are the colors I love" src="http://miromannino.github.io/Justified-Gallery//photos/6791628438_affaa19e10_m.jpg">
</div>
<div>
<img alt="The Hope" src="http://miromannino.github.io/Justified-Gallery//photos/6916180091_9c9559e463_m.jpg">
</div>
<div>
<img alt="Florence streets. Florence people." src="http://miromannino.github.io/Justified-Gallery//photos/6880502467_d4b3c4b2a8_m.jpg">
</div>
<div>
<img alt="I Love You" src="http://miromannino.github.io/Justified-Gallery//photos/6876412479_6268c6e2aa_m.jpg">
</div>
<div>
<img alt="The painter in Florence" src="http://miromannino.github.io/Justified-Gallery//photos/6840627709_92ed52fb41_m.jpg">
</div>
<div>
<img alt="Me and My Belover"...CSS
/*! * Justified Gallery - v3.5.4 * 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:0;
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:300;
font-family:sans-serif
}
.justified-gallery>a>.caption.caption-visible,.justified-gallery>div>.caption.caption-visible {
display:initial;
opacity:.7;
filter:"alpha(opacity=70)";
-webkit-animation:justified-gallery-show-caption-animation 500ms 0 ease;
-moz-animation:justified-gallery-show-caption-animation 500ms 0 ease;
-ms-animation:justified-gallery-show-caption-animation...JavaScript
/*!
* Justified Gallery - v3.5.4
* http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2015 Miro Mannino
* Licensed under the MIT license.
*/
!function(a){a.fn.justifiedGallery=function(b){function c(a,b,c){var d;return d=a>b?a:b,100>=d?c.settings.sizeRangeSuffixes.lt100:240>=d?c.settings.sizeRangeSuffixes.lt240:320>=d?c.settings.sizeRangeSuffixes.lt320:500>=d?c.settings.sizeRangeSuffixes.lt500:640>=d?c.settings.sizeRangeSuffixes.lt640:c.settings.sizeRangeSuffixes.lt1024}function d(a,b){return-1!==a.indexOf(b,a.length-b.length)}function e(a,b){return a.substring(0,a.length-b.length)}function f(a,b){var c=!1;for(var e in b.settings.sizeRangeSuffixes)if(0!==b.settings.sizeRangeSuffixes[e].length){if(d(a,b.settings.sizeRangeSuffixes[e]))return b.settings.sizeRangeSuffixes[e]}else c=!0;if(c)return"";throw"unknown suffix for "+a}function g(a,b,d,g){var h=a.match(g.settings.extension),i=null!=h?h[0]:"",j=a.replace(g.settings.extension,"");return j=e(j,f(j,g)),j+=c(b,d,g)+i}function h(b){var c=a(b.currentTarget).find(".caption");b.data.settings.cssAnimation?c.addClass("caption-visible").removeClass("caption-hidden"):c.stop().fadeTo(b.data.settings.captionSettings.animationDuration,b.data.settings.captionSettings.visibleOpacity)}function i(b){var c=a(b.currentTarget).find(".caption");b.data.settings.cssAnimation?c.removeClass("caption-visible").removeClass("caption-hidden"):c.stop().fadeTo(b.data.settings.captionSettings.animationDuration,b.data.settings.captionSettings.nonVisibleOpacity)}function j(a,b,c){c.settings.cssAnimation?(a.addClass("entry-visible"),b()):a.stop().fadeTo(c.settings.imagesAnimationDuration,1,b)}function k(a,b){b.settings.cssAnimation?a.removeClass("entry-visible"):a.stop().fadeTo(0,0)}function l(a){var b=a.find("> img");return 0===b.length&&(b=a.find("> a > img")),b}function m(b,c,d,e,f,k,m){function n(){p!==q&&o.attr("src",q)}var...