LC Lightbox - jQuery Plugin

Documentation

Getting Started

PRIOR NOTE: To understand this documentation you must know how to manage javascript and have basic CSS + HTML knowledge.

LC Lightbox is a jQuery plugin: as first be sure it is already included on your website.
Otherwise download it from here or use the CDN URL like this:

<script src='https://code.jquery.com/jquery-3.2.1.min.js' type='text/javascript'></script>

Plugin supports jQuery 1.7 or newer releases.

 

Then add lightbox core's CSS and the skin you want to use the the site's HEAD:

<link rel='stylesheet' href='path-to-lc-lightbox/css/lc_lightbox.min.css' />
<link rel='stylesheet' href='path-to-lc-lightbox/skins/minimal.css' />

 

Finally include the plugin's javascript right before BODY tag closing:

<script src='path-to-lc-lightbox/js/lc_lightbox.min.js' type='text/javascript'>

 

If you want to use touch interactions, you also need to add AlloyFinger on your site.
There's a ready-to-use version in LC Lightbox's LIB folder

<script src='path-to-lc-lightbox/lib/AlloyFinger/alloy_finger.min.js' type='text/javascript'>

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