I'm using jQuery Isotope on my site to load a wall of images. What I have works fine but I want to add a few extra things to it but I can't find anything on their site to do it...
When the browser window resizes I want it to suffle as it reorders the images.
Can this be done?
this is what I have so far:
(function($) {
$(document).ready(function() {
var $container = $('#isotope-container');
$container.isotope({
itemSelector: '.isotope-element',
sortBy : 'random' // THIS IS NOT WORKING TO SORT
});
var $optionSets = $('#isotope-options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
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 );
}
return false;
});
$('.isotope-element img').each(function(){
var $this = $(this);
setTimeout(function(){
$this.fadeIn(Math.floor(Math.random()*1500));
}, Math.floor(Math.random()*1500));
}
);
});
})(jQuery);
Any help with this will be very much appreciated.
Thanks C
Sorry, I looked into this a little more and actually tested it this time :) Try this:
$(window).resize(function() {
$container.isotope( 'shuffle', function() {});
});