Reputation: 103
I'm working with Isotope to create a responsive gallery on http://samsnow.alwaysdata.net/galerie. I looked up on stackoverflow how other people did that and I made my own piece of code but I need some help here please.
jQuery(document).ready(function($){
var $container = jQuery('#containerGalerie');
var columns = 4,
setColumns = function() {
screen = jQuery(window).width();
if(screen>1630){
columns = 5;
}
else if(screen>1280){
columns = 4;
}
else if(screen>710){
columns = 3;
}
else if(screen>345){
columns = 2;
}
else{
columns = 1;
};
largeur=100/columns - 0.5;
jQuery('.element').css('width', getLargeur);
function getLargeur(){
return largeur +'%';
}
};
setColumns();
jQuery(window).smartresize(function(){
setColumns();
$container.isotope({
itemSelector : '.element',
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / columns}
});
}).smartresize();
$container.imagesLoaded( function(){
jQuery(window).smartresize();
});
var $optionSets = jQuery('.option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = jQuery(this);
// don't proceed if already selected
/*
if ( $this.parent().hasClass('active') ) {
return false;
}*/
var $optionSet = $this.parents('.option-set');
$optionSet.parent().find('.active').removeClass('active');
$this.parent().addClass('active');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options );
} else {
// otherwise, apply new options
$container.isotope( options );
}
jQuery(".isotope-item a").attr("rel", "visible");
jQuery(".isotope-hidden a").attr("rel", "nonvisible");
jQuery(window).smartresize();
return false;
});
});
Since I use % width for my images and a variable number of columns I've a bug on the filter. After a click on a filter the most of the gaps between images disappear. This is fixed with another click on the filter, or even a sligth window resizing.
I don't understand what's happening. Does someone could help me please?
edit : Here is the Fiddle : http://jsfiddle.net/SamSnow/8Am8N/1/
Upvotes: 0
Views: 968
Reputation: 103
I found where the problem is : it's the transition from a filter with a lot of images (my page has a scrollbar) to another one with few images(=no scrollbar). When the scrollbar appear/disappear there is no refresh! Unfortunately I have'nt managed to fix it.
I rely on your help!
Upvotes: 1