Files
<link rel="stylesheet" href="dist/css/yBox.min.css" />
<script type="text/javascript" src="dist/js/directive.min.js"/>
<script type="text/javascript" src="dist/js/yBox.min.js?lang=he"/>
Open the popup when page loads
<script> yBox('Just call me'); </script>
Open the popup by calling the element from JavaScript
(You can run it through the console for testing)
<div style="display:none;">
<div id="popup" href="#popup">Hello :-)</div>
</div>
<script> yBox('',$('#popup')); </script>
Calling the function before opening yBox
self = The yBox button
function beforeYboxOpen(self){ /* Do something before yBox is open */ };
Click here for example
Calling the function after opening yBox
self = The yBox button
function yBoxIsOpen(self){ /* Do something after yBox is open */ };
Click here for example
Calling the function before closing yBox
self = The yBox button
function beforeYboxClose(self){ /* Do something before yBox is close */ };
Click here for example
Calling the function after yBox closed
self = The yBox button
function afterYboxClose(self){ /* Do something after yBox is close */ };
Click here for example
Add "systemmessage" parameter to URL
https://www.domain.com/?systemmessage=Some text
Open Iframe / YouTube / Vimeo with yBox ( class="yBox yBox_iframe" )
<a href="https://www.youtube.com..." class="yBox yBox_iframe"> </a>
Open inner video file ( class="yBox yBox_video" )
<a href="/path/to/video.mp4" class="yBox yBox_video"> </a>
Add different class ( data-ybox-class="my_class" )
Click here for example
<a href="#myLink" data-ybox-class="myYboxClass" class="yBox"> </a>
Open with AJAX ( class="yBox yBox_ajax" )
Click here for example
<a href="https://www.google.com" class="yBox yBox_ajax"> </a>
Grouped galleries ( data-ybox-group="group_name" )
Group 1
You can edit the ALT of the images
( data-ybox-alt="Image Alt" )
<a href="image.jpg" data-ybox-group="group1" data-ybox-alt="Image Alt" class="yBox"> </a>
Group 2
<a href="image.jpg" data-ybox-group="group2" class="yBox"> </a>