Author: | Pixabay |
---|---|
Views Total: | 4,491 views |
Official Page: | Go to website |
Last Update: | May 6, 2015 |
License: | MIT |
Preview:

Description:
FlexImages is a simple vanilla JavaScript library to create a responsive fluid thumbnail gallery that supports images, videos, iframes, plain text and more. Inspired by Flickr and Google Images.
More features:
- Image / iFrame lazy load.
- AJAX support for infinite scrolling.
- Fully responsive for any devices.
How to use it:
Include the flex-images.css and flex-images.js in the document.
<link rel="stylesheet" href="flex-images.css"> <script src="flex-images.js"></script>
Insert a set of images into the document. Use data-w
and data-h
attributes to specify the width / height of the thumbnails.
<div id="demo" class="flex-images"> <div class="item" data-w="219" data-h="180"><img src="1.jpg"></div> <div class="item" data-w="279" data-h="180"><img src="2.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="3.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="4.jpg"></div> <div class="item" data-w="147" data-h="180"><img src="5.jpg"></div> <div class="item" data-w="276" data-h="180"><img src="6.jpg"></div> ... </div>
Initialize the thumbnail gallery.
new flexImages({selector: '#demo', rowHeight: 140});
Available options.
new flexImages({ // Required selector for container or DOM element that holds the individual images/objects. selector: '#demo', // Selector of the individual image/object containers. container: '.item', // Selector of the image/object inside a container. object 'img', // Maximum height of a row. rowHeight: 180, // Maximum number of rows to display. Images/Objects exceeding this row are hidden. maxRows: null, // Hide incomplete last row of images/objects. truncate: false });