LC Lightbox - jQuery Plugin

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>

Let's get in touch!

Features list

  • Elements Slideshow (manually or automatically initialized)
  • Thumbnails Navigation (with customizable sizes and optional data-type icon)
  • Effective Socials Share (with WhatsApp option on mobile)
  • Element Contents (title, description and author)
  • Images "right-click" protection
  • Show and mix multiple data type (Images - HTML5 video - youtube - vimeo - dailymotion - inline HTML - iframe)
  • Natively supports webp/avif images
  • Fullscreen mode
    • Covering only browser or entire screen space
    • Optionally forced under target screen sizes
    • Fullscreen-only mode
    • Image option to cover available space (cropping it) or to be completely shown
  • Elements direct download (not requiring PHP scripts)
  • Components Toggling (thumbnails and texts).
  • Thumbnails and texts optionally hidden by default under target screen sizes
  • Dynamic Elements Tracking
  • HTML support in element descriptions
  • 100% CSS Driven
  • (optional) Mousewheel and Keyboard elements navigation
  • Touch integrations
    • Swipe > navigate through elements
    • Double-tap > zoom-in image
    • Pinch-in and out > zoom-in and out image
  • Dev-oriented and well-documented methods & Events
  • SEO deeplinking system with browser-history management
  • Progressive images zoom
  • Comments integration (Disqus or Facebook Comments)
  • 4 layouts (text over element, under element or on right/left side)
  • (optional) closing button on corner position (for inner commands)
  • (optional) navigation buttons on middle position (for inner commands)
  • 7 preset show/hide animations
  • Automatic fallback on text over image on small screens or whether element becomes too small
  • 3 preset skins to be used and mixed on a single page (light, dark and minimal)
  • Code projected to be easily skinned via CSS
  • Dual commands position (inside and outside lightbox window)
  • Specific element behaviors
    • Forced outer commands
    • Custom element width (not for images)
    • Custom element height (not for images)
    • Custom element aspect ratio combining width & height (not for images)
  • Elements complete preload once page is loaded
  • Adapts to your page's code (you set how lightbox fetches contents from binded elements)
  • Full control on each animation/effect timing
  • Modal mode
  • Thumbnails script support (eg. easily integrates with Timthumb)
  • MUCH MORE! check 60+ lightbox options