Responsive Justified Image Grid/Gallery Plugin - jQuery imagesGrid
File Size: | 5.33 KB |
---|---|
Views Total: | 19208 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
imagesGrid is a super tiny jQuery plugin that helps you create a fully responsive image gallery with justified grid layout.
How to use it:
1. Just load the JavaScript file jquery.imagesGrid.js
after jQuery library (slim build) and we're ready to go.
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="jquery.imagesGrid.js"></script>
2. Insert your images into the gallery and specify the width/height for each image using data
attributes:
<div class="images-grid images-grid-demo"> <div class="image-wrapper" data-width="500" data-height="450"> <img class="image-thumb" src="https://placehold.it/500x450/" /> </div> <div class="image-wrapper" data-width="300" data-height="650"> <img class="image-thumb" src="https://placehold.it/300x650/" /> </div> <div class="image-wrapper" data-width="1024" data-height="768"> <img class="image-thumb" src="https://placehold.it/1024x768/" /> </div> ... </div>
3. Initialize the image grid/gallery with default settings.
$(".images-grid-demo").imagesGrid();
4. Adjust the height of the grid row.
$(".images-grid-demo").imagesGrid({ rowHeight: 150 });
5. Change the default space between images.
$(".images-grid-demo").imagesGrid({ margin: 1 });
Change log:
2017-09-04
- JS update
This awesome jQuery plugin is developed by Lynesth. For more Advanced Usages, please check the demo page or visit the official website.