jQuery plugin for align elements
HTML JavaScript CSS
Latest commit 3d87926 Jun 21, 2015 @absentik Update demo image
Permalink
Failed to load latest commit information.
css Update info Apr 9, 2014
img Ready Feb 12, 2013
js Update info Apr 9, 2014
README.md Update demo image Jun 21, 2015
index.html Update info Apr 9, 2014
jMosaic.jquery.json Update info Apr 9, 2014

README.md

jMosaic

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

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:

You can pass an options object in plugin init method.

  • 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

View example