From de33e1fb6dac4f19bf1e532c99ad6c4df5333b13 Mon Sep 17 00:00:00 2001 From: Lorenzo Date: Wed, 26 Sep 2018 09:34:59 +0000 Subject: [PATCH] Added maxRows option. Examples webpage is now prettier --- README.md | 5 +- examples/example_advanced.php | 2 +- examples/example_basic.php | 2 +- examples/example_divs.php | 2 +- examples/example_high_resolution.php | 2 +- examples/example_margins.php | 2 +- examples/example_maxrowheightpolicy.php | 2 +- examples/index.php | 91 ++++++++++--------- examples/res/common.php | 5 +- examples/res/css/main.css | 113 ++++++++++++++---------- examples/res/pattern.php | 9 +- examples/res/pattern_example.php | 8 +- jquery.mosaic.css | 4 +- jquery.mosaic.js | 19 +++- jquery.mosaic.min.css | 2 +- jquery.mosaic.min.js | 2 +- package.json | 4 +- 17 files changed, 161 insertions(+), 113 deletions(-) mode change 100755 => 100644 jquery.mosaic.min.css mode change 100644 => 100755 package.json diff --git a/README.md b/README.md index 0e67fa4..92a0026 100755 --- a/README.md +++ b/README.md @@ -6,6 +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** 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. @@ -19,7 +20,7 @@ Works wonderfully with images by creating a visually ordered and pleasant mosaic * Minified versions are generated using uglifyjs (https://github.com/mishoo/UglifyJS) and cleancss (https://github.com/jakubpawlowicz/clean-css) with the options below, but feel free to use your own solution. ``` uglifyjs jquery.mosaic.js -c -m -o jquery.mosaic.min.js -cleancss jquery.mosaic.css -e --s0 -o jquery.mosaic.min.css +cleancss -o jquery.mosaic.min.css jquery.mosaic.css ``` Here's a bonus working site using jQuery mosaic: https://litmind.com @@ -28,4 +29,4 @@ Here's a bonus working site using jQuery mosaic: https://litmind.com jQuery Mosaic is released under the MIT License, meaning you can do with it whatever you want, even for commercial and obscure purposes. A credit somewhere would be appreciated, though! ### Please -Please don't use jQuery Mosaic to show photos of animal abuse. Seriously. +Please don't use jQuery Mosaic to show photos of animal abuse. Seriously. \ No newline at end of file diff --git a/examples/example_advanced.php b/examples/example_advanced.php index 91ffef4..8506fce 100755 --- a/examples/example_advanced.php +++ b/examples/example_advanced.php @@ -1,4 +1,4 @@ -\n". - "
now with floating points!
\n". + "
limited
rows
edition!
\n". "$items". "\n". "\n". @@ -37,7 +37,7 @@ // Build how to use $content .= " -
+

Key features

    @@ -46,14 +46,18 @@
  • Create mosaics of images or divs containing whatever your want
  • Automatically loads high resolution images for retina glory
-
+
-
+

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
    Added the ability to pass parameters as html data-* attributes. Solved floating point width bug for compatibility with jQuery versions < 3. Thanks to @BenTalagan @@ -67,11 +71,11 @@ New outerMargin and innerGap parameters.
-
+
-
+

Basic usage

    @@ -80,7 +84,7 @@
  • Include the jQuery library and the jquery.mosaic.js + jquery.mosaic.css files from the jQuery Mosaic download in your head section. -
    ".formatHtml(" + ".formatHtml(" ... @@ -91,11 +95,11 @@ ... - ")."
    + ")."
  • Create a DIV with an id and place your contents inside. Each DIV, A or IMG you place there will be considered as a piece of the mosaic. -
    ".formatHtml(" + ".formatHtml("
    @@ -103,25 +107,25 @@ ...
    - ")."
    + ")."
  • Build the mosaic by running the plugin in your div -
    ".formatHtml(" + ".formatHtml(" - ")."
    + ")."
  • That's it! See the examples and their source code to learn more.
-
+
-
+

Options

You can optionally specify the following options when calling the plugin to customize the mosaic:

@@ -158,6 +162,11 @@
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.
    @@ -180,7 +189,7 @@

    • For example:

    -
    ".formatHtml(" + ".formatHtml("
    @@ -188,8 +197,8 @@ ...
    - ")."
    -
    ".formatHtml(" + ")." + ".formatHtml(" $('#myMosaic').Mosaic({ maxRowHeight: 800, refitOnResize: true, @@ -199,18 +208,18 @@ highResImagesWidthThreshold: 850, responsiveWidthThreshold: 500 }); - ")."
    -
    + ")." +
    -
    +

    Advanced usage

    • Instead of passing options in the Javascript plugin call, you can pass them right into the HTML element by adding data-* attributes -
      ".formatHtml(" + ".formatHtml("
      @@ -218,14 +227,14 @@ ...
      - ")."
      -
      ".formatHtml(" + ")." + ".formatHtml(" $('#myMosaic').Mosaic(); - ")."
      + ")."
    • You can specify the aspect ratio of each mosaic piece by adding the data-aspect-ratio property on each element instead of the height and width -
      ".formatHtml(" + ".formatHtml("
      @@ -233,11 +242,11 @@ ...
      - ")."
      + ")."
    • You can specify a high resolution version of the image by adding the data-high-res-image-src property on each element. It will only be loaded and used when needed -
      ".formatHtml(" + ".formatHtml("
      @@ -245,11 +254,11 @@ ...
      - ")."
      + ")."
    • You can use DIVs instead of IMGs for the mosaic. They will be resized to the proper width and height, and their contents will be left untouched, like in this example -
      ".formatHtml(" + ".formatHtml("
      My content
      My content
      @@ -257,11 +266,11 @@
      My content
      ...
      - ")."
      + ")."
    • You can set background images to DIVs for more interesting creative options, add the provided item CSS class to each mosaic element to do so, or use your own CSS -
      ".formatHtml(" + ".formatHtml("
      My content
      My content
      @@ -269,11 +278,11 @@
      My content
      ...
      - ")."
      + ")."
    • When using background images on DIVs, you can still specify a high resolution background image by adding the high-res-background-image-url property -
      ".formatHtml(" + ".formatHtml("
      My content
      My content
      @@ -281,11 +290,11 @@
      My content
      ...
      - ")."
      + ")."
    • Using Anchors instead of DIVs, background images, and an overlay you can create a neat interactive mosaic. -
      ".formatHtml(" + ".formatHtml("
      @@ -307,10 +316,10 @@
      ..
      - ")."
      + ")."
    -
    +
    "; @@ -355,7 +364,7 @@ ] ]; - $content .= "