Responsive Mosaic Grid For Images - jQuery Mosaic

File Size: 13.7 KB
Views Total: 5795
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Mosaic Grid For Images - jQuery Mosaic

Mosaic.js is a small Masonry-style jQuery layout plugin which displays your photos in a responsive mosaic/tiled grid layout with a subtle hover effect.

How to use it:

1. Insert a list of images into the mosaic grid as these:

  • data-thumb: path to thumbnail
  • data-full: path to larger image
<div id="example">
  <ul style="display: none">
    <li data-thumb="thumb-1.jpg"  
    <li data-thumb="thumb-2.jpg"  
    <li data-thumb="thumb-3.jpg"  
    <li data-thumb="thumb-4.jpg"  
    <li data-thumb="thumb-5.jpg"  

2. Import the latest jQuery library and jQuery Mosaic.js script into the document.

<script src="" 
<script src="src/js/mosaic.js"></script>

3. The necessary for the grid, loading indicator and hover effect.

.mosaicpic-wrapper-items {
  position:   absolute;
  background-image:   url("../img/loader.gif");
  background-position:    center center;
  background-repeat:  no-repeat;

.mosaicpic-wrapper-items div {
  height: 100%;
  width:  100%;
  cursor: pointer;
  transition: background-color 0.3s ease;

.mosaicpic-wrapper-items:hover div {
  background-color:   rgba(0,0,0,0.7);
  background-position: center center;
  background-repeat:  no-repeat;
  background-image:   url("../img/lupa.png");

4. Initialize the mosaic grid and specify the max width of the image.

  maxWidth: 250

5. Trigger a custom function when an image gets clicked.

  maxWidth: 250,
  onClick: function() {
    urlFull   =    $(this).data("full");
    // more...

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