Multiple Isotope Galleries

Hello!

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;
});

Please try to format your code in your posts. Poorly formatted questions are difficult to understand.

To format code, select each code block and click the (Preformatted text) button.

Screenshot_2018-02-01_100238

I have done this for your post this time. Next time it won’t be free.

1 Like

Usually this will work just fine.

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.

Let us know how it goes.

1 Like

Thank you for your reply! It worked :slight_smile:
Have a good day!

Thank you for your reply! Of course it worked! :slight_smile:

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.