Dynamic jQuery Gallery Lightbox Plugin - Simple Gallery
File Size: | 7.69 KB |
---|---|
Views Total: | 5465 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The jQuery Simple Gallery retrieves the image json data from imageData.json and presents the images in a responsive, navigatable lightbox popup when clicked.
How to use it:
1. The plugin requires Bootstrap's stylesheet to style the thumbnail gallery.
<link href="bootstrap.min.css" rel="stylesheet">
2. Create the HTML for the gallery lightbox.
<div class="overlay"> <div class="content"> <a href="#" class="closebtn">×</a> <a class="navigationControls prev">❮</a> <a class="navigationControls next">❯</a> <img src="" class="img-responsive bigImage"/> <div class="imageTitle"></div> </div> </div>
3. Create an empty container to place the thumbnail images.
<div class="container"> <ul class="row galleryContainer"> </ul> </div>
4. Load jQuery library and the main JavaScript file 'myscript.js' in the document.
<script src="//code.jquery.com/jquer.min.js"></script> <script src="js/myscript.js"></script>
5. Override the default image data in the 'imageData.json':
{ "images": [ { "name": "Image one", "imgSource": "1.jpg" }, { "name": "Image two", "imgSource": "2.jpg" }, { "name": "Image three", "imgSource": "3.jpg" }, ... ] }
6. The required CSS styles for the gallery lightbox:
ul li { list-style: none; margin-bottom: 25px; } ul li img { cursor: pointer; border: 3px solid #fff; opacity: 0.6; transition: opacity 0.5s; border-radius: 4px; } ul li img:hover { opacity: 1; } .overlay { height: 100%; width: 100%; position: fixed; z-index: 1; left: 0; top: 0; background-color: rgba(0,0,0, 0.6); display: none; } .overlay .closebtn { position: absolute; z-index: 3; top: -20px; right: -30px; font-size: 40px; color: #f1f1f1; text-decoration: none; } .prev, .next { outline: none; text-decoration: none; cursor: pointer; position: absolute; z-index: 3; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .bigImage { height: 100%; width: 100%; position: relative; border: 3px solid #fff; } .content { top: 20px; position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 65%; max-width: 1200px; } .imageTitle { text-align: center; padding: 2px; height: 25px; position: relative; background-color: rgba(0,0,0,0.8); color: #fff; font-size: 15px; }
This awesome jQuery plugin is developed by bhaskarmac. For more Advanced Usages, please check the demo page or visit the official website.