jQuery Plugin For Responsive Justified Image Gallery - Justified
File Size: | 10.6 KB |
---|---|
Views Total: | 11456 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Justified is a small and simple-to-use jQuery plugin for generating a responsive justified gallery / grid to present your images with various sizes and aspect ratios.
How to use it:
1. Insert a group of images (or any element else you prefer) into a DIV container with the CSS class of 'grid-container'.
<div id="grid-container"> <img class="grid-item" src="1.jpg"> <img class="grid-item" src="2.jpg"> <img class="grid-item" src="3.jpg"> <img class="grid-item" src="4.jpg"> <img class="grid-item" src="5.jpg"> ... </div>
2. Include jQuery and the jQuery Justified plugin's script at the bottom of the webpage.
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="dist/js/imagesLoaded.min.js"></script>
3. Include the jQuery imagesLoaded plugin to render the gallery after all the images have been loaded completely.
<script src="/path/to/imagesloaded.min.js"></script>
4. Create a new justifiedGrid object with some parameters.
var parameters = { gridContainer: '#grid-container', gridItems: '.grid-item', gutter: 5, enableImagesLoaded: true }; var grid = new justifiedGrid(parameters);
5. Initialize the image gallery / grid.
var parameters = { gridContainer: '#grid-container', gridItems: '.grid-item', enableImagesLoaded: true }; var grid = new justifiedGrid(parameters);
6. Customize the plugin in the CSS as follows:
#grid-container { width: 90%; margin: auto; overflow: hidden; } .grid-item { opacity: 0; float: left; padding: 5px; box-sizing: border-box; } .grid-item img { width: 100%; height: 100%; } .grid-item.loaded { opacity: 1; transition: opacity .5s; }
Change log:
2016-10-16
- Add: gutter parameter.
This awesome jQuery plugin is developed by Kim-Thomas. For more Advanced Usages, please check the demo page or visit the official website.