Currently, I am working on creating a gallery page for my website using the Isotop filtering plugin. To view the live gallery, you can visit: carroofies.com/gallery
The main issue I am encountering is with the initial load of the page, where the images overlap each other. This problem persists on both mobile and desktop versions of the site.
One solution I attempted was setting a fixed height for the images, which did resolve the issue but compromised the masonry layout of the gallery. Any suggestions on how to improve this? Also, it's possible that the initialization of the Isotope grid is not executing correctly on page load.
Below is the JavaScript code for the gallery:
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'masonry' //options: https://isotope.metafizzy.co/layout-modes.html
});
// filter functions
var filterFns = {
// // show if number is greater than 50
// numberGreaterThan50: function() {
// var number = $(this).find('.number').text();
// return parseInt( number, 10 ) > 50;
// },
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('.filters-button-group').on( 'click', 'span', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'span', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
For CSS related to the gallery elements:
/* ---- .element-item ---- */
.element-item {
/*height: 150px;*/
}
/*@media (min-width: 992px){*/
/* .filtr-item{*/
/* height: 150px;*/
/* }*/
/*}*/
/*POTENTIAL FIXES FOR OVERLAPPING IMAGES ABOVE^^^*/
/*-----------------------------------------------*/
@media (max-width: 576px){
.filtr-item {
flex: 0 0 33%;
max-width: 33%;
}
}
@media (max-width: 350px){
.filtr-item {
flex: 0 0 50%;
max-width: 50%;
}
}
.filtr-container {
margin: 0 -4px;
}
.filtr-item img{
border-radius: 5px;
cursor: pointer;
}
.filtr-item a{
transition: .5s ease !important;
}
/*image hover effect*/
@media only screen and (min-width: 600px){
.filtr-item a:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
box-shadow: 0 10px 10px rgba(0, 0, 0, .15) !important;
}
}
... (remaining CSS styles)