Basic Responsive Lightbox Plugin For Images - simple-lightbox
File Size: | 5.78 KB |
---|---|
Views Total: | 4806 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A lightweight and easy-to-implement jQuery plugin used to create a responsive, position-fixed lightbox popup for all images found within the document.
How to use it:
1. Link to jQuery library and the simple-lightbox plugin's files.
<link rel="stylesheet" href="./jquery.simple-lightbox.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="./jquery.simple-lightbox.js"></script>
2. Enable the lightbox plugin on all images within the document.
$(function() { $('body').simpleLightbox(); });
3. Or within a specific container.
<div class="container"> <img src="1.jpg" alt="Image" /> <img src="2.jpg" alt="Image" /> <img src="3.jpg" alt="Image" /> ... </div>
$(function() { $('.container').simpleLightbox(); });
4. Set the trigger element.
$('body').simpleLightbox({ trigger: 'img' });
5. Set the attribute which holds the image path.
$('body').simpleLightbox({ source: 'src' });
6. Override the default CSS to create your own styles.
.sl-wrapper { background-color: rgba(0,0,0,0.8); position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 99; } .sl-wrapper .sl-content { background-color: #fff; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; padding: 20px; max-width: 100%; width: 80vh; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
Changelog:
2018-11-16
- ascii text added
2018-11-05
- Improved closing lightbox by click
This awesome jQuery plugin is developed by thomasschwarz96. For more Advanced Usages, please check the demo page or visit the official website.