diff --git a/README.md b/README.md index 46425de..7065a11 100644 --- a/README.md +++ b/README.md @@ -29,16 +29,17 @@ Options ------- ``` javascript var defaults = { - autoResize: true, // re-partition and resize the images when the window size changes + autoResize: true, // resize the images when the window size changes background: null, // the css properties of the gallery's containing element - idealHeight: null, // ideal row height, only used for horizontal galleries, defaults to half the containing element's height - idealWidth: null, // ideal column width, only used for vertical galleries, defaults to 1/4 of the containing element's width + idealHeight: null, // ideal row height, only used for horizontal galleries, defaults to 1/4 of the container width + idealWidth: null, // ideal column width, only used for vertical galleries, defaults to 1/4 of the container width maintainOrder: true, // keeps images in their original order, setting to 'false' can create a slightly better balance between rows - orientation: 'horizontal', // 'horizontal' galleries are made of rows and scroll vertically; 'vertical' galleries are made of columns and scroll horizontally + orientation: 'horizontal', // 'horizontal' galleries are made of rows; 'vertical' galleries are made of columns; 'grid' galleries combine both padding: 5, // pixels between images - shuffleUnorderedPartitions: true, // unordered galleries tend to clump larger images at the begining, this solves that issue at a slight performance cost - viewportHeight: null, // the assumed height of the gallery, defaults to the containing element's height - viewportWidth: null // the assumed width of the gallery, defaults to the containing element's width + shuffleUnorderedPartitions: true, // unordered galleries tend to clump larger images at the beginning, this solves that issue at a slight performance cost + gridAspectRatio: 1, // the aspect ratio with which the images are going to be displayed; only used for grid galleries + widthDivisor: 4 // used to define idealHeight/idealWidth (when they aren't set) by dividing the elements container width by the given value; + // the bigger the widthDivisor value, the smaller the images get; on vertical galleries the value simply defines the number of columns }; ``` diff --git a/balancedgallery.jquery.json b/balancedgallery.jquery.json index 105ed16..f6f6414 100644 --- a/balancedgallery.jquery.json +++ b/balancedgallery.jquery.json @@ -15,5 +15,5 @@ "dependencies" : { "jquery": ">=1.5" }, -"description" : "Balanced Gallery is a jQuery plugin that evenly distributes photos across rows or columns, making the most of the space provided. Photos are scaled based on the size of the 'container' element by default, making Balanced Gallery a great choice for (responsive) websites." +"description" : "Balanced Gallery is a jQuery plugin that evenly distributes photos across rows, columns or a grid, making the most of the space provided. Photos are scaled based on the size of the 'container' element by default, making Balanced Gallery a great choice for (responsive) websites." } \ No newline at end of file diff --git a/demo_grid.html b/demo_grid.html new file mode 100644 index 0000000..6692c1a --- /dev/null +++ b/demo_grid.html @@ -0,0 +1,46 @@ + + + + Balanced Gallery Demo + + + + + + + + + + + + diff --git a/demo.html b/demo_horizontal.html similarity index 92% rename from demo.html rename to demo_horizontal.html index b51680d..8bd126f 100644 --- a/demo.html +++ b/demo_horizontal.html @@ -14,11 +14,13 @@ + + + diff --git a/demo_small_box.html b/demo_vertical.html similarity index 89% rename from demo_small_box.html rename to demo_vertical.html index 0408d83..d8f07fe 100644 --- a/demo_small_box.html +++ b/demo_vertical.html @@ -14,13 +14,13 @@ -'),r.append(i[0])):i=t(I.element),I.container=i[0];for(var o=0;o';i.append(l);for(var h=0;h")}}}function W(t){var e=I.options.padding;return(t.width()+e)/(t.height()+e)}function x(t){for(var e,n,i=t.length;i--;)n=0|Math.random()*i,e=t[i],t[i]=t[n],t[n]=e;return t}var I,L="BalancedGallery",T={autoResize:!0,background:null,idealHeight:null,idealWidth:null,maintainOrder:!0,orientation:"horizontal",padding:5,shuffleUnorderedPartitions:!0,viewportHeight:null,viewportWidth:null},O="ALL_CHILDREN_LOADED",G=null,R=10;t.fn[L]=function(e){return this.each(function(){t.data(this,"plugin_"+L)||t.data(this,"plugin_"+L,new i(this,e))})},i.prototype.recreate=function(){t(this.element).on(O,function(){I.init(),I.createGallery()}),this.reset()},i.prototype.reset=function(){var e=this.elementChildren.length;t(this.element).html(this.unadulteratedHtml),t(this.element).css(this.unadulteratedCSS),this.options=t.extend({},this.unadulteratedOptions),this.elementChildren=t(this.element).children("*");var n=0;this.elementChildren.each(function(){t(this).load(function(){++n===e&&t(I.element).trigger(O)})})},i.prototype.init=function(){null===this.options.viewportWidth&&(this.options.viewportWidth=t(this.element).width()),null===this.options.viewportHeight&&(this.options.viewportHeight=t(this.element).height()),null===this.options.idealWidth&&(this.options.idealWidth=t(this.element).width()/4),null===this.options.idealHeight&&(this.options.idealHeight=t(this.element).height()/2),null!==this.options.background&&t(this.element).css({background:this.options.background}),this.elementChildren.css({display:"inline-block",padding:0,margin:0});var e=this.options.padding+"px";t(this.element).css({fontSize:0,paddingTop:e,paddingLeft:e})},i.prototype.createGallery=function(){var t=this.options.orientation.toLowerCase();if("horizontal"===t)a();else{if("vertical"!==t)throw"BalancedGallery: Invalid Orientation.";l()}},i.prototype.fallbackToStandardSize=function(){var e=this.options.idealHeight;this.elementChildren.each(function(){t(this).height(e),t(this).width(I.idealWidth(t(this)))})}}(jQuery,window,document); \ No newline at end of file +(function(l,E,L){function p(b,f){a=this;q.push(this);this.container=l(b);this.container[0].innerHTML='
'+this.container[0].innerHTML+"
";this.wrapper=l(this.container[0].children[0]);this.elements=[];for(var d=this.wrapper[0].children,c=0;c=f){var k=(d-c*g)/2;e.css({left:k+"px",position:"absolute",maxWidth:"none",height:c+"px",width:c*g+"px"})}else g=d)c=[];else{var h=J(b,d);--c;d-=2;for(var e=[],g;0<=d;){g=[];for(var k=h[c-1][d]+1;kb&&(b=1);b=Math.round(b);f=H();b=A(f,b);f=a.options.padding;var d=0;a.resizingValue=[];for(var c=0;c'),d=l(a.wrapper[0].querySelector("div."+d)),c=0;c')}z();y(a.options.orientation)}else throw"BalancedGallery: Invalid Orientation.";}})(jQuery,window);