# jMosaic

jQuery plugin for align elements.

Download Github Page

## About

A lightweight jQuery plugin that can take a list of page elements and arrange them in a beautiful, tight-fitted tile mosaic grid.
The proportions of the elements don't change. As the elements can be used: 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 (items_type).

    <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().

### Options:

- 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).

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

### Methods:

- clear : Clean up the selector from the plugin;

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

## Example

### 1. Pictures & fixed width:

### 2. Blocks & relative width:

ABSENT, 2014