A lightweight vanilla JS lightbox alternative, created by Yuval Ashkenazi and Yoav Leshem
No license required - Use anywhere and as you wish.
Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested.
Include yBox.min.js
, directive.js
(For mobile zoom on images) and yBox.min.css
into your document’s <head>
. Simply add 'yBox'
class to your <a>
element, and call the function as follows:
<script>
window.onload = function(){
if(document.querySelector('.yBox')){
let myYbox = new yBox();
myYbox.init();
};
}
</script>
<html>
<head>
<link rel="stylesheet" href="dist/css/yBox.min.css">
<script src="dist/js/directive.js"></script>
<script src="dist/js/yBox.min.js"></script>
</head>
<body>
Link to another element on page (which contains an inner yBox link):
<a href="#link1" class="yBox">Click me</a>
Link to an Iframe:
<a class="yBox yBox_iframe" href="https://www.youtube.com/watch?v=eEMpCcLm6NI&list=RDeEMpCcLm6NI&start_radio=1"></a>
Custom yBox class:
<a href="#myLink" data-popup-class="popupWrapper" class="yBox" >Click me</a>
AJAX call
<a href="https://www.google.com" class="yBox yBox_ajax">Click me</a>
Gallery view by groups:
<a href="/path_to_image1" class="yBox" data-ybox-group="group1">
<img src="/path_to_image1" alt="" width="200" />
</a>
<a href="/path_to_image2" class="yBox" data-ybox-group="group1">
<img src="/path_to_image2" alt="" width="200" />
</a>
<a href="/path_to_image3" class="yBox" data-ybox-group="group1">
<img src="/path_to_image3" alt="" width="200" />
</a>
<script>
window.onload = function(){
if(document.querySelector('.yBox')){
var myYbox = new yBox();
myYbox.init();
};
}
</script>
</body>
</html>
myYbox.yBox('Just trigger me anywhere');
myYbox.onYboxOpen = function(){// Fires when yBox is opened
document.body.classList.add('custom');
};
myYbox.onYboxClose = function(){// Fires when yBox is closed
document.body.classList.remove('custom');
};
myYbox.onNextItemClick = function(){// Fires when clicking next image button on a group gallery
console.log('Next item clicked');
};
myYbox.onPrevItemClick = function(){// Fires when clicking prev image button on a group gallery
console.log('Prev item clicked');
};
Author: Leshemiko
Source Code: https://github.com/Leshemiko/Ybox
#javascript