project widget: Wait for images to load to prevent overlapping (#76)

layouts/partials/footer.html

@@ -3,6 +3,7 @@
     <script src="{{ "/js/jquery-1.12.3.min.js" | relURL }}"></script>
     <script src="{{ "/js/bootstrap.min.js" | relURL }}"></script>
     <script src="{{ "/js/isotope.pkgd.min.js" | relURL }}"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
     <script src="{{ "/js/hugo-academic.js" | relURL }}"></script>
     {{ range .Site.Params.custom_js }}
     <script src="{{ "/js/" | relURL }}{{ . }}"></script>

static/js/hugo-academic.js

@@ -94,19 +94,20 @@
    * --------------------------------------------------------------------------- */
 
   var $container = $('#container-projects');
+  $container.imagesLoaded(function () {
+    // Initialize Isotope after all images have loaded.
+    $container.isotope({
+      itemSelector: '.isotope-item',
+      layoutMode: 'masonry'
+    });
 
-  // Initialize Isotope.
-  $container.isotope({
-    itemSelector: '.isotope-item',
-    layoutMode: 'masonry'
-  });
-
-  // Filter items when filter link is clicked.
-  $('#filters a').click(function () {
-    var selector = $(this).attr('data-filter');
-    $container.isotope({filter: selector});
-    $(this).removeClass('active').addClass('active').siblings().removeClass('active all');
-    return false;
+    // Filter items when filter link is clicked.
+    $('#filters a').click(function () {
+     var selector = $(this).attr('data-filter');
+     $container.isotope({filter: selector});
+     $(this).removeClass('active').addClass('active').siblings().removeClass('active all');
+     return false;
+     });
   });
 
   /* ---------------------------------------------------------------------------