Currently, I am using LightGallery to showcase my portfolio and Isotope to filter the categories. Since my images are high-quality, I am attempting to utilize ImageLoaded for better performance but facing challenges due to my limited knowledge of jQuery. My goal is to have ImageLoaded load the images in the background while displaying a preloader (CSS or GIF), and upon completion of loading, give the image an entrance effect like a zoom-in. You can find my code on 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('*','')
});
});
});
I am currently struggling with this code and it's not yet complete. I seem to be stuck and uncertain about the next steps. Additionally, the code is not animating as expected.
If you have any tips or advice, please help me out. Thank you!