I'm using LightGallery to showcase my portfolio and isotope to filter the categories. As my images are in high quality I'm trying to use ImageLoaded but not able to achieve, still learning jQuery. I want the ImageLoaded to load the images in the background while a preloader(css or gif) is displayed and when its done loading give an entrance to the image like a zoom-in. My Codepen
$(document).ready(function() {
var $gallery = $('#gallery');
var $boxes = $('.revGallery-anchor');
$boxes.hide();
$gallery.imagesLoaded( function() {
$boxes.fadeIn();
$gallery.isotope({
// options
sortBy : 'original-order',
layoutMode: 'fitRows',
itemSelector: '.revGallery-anchor',
stagger: 30,
masonry: {
columnWidth: 200
}
});
});
$('button').on( 'click', function() {
var filterValue = $(this).attr('data-filter');
$('#gallery').isotope({ filter: filterValue });
$gallery.data('lightGallery').destroy(true);
$gallery.lightGallery({
selector: filterValue.replace('*','')
});
});
});
This is the code I'm trying to work with. Its not yet complete, but I'm stuck and don't know the next step. Also its not animating.
Please Help, Thank you.