Responsive Mosaic Photo Gallery / Grid Plugin For jQuery - mosaic.js

Responsive Mosaic Photo Gallery / Grid Plugin For jQuery - mosaic.js

mosaic.js is an easy and responsive jQuery image galery / grid plugin that dynamically arranges a group of images into a mosaic style grid while preserving the original aspect ratios. Similar to the Flick / Google plus / Masonry grid layouts.

How to use it:

1. Put the required CSS file jquery.mosaic.css in the head section of the html page.

<link href="jquery.mosaic.css" rel="stylesheet">

2. Insert a collection of images into the container as follows. The data-high-res-image-src is used to specify the path to the high resolution image when the gallery is running on the desktop.

<div id="mosaic" class="mosaic">
  <img src="1.jpg" data-high-res-image-src="high-1.jpg">
  <img src="2.jpg" data-high-res-image-src="high-2.jpg">
  <img src="3.jpg" data-high-res-image-src="high-3.jpg">
  <img src="4.jpg" data-high-res-image-src="high-4.jpg">
  <img src="5.jpg" data-high-res-image-src="high-5.jpg">
  ...
</div>

3. Put the jQuery mosaic.js script after jQuery library but before you close the body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.mosaic.js"></script>

4. Just call the plugin and you're done.

$('#mosaic').Mosaic();

5. Set the maximum desired height of rows.

$('#mosaic').Mosaic({
  maxRowHeight: 400
});

6. Define whether to rebuild the mosaic when the window is resized or not.

$('#mosaic').Mosaic({
  refitOnResize: true
});

7. Specify the aspect ratio to use when none has been specified, or can't be calculated.

$('#mosaic').Mosaic({
  defaultAspectRatio: 1
});

8. 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: "skip": Does not renders the unfitting items. "crop": caps the desired height to the specified maxRowHeight, resulting in those items not keeping their aspect ratios. "oversize": Renders the items respecting their aspect ratio but surpassing the specified maxRowHeight.

$('#mosaic').Mosaic({
  maxRowHeightPolicy: 'oversize'
});

9. The default highResImagesWidthThreshold option. When set to a width, item <div>s or <a>s or <img>s wider than this will be given a higher resolution background image (if specified on html div property data-high-res-background-image-url) or image src (if specified on html img property data-high-res-image-src).

$('#mosaic').Mosaic({
  highResImagesWidthThreshold: 350
});

10. The time in 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.

$('#mosaic').Mosaic({
  refitOnResizeDelay: false,
});

11. Specify the margin size in pixels for the outer edge of the whole mosaic

$('#mosaic').Mosaic({
  outerMargin: 0
});

12. Specify the gap size in pixels to leave a space between elements.

$('#mosaic').Mosaic({
  innerGap: 0
});

Change log:

2017-12-02

  • New maxRowHeightPolicy 'tail'

2016-12-12

  • Solved bug that actually wasn't there

2016-09-23

  • Version 0.12, now allows to specify a margin for the mosaic, and a gap size for between elements

This awesome jQuery plugin is developed by tin-cat. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 02.12.2017
  • Source