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"  
      data-full="full-1.jpg">
    </li>
    <li data-thumb="thumb-2.jpg"  
      data-full="full-2.jpg">
    </li>
    <li data-thumb="thumb-3.jpg"  
      data-full="full-3.jpg">
    </li>
    <li data-thumb="thumb-4.jpg"  
      data-full="full-4.jpg">
    </li>
    <li data-thumb="thumb-5.jpg"  
      data-full="full-5.jpg">
    </li>
    ...
  </ul>
<div>

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<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.

$("#example").mosaic({
  maxWidth: 250
});

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

$("#example").mosaic({
  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.