LC Lightbox - jQuery Plugin

Documentation

Public Methods

Introduction

Methods are global javascript functions, to be used to control LC Lightbox on custom events.
DEV NOTE: if an error is faced, the plugin will print debug trace into browser's console.

On certain methods you will need to use a valid lightbox instance.
Please refer to "Initialization" chapter to know more about instances.

lcl_open()

Opens directly the lightbox.

Parameters
(object) (required)initialized lightbox instance
(int) (required)element's index to open
Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	lcl_open($obj, 0); // open lightbox showing first element
});
</script>
lcl_resize()

Triggers lightbox resizing core, recalculating elements size and position

Parameters

none

Example
<script type='text/javascript'>
$(document).ready(function() {
	
	// IMPORTANT: lightbox MUST BE already showing up
	lcl_resize();
});
</script>
lcl_close()

Simply closes lightbox

Parameters

none

Example
<script type='text/javascript'>
$(document).ready(function() {
	
	// IMPORTANT: lightbox MUST BE already showing up
	lcl_close();
});
</script>
lcl_switch()

Switches from an element to another

Parameters
(string|int) (required) Which element to show. Supports two fixed values and the dierect index submission:

prevswitches to previous element
nextswitches to next element
(integer value)The element's index to show
Example
<script type='text/javascript'>
$(document).ready(function() {
	// IMPORTANT: lightbox MUST BE already showing up
	
	lcl_switch('next'); // shows the next element
	
	lcl_switch(3); // shows fourth element (indexes start from zero)
});
</script>
lcl_start_slideshow()

Starts the slideshow

Parameters
(bool) (optional)Use "true" to reset slideshow timing
Example
<script type='text/javascript'>
$(document).ready(function() {
	
	// IMPORTANT: lightbox MUST BE already showing up
	lcl_start_slideshow();
});
</script>
lcl_stop_slideshow()

Stops the slideshow

Parameters

none

Example
<script type='text/javascript'>
$(document).ready(function() {
	
	// IMPORTANT: lightbox MUST BE already showing up
	lcl_stop_slideshow();
});
</script>
lcl_destroy()

Destroys a lightbox instance.

Parameters
(object) (required)initialized lightbox instance
Example
<script type='text/javascript'>
$(document).ready(function() {
	$obj = lc_lightbox('#lcl_elems_wrapper a');
	lcl_destroy($obj);
});
</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