Isotope

The Isotope plugin enables you to create sortable, card and masonry layouts. The Isotope plugin is useful for things like portfolios, and blog index listsings.

The size of Isotope card layout items can be controlled, by adding the class isotope-width- to the isotope-item class, and affixing the corresponding number from the grid system. For example isotope-width-8 will give you an 8 column wide area, the same width as column-8 in the grid system.

The example above uses a very simple HTML structure, consisting of an outer wrapper div with the class isotope-items nested inside the wrapper are further divs with the class of isotope-item which wrap an image.

<div class="isotope-items">

	<div class="isotope-item isotope-width-4 tech city">
		<img src="img/general/isotope-1.jpg" alt="">
	</div>

	<div class="isotope-item isotope-width-4 travel">
		<img src="img/general/isotope-2.jpg" alt="">
	</div>

	<div class="isotope-item isotope-width-4 nature">
		<img src="img/general/isotope-3.jpg" alt="">
	</div>

	<div class="isotope-item isotope-width-4 tech">
		<img src="img/general/isotope-4.jpg" alt="">
	</div>

	<div class="isotope-item isotope-width-4 tech city">
		<img src="img/general/isotope-5.jpg" alt="">
	</div>

	<div class="isotope-item isotope-width-4 nature">
		<img src="img/general/isotope-6.jpg" alt="">
	</div>

</div>

Masonry layout

In addition to using the standard card style implementation above, you can also use a masonry style layout. The masonry layout lets you use images of differing dimensions and will slot them all together in the best configuration.

The size of Isotope masonry layout items can be controlled on a per item basis, by adding the class isotope-width- to the isotope-item class, and affixing the corresponding number from the grid system. For example isotope-width-8 will give you an 8 column wide area, the same width as column-8 in the grid system.

Filtering

The Ensemble Isotope plugin allows you to add filter controls to display relevant results, removing results that do not fit the criteria, and animating them in to place.

The Isotope filter buttons are contained in a div with the class isotope-filters-buttons and each button contains the class isotope-filters-button. The buttons also contain a data attribute data-filter that contains a class name for example data-filter=".tech" the same class can then be given to an isotope-item for example isotope-item tech this is what tells Isotope to show a result when the class matches the data-attribute.

<div class="isotope-filters-buttons">
	<div class="isotope-filters-button isotope-filters-button__selected" data-filter="*">
	show all
	</div>
	<div class="isotope-filters-button" data-filter=".tech">Tech</div>
	<div class="isotope-filters-button" data-filter=".travel">Travel</div>
	<div class="isotope-filters-button" data-filter=".nature">Nature</div>
	<div class="isotope-filters-button" data-filter=".city">City Life</div>
</div>

Javascript

The javascript for the Ensemble Isotope implementation, can be found in the script.js directory, under the heading Isotope. You can find more information about Isotope on the Mettafizzy website. Isotope is used in Ensemble under a commercial license.

$(window).load(function() {
	var $container = $('.isotope-items');
	$container.isotope({
		filter: '*',
		transitionDuration: '0.6s',
		percentPosition: true,
	});

	$('.isotope-filters-button').click(function() {
		$('.isotope-filters-button').removeClass('isotope-filters-button__selected');
		$(this).addClass('isotope-filters-button__selected');

		var selector = $(this).attr('data-filter');
		$container.isotope({
			filter: selector,

		});
		return false;
	});
});