diff --git a/README.md b/README.md
index 92a0026..9be5e77 100755
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ A jQuery plugin by Tin.cat that builds responsive mosaics of images or any other
Works wonderfully with images by creating a visually ordered and pleasant mosaic (much like mosaics on Flickr, 500px and Google+) without gaps between elements, but at the same time respecting aspect ratios. Reacts to window resizes and adapts responsively to any screen size.
### Version history
-* **v0.15.2** Added maxRows option for those situations where you need fine control on the maximum number of rows of your mosaic.
+* **v0.15.2** Added maxRows option for those situations where you need fine control on the maximum number of rows of your mosaic. Added advanced options maxItemsToShowWhenResponsiveThresholdSurpassed and showTailWhenNotEnoughItemsForEvenOneRow for even more fine-grained control of your mosaic.
* **v0.15** Added the ability to pass parameters as html data-* attributes. Solved floating point width bug for compatibility with jQuery versions < 3. Thanks to [@BenTalagan](https://github.com/BenTalagan).
* **v0.14** New maxRowHeightPolicy 'tail' that renders items respecting their aspect ratio without surpassing the specified maxRowHeight, resulting in a last row that might not completely fit the screen horizontally, suggested by [@borekl](https://github.com/borekl) and [@nzjrs](https://github.com/nzjrs).
* **v0.13** New outerMargin and innerGap parameters.
diff --git a/examples/index.php b/examples/index.php
index e6ad19c..3a69d83 100755
--- a/examples/index.php
+++ b/examples/index.php
@@ -55,8 +55,8 @@
Version history
-
- v0.152
- Added maxRows option for those situations where you need fine control on the maximum number of rows of your mosaic.
+ v0.15.2
+ Added maxRows option for those situations where you need fine control on the maximum number of rows of your mosaic. Added advanced options maxItemsToShowWhenResponsiveThresholdSurpassed and showTailWhenNotEnoughItemsForEvenOneRow for even more fine-grained control of your mosaic.
-
v0.15
@@ -64,11 +64,11 @@
-
v0.14
- New maxRowHeightPolicy 'tail' that renders items respecting their aspect ratio without surpassing the specified maxRowHeight, resulting in a last row that might not completely fit the screen horizontally, suggested by @borekl and @nzjrs
+ New maxRowHeightPolicy 'tail' that renders items respecting their aspect ratio without surpassing the specified maxRowHeight, resulting in a last row that might not completely fit the screen horizontally, suggested by @borekl and @nzjrs
-
v0.13
- New outerMargin and innerGap parameters.
+ New outerMargin and innerGap parameters.
@@ -131,26 +131,31 @@
You can optionally specify the following options when calling the plugin to customize the mosaic:
-
+
maxRowHeight
The maximum desired height of rows
400
-
+
refitOnResize
Whether to rebuild the mosaic when the window is resized or not
true
-
+
refitOnResizeDelay
Milliseconds to wait after a resize event to refit the mosaic. Useful when creating huge mosaics that can take some CPU time on the user's browser. Leave it to false to refit the mosaic in realtime
false
-
+
defaultAspectRatio
The aspect ratio to use when none has been specified, or can't be calculated
1
-
+
maxRowHeightPolicy
Sometimes some of the remaining items cannot be fitted on a row without surpassing the maxRowHeight. For those cases, choose one of the available settings for maxRowHeightPolicy:
@@ -163,30 +168,47 @@
skip
-
+
maxRows
In some scenarios you might need fine control about the maximum number of rows of the mosaic. If specified, the mosaic won't have more than this number of rows. If responsiveWidthThreshold is specified, maxRows are not considered when the threshold has been reached
false
-
+
highResImagesWidthThreshold
The item width on which to start using the the provided high resolution image instead of the normal one. High resolution images are specified via the \"data-high-res-image-src\" or \"data-high-res-background-image-url\" html element properties of each item.
350
-
+
outerMargin
A margin size in pixels for the outher edge of the whole mosaic.
0
-
+
innerGap
A gap size in pixels to leave a space between elements.
0
-
+
responsiveWidthThreshold
The minimum width for which to keep building the mosaic. If specified, when the width is less than this, the mosaic building logic is not applied, and one item per row is always shown. This might help you avoid resulting item sizes that are too small and might break complex html/css inside them, specially when aiming for great responsive mosaics. When using this, you can also specify a \"data-only-force-height-when-necessary\" html item property with value \"1\" in the specific items you don't want to apply forced aspect ratios when this minimum width threshold is reached.
false
+ -
+
+
maxItemsToShowWhenResponsiveThresholdSurpassed
+ If set (and also responsiveWidthThreshold is set), only this amount of items will be shown when the responsiveWidthThreshold is met.
+ false
+
+ -
+
+
showTailWhenNotEnoughItemsForEvenOneRow
+ If this is set to true, when there are not enough items to fill even a single row, they will be shown anyway even if they do not complete the row horizontally. If left to false, no mosaic will be shown in such occasions.
+ false
+
For example:
".formatHtml("
diff --git a/jquery.mosaic.css b/jquery.mosaic.css
index 67581e2..b9b3d7a 100755
--- a/jquery.mosaic.css
+++ b/jquery.mosaic.css
@@ -1,5 +1,5 @@
/*
- jQuery Mosaic v0.152
+ jQuery Mosaic v0.15.2
https://github.com/tin-cat/jquery-mosaic
*/
diff --git a/jquery.mosaic.js b/jquery.mosaic.js
index bd95b45..df3d157 100755
--- a/jquery.mosaic.js
+++ b/jquery.mosaic.js
@@ -1,5 +1,5 @@
/*
- jQuery Mosaic v0.152
+ jQuery Mosaic v0.15.2
https://github.com/tin-cat/jquery-mosaic
A jquery plugin by Tin.cat to build beautifully arranged and responsive mosaics of html elements maintaining their original aspect ratio. Works wonderfully with images by creating a visually ordered and pleasant mosaic (much like mosaics on Flickr, 500px and Google+) without gaps between elements, but at the same time respecting aspect ratios. Reacts to window resizes and adapts responsively to any screen size. See it working on https://skinography.net
*/
@@ -204,7 +204,14 @@
if (base.isBelowResponsiveWidthThreshold()) {
- base.getItems().each(function() {
+ var items = base.getItems();
+
+ if (o.maxItemsToShowWhenResponsiveThresholdSurpassed) {
+ $(items).slice(o.maxItemsToShowWhenResponsiveThresholdSurpassed).remove();
+ items = $(items).slice(0, o.maxItemsToShowWhenResponsiveThresholdSurpassed);
+ }
+
+ items.each(function() {
var height = base.getItemHeightForGivenWidth(this, baseWidth);
$(this).width(baseWidth)
@@ -258,8 +265,11 @@
}
// If maxRowHeight has not been met at any point (might happen when specifying short maxRowHeights)
- if (!isAnyFitted)
+ if (!isAnyFitted) {
+ if (o.showTailWhenNotEnoughItemsForEvenOneRow)
+ o.maxRowHeightPolicy = 'tail';
base.fitItems(base.getItems());
+ }
}
base.fitItems = function(items) {
@@ -314,7 +324,9 @@
highResImagesWidthThreshold: 350, // The item width on which to start using the the provided high resolution image instead of the normal one. High resolution images are specified via the "data-high-res-image-src" or "data-high-res-background-image-url" html element properties of each item.
outerMargin: 0, // A margin size in pixels for the outher edge of the whole mosaic
innerGap: 0, // A gap size in pixels to leave a space between elements
- responsiveWidthThreshold: false // The minimum width for which to keep building the mosaic. If specified, when the width is less than this, the mosaic building logic is not applied, and one item per row is always shown. This might help you avoid resulting item sizes that are too small and might break complex html/css inside them, specially when aiming for great responsive mosaics.
+ responsiveWidthThreshold: false, // The minimum width for which to keep building the mosaic. If specified, when the width is less than this, the mosaic building logic is not applied, and one item per row is always shown. This might help you avoid resulting item sizes that are too small and might break complex html/css inside them, specially when aiming for great responsive mosaics.
+ maxItemsToShowWhenResponsiveThresholdSurpassed: false, // If set (and also responsiveWidthThreshold is set), only this amount of items will be shown when the responsiveWidthThreshold is met
+ showTailWhenNotEnoughItemsForEvenOneRow: false, // If this is set to true, when there are not enough items to fill even a single row, they will be shown anyway even if they do not complete the row horizontally. If left to false, no mosaic will be shown in such occasions.
};
$.fn.Mosaic = function(options, params) {
diff --git a/jquery.mosaic.min.js b/jquery.mosaic.min.js
index 2f905c0..82ec093 100644
--- a/jquery.mosaic.min.js
+++ b/jquery.mosaic.min.js
@@ -1 +1 @@
-!function($){$.Mosaic=function(t,e){var n,o,h=this;h.el=t,h.$el=$(t),h.$el.data("Mosaic",h);var i=!1;h.init=function(){h.options=n=$.extend({},$.Mosaic.defaults,h.$el.data(),e),$(h.el).addClass("jQueryMosaic"),n.outerMargin&&$(h.el).css("padding",n.outerMargin),n.innerGap&&$(h.el).css("margin-bottom",-1*n.innerGap),h.getItems().each(function(t,e){$(e).attr("width")&&$(e).width($(e).attr("width")),$(e).attr("height")&&$(e).height($(e).attr("height"))}),h.fit(),n.refitOnResize&&$(window).on("resize",null,null,function(){n.refitOnResizeDelay?(i&&clearTimeout(i),i=setTimeout(function(){h.fit()},n.refitOnResizeDelay)):h.fit()})},h.getItems=function(){return $("> div:not([data-no-mosaic=true]), > a:not([data-no-mosaic=true]), > img:not([data-no-mosaic=true])",h.el)},h.getItemAtIndex=function(t){return!!h.getItems()[t]&&$(h.getItems()[t])},h.getItemsSubset=function(t,e){var i=h.getItems();return e||(e=i.length-t),!(t>i.length)&&(t+e>i.length&&(e=i.length-t),i.slice(t,t+e))},h.isLastItemsSubset=function(t,e){var i=h.getItems();return t>i.length||t+e>i.length},h.getItemWidth=function(t){return $(t).outerWidth()?$(t).outerWidth():$(t).attr("width")?$(t).attr("width"):void 0},h.getItemHeight=function(t){return $(t).outerHeight()?$(t).outerHeight():$(t).attr("height")?$(t).attr("height"):void 0},h.getItemAspectRatio=function(t){if($(t).data("aspect-ratio"))return $(t).data("aspect-ratio");if(h.getItemWidth(t)&&h.getItemHeight(t)){var e=h.getItemWidth(t)/h.getItemHeight(t);return $(t).data("aspect-ratio",e),e}return n.defaultAspectRatio},h.getItemWidthForGivenHeight=function(t,e){return e*h.getItemAspectRatio(t)},h.getItemHeightForGivenWidth=function(t,e){return e/h.getItemAspectRatio(t)},h.setItemSizeByGivenHeight=function(t,e,i){var a=Math.floor(h.getItemWidthForGivenHeight(t,e));if($(t).width(a+"px"),i?$(t).height("auto"):$(t).height(Math.floor(e)),n.highResImagesWidthThreshold)if(a>n.highResImagesWidthThreshold){var s=$(t).data("high-res-background-image-url");s&&!$(t).data("low-res-background-image-url")&&($(t).data("low-res-background-image-url",$(t).css("background-image")),$(t).css("background-image",'url("'+s+'")'),$(t).addClass("highRes")),$("img",t).add(t).each(function(t,e){var i=$(e).data("high-res-image-src");i&&!$(e).data("low-res-image-src")&&($(e).data("low-res-image-src",$(e).attr("src")),$(e).attr("src",i),$(e).addClass("highRes"))})}else{var r=$(t).data("low-res-background-image-url");r&&($(t).css("background-image",r),$(t).data("low-res-background-image-url",!1),$(t).removeClass("highRes")),$("img",t).add(t).each(function(t,e){var i=$(e).data("low-res-image-src");i&&($(e).attr("src",i),$(e).data("low-res-image-src",!1),$(e).removeClass("highRes"))})}return a},h.calculateHeightToFit=function(t){var e=0;return t.each(function(){e+=parseFloat(h.getItemAspectRatio(this))}),(o-n.innerGap*(t.length-1))/e},h.retrieveBaseWidth=function(){var t=parseFloat($(h.el).width());o=$.isNumeric(t)?t:0},h.isBelowResponsiveWidthThreshold=function(){return n.responsiveWidthThreshold&&on.maxRowHeight)e++;else{if(h.fitItems(t),i+=e,e=1,a=!0,!h.isBelowResponsiveWidthThreshold()&&n.maxRows&&s==n.maxRows)return void h.getItemsSubset(i).each(function(){$(this).hide()});s++}}a||h.fitItems(h.getItems())}},h.fitItems=function(e){var i=!1,a=h.calculateHeightToFit(e);if(a>n.maxRowHeight)switch(n.maxRowHeightPolicy){case"skip":return void e.each(function(){$(this).hide()});case"crop":a=n.maxRowHeight;break;case"oversize":i=!0;break;case"tail":a=n.maxRowHeight;var t=!0}e.each(function(){$(this).show()});var s=0;if(e.each(function(t){s+=h.setItemSizeByGivenHeight(this,a,i&&$(this).data("only-force-height-when-necessary")),n.innerGap&&($(this).css("margin-right",t div:not([data-no-mosaic=true]), > a:not([data-no-mosaic=true]), > img:not([data-no-mosaic=true])",h.el)},h.getItemAtIndex=function(e){return!!h.getItems()[e]&&$(h.getItems()[e])},h.getItemsSubset=function(e,t){var i=h.getItems();return t||(t=i.length-e),!(e>i.length)&&(e+t>i.length&&(t=i.length-e),i.slice(e,e+t))},h.isLastItemsSubset=function(e,t){var i=h.getItems();return e>i.length||e+t>i.length},h.getItemWidth=function(e){return $(e).outerWidth()?$(e).outerWidth():$(e).attr("width")?$(e).attr("width"):void 0},h.getItemHeight=function(e){return $(e).outerHeight()?$(e).outerHeight():$(e).attr("height")?$(e).attr("height"):void 0},h.getItemAspectRatio=function(e){if($(e).data("aspect-ratio"))return $(e).data("aspect-ratio");if(h.getItemWidth(e)&&h.getItemHeight(e)){var t=h.getItemWidth(e)/h.getItemHeight(e);return $(e).data("aspect-ratio",t),t}return r.defaultAspectRatio},h.getItemWidthForGivenHeight=function(e,t){return t*h.getItemAspectRatio(e)},h.getItemHeightForGivenWidth=function(e,t){return t/h.getItemAspectRatio(e)},h.setItemSizeByGivenHeight=function(e,t,i){var a=Math.floor(h.getItemWidthForGivenHeight(e,t));if($(e).width(a+"px"),i?$(e).height("auto"):$(e).height(Math.floor(t)),r.highResImagesWidthThreshold)if(a>r.highResImagesWidthThreshold){var s=$(e).data("high-res-background-image-url");s&&!$(e).data("low-res-background-image-url")&&($(e).data("low-res-background-image-url",$(e).css("background-image")),$(e).css("background-image",'url("'+s+'")'),$(e).addClass("highRes")),$("img",e).add(e).each(function(e,t){var i=$(t).data("high-res-image-src");i&&!$(t).data("low-res-image-src")&&($(t).data("low-res-image-src",$(t).attr("src")),$(t).attr("src",i),$(t).addClass("highRes"))})}else{var n=$(e).data("low-res-background-image-url");n&&($(e).css("background-image",n),$(e).data("low-res-background-image-url",!1),$(e).removeClass("highRes")),$("img",e).add(e).each(function(e,t){var i=$(t).data("low-res-image-src");i&&($(t).attr("src",i),$(t).data("low-res-image-src",!1),$(t).removeClass("highRes"))})}return a},h.calculateHeightToFit=function(e){var t=0;return e.each(function(){t+=parseFloat(h.getItemAspectRatio(this))}),(o-r.innerGap*(e.length-1))/t},h.retrieveBaseWidth=function(){var e=parseFloat($(h.el).width());o=$.isNumeric(e)?e:0},h.isBelowResponsiveWidthThreshold=function(){return r.responsiveWidthThreshold&&or.maxRowHeight)t++;else{if(h.fitItems(e),i+=t,t=1,a=!0,!h.isBelowResponsiveWidthThreshold()&&r.maxRows&&s==r.maxRows)return void h.getItemsSubset(i).each(function(){$(this).hide()});s++}}a||(r.showTailWhenNotEnoughItemsForEvenOneRow&&(r.maxRowHeightPolicy="tail"),h.fitItems(h.getItems()))},h.fitItems=function(t){var i=!1,a=h.calculateHeightToFit(t);if(a>r.maxRowHeight)switch(r.maxRowHeightPolicy){case"skip":return void t.each(function(){$(this).hide()});case"crop":a=r.maxRowHeight;break;case"oversize":i=!0;break;case"tail":a=r.maxRowHeight;var e=!0}t.each(function(){$(this).show()});var s=0;if(t.each(function(e){s+=h.setItemSizeByGivenHeight(this,a,i&&$(this).data("only-force-height-when-necessary")),r.innerGap&&($(this).css("margin-right",e