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