Setting up Isotope on this website is proving to be a bit tricky. It's supposed to handle the layout and allow me to append items to the container.
The problem lies in the fact that the images don't seem to initialize properly. Here's how I've initialized it:
$(document).ready(function(){
var $container = $('#container');
$container.isotope({
masonry: {
columnWidth: 400,
gutterWidth: 10
},
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: true
},
resizesContainer: true,
});
load_more();
});
The images aren't affected by the masonry options, and specifying "width" in the CSS causes loading issues.
The load_more function makes an ajax call and upon success, calls this function with the returned data:
function data_loaded(data) {
var newItems = "";
for (var i = 0; i < data['posts'].length; i++) {
newItems += '<div class="item" ><img class="gallery_img" src="'+data['posts'][i]['images'][0]['path']+'" /></div>';
}
/* append images*/
var $newItemsObj = $(newItems);
$('#container').isotope( 'insert', $newItemsObj );
}
The website can be found at It's safe for work, no nude images
It seems like the site needs a refresh to load properly. Perhaps the images are cached the second time around, causing the initial failure due to triggering Isotope before image loading?