Changing Width/Gutters?
-
09-12-2019 - |
Question
I'm trying to create a thumbnail gallery with rows of 3 items and I'm not able to control the width (192px) or the gutters (10px) of the items. Heres my code
<script>
$(function(){
var $container = $('.isosort'),
filters = {};
$container.isotope({
layoutMode : 'fitRows',
animationEngine : 'best-available',
masonry: {
columnWidth: 192,
gutterWidth: 10
}
});
// filter buttons
$('#options li ul li a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
// i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});
</script>
Solution
My understanding is that to use the masonry options, you're required to choose "masonry
" as your layoutMode
.
OTHER TIPS
I just added a possible solution to this problem at: https://stackoverflow.com/a/18199423/2676928
It's possible to extend/rewrite parts of isotope. The fitRows code is comparatively simple and I added a few lines that made it support gutters and column width settings.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow