I am in the process of building a photoblog which utilises the brilliant Isotope plugin by David DeSandro but I am curently having some difficulty getting the plugin to work as intended within a responsive / fluid grid.
www.lewismalpas.co.uk/tumblr (Demo)
Each image is wrapped within a div (.item) which has an explicit width of 25%, as the images are flexible this in theory should allow four images to be displayed inline, however at the moment only two are being displayed and I cannot seem to figure out the issue.
<script type="text/javascript">
$(document).ready(function(){
//scroll to top of page
$("a.top").click(function () {
$("body,html").animate({scrollTop: 0}, 800);
return false;
});
//Isotope settings
var $container = $('.images')
$container.imagesLoaded( function(){
$container.isotope({
resizable: false, // disable normal resizing
masonry: { columnWidth: $container.width() / 4 }
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
masonry: { columnWidth: $container.width() / 4 }
});
});
});
//layout & search options
$(".header #layout").hide();
$(".header a.layout").click(function() {
$(".header #layout").fadeIn();
$(".header a.fullscreen").click(function() {
$("a.layout-option").removeClass("selected");
$(this).addClass("selected");
$("#container").animate({width:"99%"}, function() {
$(".images").isotope('reLayout');
});
});
$(".header a.grid").click(function() {
$("a.layout-option").removeClass("selected");
$(this).addClass("selected");
$("#container").animate({width:"80%"}, 800);
$('#images').isotope({itemSelector:'.item',layoutMode:'masonry'});
});
$(".header a.linear").click(function() {
$("a.layout-option").removeClass("selected");
$(this).addClass("selected");
$("#container").animate({width:"80%"}, 800);
$('#images').isotope({itemSelector:'.item',layoutMode:'straightDown'});
});
});
$(".header #search").hide();
$(".header a.search").click(function() {
$(".header #search").fadeIn();
});
}); //end doc ready
</script>