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

This commit is contained in:
George Cushen 2017-01-02 04:04:25 +00:00
commit 794cbd5c4e
2 changed files with 14 additions and 12 deletions

View file

@ -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>

View file

@ -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;
});
});
/* ---------------------------------------------------------------------------