jQuery Plugin For Aligning Elements As A Mosaic - jMosaic

jMosaic is a intelligent jQuery plugin for automatically resizing and aligning your elements of your page as a Mosaic, without changing the proportions of the elements,  to fit the overall layout of your website.

How to use it:

1. Include both the jQuery library and jMosaic.js in your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.jMosaic.js"></script>

2. Include jMosaic CSS for styling your plugin

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

3. Markup

<div class="pictures" >
<img src="img/pics-001.jpg" width="700" height="446"/> 
<img src="img/pics-002.jpg" width="700" height="448"/> 
<img src="img/pics-003.jpg" width="640" height="896"/> 
<img src="img/pics-004.jpg" width="700" height="551"/>
...
</div>

4. Call the plugin

<script type="text/javascript">
     $('.pictures').jMosaic();
</script>

// If your images without attribute WIDTH or HEIGH, you can use $(window).load

$(window).load(function() {
     $('.pictures').jMosaic({
         items_type: "img", // Type of elements in the selector (Default: img);
	 min_row_height: 200, // Minimal row height (Default: 150);
	 margin: 3, // Space between elements (Default: 0);
	 is_first_big: true // First row - largest (Default: false);
    });
});

Change log:

0.1.2 (2014-01-12)

• bug fix

0.1.0 (2014-01-11)

• Changed the plugin model

---

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