Is it possible to have multiple isotope grids with different styles?
I set up an isotope grid with 2 pictures a row. On a different page I would like to have the grid but with 3 pictures a row.
Now I’m a little confused on how to change the style on a second grid. Do I have to make another copy of the js code and change the class names?
In my js file:
// Active isotope with jQuery code:
$('.main-iso').isotope({
itemSelector: '.iso-item',
layoutMode: 'masonry',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer'
}
});
// Isotope click function
$('.iso-nav ul li').click(function(){
$('.iso-nav ul li').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$('.main-iso').isotope({
filter: selector
});
return false;
});
So main-iso will become main-iso2, iso-nav will become iso-nav2, iso-item will become iso-item2, grid-sizer will become grid-sizer2, gutter-sizer will become gutter-sizer2.
Then duplicate and rename the isotope classes in the designer respectively.