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 */ };
			

Calling the function after opening yBox
self = The yBox button

				function yBoxIsOpen(self){ /* Do something after yBox is open */ };
			

Calling the function before closing yBox
self = The yBox button

				function beforeYboxClose(self){ /* Do something before yBox is close */ };
			

Calling the function after yBox closed
self = The yBox button

				function afterYboxClose(self){ /* Do something after yBox is close */ };
			

Add "systemmessage" parameter to URL

				https://www.domain.com/?systemmessage=Some text
			

Calling to yBox in yBox window

 
				<a href="#link1" class="yBox"> </a>
			

Add different class ( data-ybox-class="my_class" )

 
				<a href="#myLink" data-ybox-class="myYboxClass" class="yBox"> </a>
			

Open with AJAX ( class="yBox yBox_ajax" )

 
				<a href="https://www.google.com" class="yBox yBox_ajax"> </a>
			

Grouped galleries ( data-ybox-group="group_name" )

Group 1

 
				<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>