Author: | Leshemiko |
---|---|
Views Total: | 1,010 views |
Official Page: | Go to website |
Last Update: | November 4, 2020 |
License: | MIT |
Preview:

Description:
yBox is a lightweight yet feature-rich lightbox JavaScript library for images, videos, iframes, text, and any HTML content you provide.
Features:
- Allows multiple instances (lightbox in lightbox).
- Responsive and clean UI design.
- Allows to load content via AJAX requests.
- Galley mode that allows to navigate between grouped items.
How to use it:
1. Start by inserting the yBox’s JavaScript and CSS into the HTML document.
<link rel="stylesheet" href="dist/css/yBox.min.css" /> <script src="dist/js/yBox.min.js"></script>
2. Initialize the yBox library and we’re ready to go.
window.onload = function(){ if(document.querySelector('.yBox')){ var myYbox = new yBox(); myYbox.init(); }; }
3. Show a basic lightbox when needed (on page load for example.)
myYbox.yBox('Lightbox Content Here');
4. Load content from any element within the document.
<div style="display:none;"> <div id="modalContent"> Modal Content here </div> </div>
<a class="yBox" href="#modalContent">Launch The Lightbox</a>
5. Open an iframe in the lightbox. Ideal for Youtube videos.
<a href="https://www.youtube.com/watch?v=eEMpCcLm6NI&list=RDeEMpCcLm6NI&start_radio=1" class="yBox yBox_iframe"> Open The Youtube Video </a>
6. Load content via AJAX.
<a href="https://www.google.com" class="yBox yBox_ajax"> Launch The Lightbox </a>
7. Apply an additional CSS class to the lightbox.
<a class="yBox" data-popup-class="customClass" href="#modalContent">Launch The Lightbox</a>
8. Create a gallery lightbox from a group of images.
<a href="1.jpg" class="yBox" data-ybox-group="group1"> <img src="thumb-1.jpg" alt="Image Alt 1" width="200" /> </a> <a href="2.jpg" class="yBox" data-ybox-group="group1"> <img src="thumb-2.jpg" alt="Image Alt 2" width="200" /> </a> <a href="3.jpg" class="yBox" data-ybox-group="group1"> <img src="thumb-3.jpg" alt="Image Alt 3" width="200" /> </a> ...
9. Event handlers.
myYbox.onYboxOpen = function(){ // Fired when yBox is opened }; myYbox.onYboxClose = function(){ // fired when yBox is closed }; myYbox.onNextItemClick = function(){ // fired when clicking next button }; myYbox.onPrevItemClick = function(){ // fired when clicking prev button };