jQuery Isotope — Centered and Fluid/Responsive

Question

I am asking a question about Isotope

It is a great plugin for jQuery.

I have been playing with it for a while now, but I don't know enough about javascript to combine two of the Isotope techniques, responsive Isotope and centered Isotope.

I have sucessfully used the responsive mod and it worked pretty well, except now I need to center the whole thing within a div. The centered layout mode isn't documented as well as the responsive mode, so I am having some trouble getting it to work. Basically the inscructions for the centered layout mode are :

To use this mod, copy the revised methods found in the demos’ page source.

Unfortunately, there are all sorts of javascript things going on in the view source and I don't have enough experience with javascript to pick it out and also combine it with the responsive script I already have working.

Any help would be greatly appreciated.

A site with a working example of what I need.

My site that I am experimenting with.

Works better in Firefox I think.

Emblazonment

Any help would be greatly appreciated. – Emblazonment

Thank you so much for asking this question! I have been struggling with this for the past 9 days! – Correggio

Answer 1

Here is an example provided by David DeSandro himself:

http://jsfiddle.net/desandro/P6JGY/6/

Refreshing

That's helpful, but that example is not fluid. This site is fluid: aarontolley.co.uk – Emblazonment

Answer 2

This jsfiddle will probably solve your problem: http://jsfiddle.net/schmidjon/6Z3sn/. It's a simple extension to Isotope with breakpoints:

(function ($) {
var $container = $('.example'),
    colWidth = function () {
        var w = $container.width(), 
            columnNum = 1,
            columnWidth = 0;
        if (w > 1200) {
            columnNum  = 5;
        } else if (w > 900) {
            columnNum  = 4;
        } else if (w > 600) {
            columnNum  = 3;
        } else if (w > 300) {
            columnNum  = 2;
        }
        columnWidth = Math.floor(w/columnNum);
        $container.find('.item').each(function() {
            var $item = $(this),
                multiplier_w = $item.attr('class').match(/item-w(\d)/),
                multiplier_h = $item.attr('class').match(/item-h(\d)/),
                width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
                height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
            $item.css({
                width: width,
                height: height
            });
        });
        return columnWidth;
    },
    isotope = function () {
        $container.isotope({
            resizable: false,
            itemSelector: '.item',
            masonry: {
                columnWidth: colWidth(),
                gutterWidth: 4
            }
        });
    };
    isotope();
    $(window).smartresize(isotope);
}(jQuery));

Source: Using jQuery Isotope for masonry in fluid layouts

Nervine

Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – Brythonic

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Mercurous

Answer 3

try using the transition on your css file for each of your classes on child content. it should be helpful and it can be more slowmo

.css

 -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

hope this working

Hatchment