Just because it is beautiful.

Based on a standard WordPress gallery inside a regular Blog-post, in which we inserted the Isotope gallery together with the Strip-lightbox. Checkout this page if you want to learn how to do this.

The complete piece of code included in this post is:

<!-- load isotope: -->
<script src="https://unpkg.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script> 	 	
<!-- load the strip-lightbox: -->
<script src="https://home.et.utwente.nl/slootenvanf/div/strip/js/strip.pkgd.min.js"></script>
<link rel='stylesheet' id='strip-style-css' href='https://home.et.utwente.nl/slootenvanf/div/strip/css/strip.css' type='text/css' media='all' />

<!-- activate isotope: -->
<script>
jQuery(function($){
  $(window).on('load', function(){ // document is fully loaded
	// remove some default classes from the standard-Wordpress gallery (your gallery-classes might be different, they depend on the theme):
	$('.gallery').removeClass("gallery-columns-3 gallery-size-full");
	// set style for layout of the items:
	$('.gallery-item').css({"width":"20%", "margin":0, "padding":1});
	// jQuery code for Strip-Lightbox:
	$(".gallery-item a").addClass("strip");
	$(".gallery-item a").attr("data-strip-group","gallery-group");
	// add captions:
	$(".gallery-item a").each(function() {
		$(this).attr("data-strip-caption", $(this).find("img").attr("alt") );
	});
	// activate isotope:
	$('.gallery').isotope({
		itemSelector: '.gallery-item', layoutMode: 'masonry'
	});
	// remove add-this sharing buttons because they interfere with the lightbox:
	$.extend(Strip.Skins.strip, {
		onShow: function() {
			$('.at4-share-outer-right').hide();
		}
	});
  });
});
</script>