Contents

<style>
/* force scrollbar */
html { overflow-y: scroll; }
    
/* To overwrite page's padding, to get bigger images */
/* article {padding:2%;} */

</style>

<div id='masonry' class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
{% for image in site.static_files %}
  {% if image.path contains include.gallery_path %}
    
        <img src="{{ image.path | prepend: site.baseurl }}" alt="" class="grid-item" style="padding: 0;">
      
  {% endif %}
{% endfor %}
</div> 

<!-- Require JQuery >= 3.2.1 Requireas well -->
<script src="{{ site.baseurl }}/assets/js/vendor/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="{{ site.baseurl }}/assets/js/vendor/imagesloaded.min.js" type="text/javascript"></script>

<script>
    
  // init Masonry
var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer',
  percentPosition: true    
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry();
});  

</script>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
jekyll-theme-type-on-strap-4.0.2	_includes/gallery.html