Fullscreen Photo Gallery with Thumbnail Navigation - ma5-gallery
File Size: | 3.21 MB |
---|---|
Views Total: | 8092 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
ma5-gallery is a simple-to-use jQuery plugin used to create a fullscreen responsive photo gallery with a thumbnail navigation.
Features:
- Single mode: enlarge your image in a fullscreen popup box.
- Gallery mode: display grouped images in a fullscreen gallery lightbox.
- ESC or click anywhere on blank area to close the gallery.
- CSS3 based transition effects.
- Allows to navigate between images with keyboard arrows.
How to use it:
1. Upload your thumbnails & full sized image (1.jpg, 1-thumbnail.jpg, 2.jpg, 2-thumbnail.jpg, ...) into the image folder.
2. Include the ma5gallery.css in the head section of the document.
<link href="stylesheets/ma5gallery.css" rel="stylesheet">
3. Insert the thumbnails into a container.
<div class="ma5-gallery"> <figure> <img src="images/1-thumbnail.jpg" alt=""> </figure> <figure> <img src="images/2-thumbnail.jpg" alt=""> </figure> <figure> <img src="images/3-thumbnail.jpg" alt=""> </figure> <figure> <img src="images/4-thumbnail.jpg" alt=""> </figure> <figure> <img src="images/5-thumbnail.jpg" alt=""> </figure> <figure> <img src="images/6-thumbnail.jpg" alt=""> </figure> ... </div>
4. Include jQuery library and the jQuery ma5-gallery plugin in the footer.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="javascripts/ma5gallery.js"></script>
5. Call the function on the thumbnails to initialize the photo gallery.
$('figure img').ma5gallery({ preload:true, fullscreen:true });
Change logs:
v2.0.0 (2015-11-22)
- fullscreen and movie player features
2015-05-27
- Add option for customize path to full image
2015-05-20
- Add figcaption
2015-05-19
- Add previous next control at full image
2015-05-10
- Add preload option
This awesome jQuery plugin is developed by ma-5. For more Advanced Usages, please check the demo page or visit the official website.