About

The plugin is designed to display items as a mosaic. The proportions of the elements do not change. As elements include the following: img, div, li etc.

Usage

jMosaic plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.

<script src="js/jquery.js"></script>
<script src="js/jquery.jMosaic.js"></script>
		

Include the CSS file responsible to style the jMosaic plugin.

<link rel="stylesheet" href="css/jquery.jMosaic.css"/>
		

Select a block which contains the necessary elements.

<div class="pictures">
	<img src="img/one.jpg" width="267" height="400"/>
	<img src="img/two.jpg" width="500" height="350"/>
	. . .
	<img src="img/last.jpg" width="400" height="300"/>
</div>	
		

After it, call the jQuery jMosaic plugin.

$('.pictures').jMosaic();	
		

For blocks or images of size, you can use $(document).ready().

If this image without attribute "width" or "heigh", you can use $(window).load().

You can update on $(window).resize().

As options can be passed:

• items_type : Type of elements in the selector (Default: img);
• min_row_height : Minimal row height (Default: 150);
• margin : Space between elements (Default: 0);
• is_first_big : First row - largest (Default: false).

$('.pictures').jMosaic({items_type: "img", min_row_height: 200, margin: 3, is_first_big: true});
		

If you want to clean up, use the:

$('.pictures').jMosaic('clear');
		

Example (pictures & fixed width):

Example (blocks & relative width):

---

ABSENT, 2013