LC Lightbox

Documentation

Events

Introduction

LC Lightbox triggers several events that can be used to perform custom actions by developers.
Many of them are called on objects used to initialize the lightbox. For example:

<script type='text/javascript'>
$(document).ready(function() {
	var $obj = $('#lcl_elems_wrapper a'); // could be a DOM object or a direct object containg elements
	
	lc_lightbox($obj); // create lightbox instance
	$obj.on('event', function(e) {
		...
	});
});
</script>

Remember you can always count on lcl_curr_opts and lcl_curr_vars global variables.

lcl_elems_parsed

Triggered when targeted DOM elements have been managed (indipendently from lightbox opening)

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_elems_parsed', function(e, elems) {
		// elems is the elements array
	});
});
</script>
lcl_html_is_ready

Triggered when lightbox's HTML code is appended to page

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_html_is_ready', function(e, opts, vars) {
		...
	});
});
</script>
lcl_before_populate_global

Triggered before lightbox is populated with element contents.
(CALLED GLOBALLY)

Example
<script type='text/javascript'>
$(document).ready(function() {
	$(document).on('lcl_before_populate_global', function(e, element, el_index) {
		
		// element = object containing data about the element to be shown
		// el_index = index of the element to be shown
		
		// here you can manipulate element's data for example
	});
});
</script>
lcl_before_show

Triggered each time an element is about to be shown

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_before_show', function(e, element, el_index) {
		// element = object containing data about the element to be shown
		// el_index = index of the element to be shown
	});
});
</script>
lcl_before_show_global

Same as before, but called globally

lcl_on_open

Triggered on first lightbox opening: right BEFORE lightbox element is displayed

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_on_open', function(e, element, el_index) {
		// element = object containing data about the element to be shown
		// el_index = index of the element to be shown
	});
});
</script>
lcl_resized_window

Triggered each time lightbox window is resized
(CALLED GLOBALLY)

Example
<script type='text/javascript'>
$(document).ready(function() {
	$(document).on('lcl_resized_window', function() {
		...
	});
});
</script>
lcl_on_elem_switch

Triggered right before lightbox element's switch

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_on_elem_switch', function(e, curr_el_index, new_el_index) {
		// curr_el_index = integer number representing current item index
		// new_el_index = integer number representing item index that it's about to be shown
	});
});
</script>
lcl_on_close

Triggered on lightbox closing. HTML and variables are still accessible

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_on_close', function() {
		...
	});
});
</script>
lcl_on_close_global

Same as before, but called globally

lcl_closed_global

Triggered after lightbox codes have been removed and lightbox is totally hidden
(CALLED GLOBALLY)

Example
<script type='text/javascript'>
$(document).ready(function() {
	$(document).on('lcl_closed_global', function() {
		...
	});
});
</script>
lcl_on_fs_enter

Triggered while entering in fullscreen mode

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_on_fs_enter', function() {
		...
	});
});
</script>
lcl_on_fs_exit

Triggered while exiting fullscreen mode

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_on_fs_exit', function() {
		...
	});
});
</script>
lcl_clicked_elem

Triggered when a target element is clicked and then lightbox is about to be shown

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_clicked_elem', function(e, target) {
		// target = clicked element's DOM object
	});
});
</script>
lcl_slideshow_start

Triggered on slideshow start

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_slideshow_start', function() {
		...
	});
});
</script>
lcl_slideshow_end

Triggered on slideshow end

Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	
	$obj.on('lcl_slideshow_end', function() {
		...
	});
});
</script>
lcwebLC Lightbox – Documentation