Get new jQuery plugins just once a week

×

jMosaic

March 18, 2015

jMosaic | A jQuery plugin for align elements in a mosaic

jMosiac is a simple to use jQuery plugin for align elements in Mosiac manner

Created by Seleznev Alexander

Download

Example

jMosaic jQuery plugin

layout

layout

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

jMosaic

Related posts:

jRumble
Social Share Privacy
Tumbo
jMosaic jQuery plugin

http://jquer.in/wp-content/uploads/2015/03/jMosaic.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever