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