desandro/masonry — Issue #139: Masonry - Auto widths
Author: disenolopez
Created: 2011-10-25 11:13:20+00:00
State: open

Hi,

Thanks for your great work on masonry.

I'm working on a wordpress website that uses the masonry script.

http://creativecollab.net/py/

(If you go there now masonry script is disabled)

Currently, it has fixed widths. I want the widths to be inherited from the image. So, I'm not limited to any single size for a width.

This is the code I edited. My main changes were to make "singleMode: false" and "columnWidth: auto" - the columnWidth: auto seems to break masonry js file, as well as other js files.

I have made all correct css edits (and site looks fine without masonry script).

The theme currently uses v1.3.2 of your script.

Any help you can provide would be greatly appreciated.

- -

if(jQuery().masonry) {

// cache masonry wrap
var $wall = jQuery('#masonry');

$wall.masonry({
columnWidth: auto,
animate: true,
animationOptions: {
duration: 500,
easing: 'easeInOutCirc',
queue: false
} ,
itemSelector: '.hentry'
}, function() {
jQuery('#load-more-link').fadeIn(200);
});

// cache masonry wrap
var $port = jQuery('#masonry-portfolio');

$port.masonry({
singleMode: false,
animate: true,
animationOptions: {
duration: 500,
easing: 'easeInOutCirc',
queue: false
} ,
itemSelector: '.hentry'
});

}

- -

jQuery Masonry version 1.3.2

(function(e){var n=e.event,o;n.special.smartresize={setup:function(){e(this).bind("resize",n.special.smartresize.handler)},teardown:function(){e(this).unbind("resize",n.special.smartresize.handler)},handler:function(j,l){var g=this,d=arguments;j.type="smartresize";o&&clearTimeout(o);o=setTimeout(function(){jQuery.event.handle.apply(g,d)},l==="execAsap"?0:100)}};e.fn.smartresize=function(j){return j?this.bind("smartresize",j):this.trigger("smartresize",["execAsap"])};e.fn.masonry=function(j,l){var g=
{getBricks:function(d,b,a){var c=a.itemSelector===undefined;b.$bricks=a.appendedContent===undefined?c?d.children():d.find(a.itemSelector):c?a.appendedContent:a.appendedContent.filter(a.itemSelector)},placeBrick:function(d,b,a,c,h){b=Math.min.apply(Math,a);for(var i=b+d.outerHeight(true),f=a.length,k=f,m=c.colCount+1-f;f--;)if(a[f]==b)k=f;d.applyStyle({left:c.colW*k+c.posLeft,top:b},e.extend(true,{},h.animationOptions));for(f=0;f