LC Lightbox - jQuery Plugin

Documentation

Setup Comments

This feature is not available in LITE version

LC Lightbox supports two commenting systems: Facebook and Disqus.
Tu guarantee a proper user experience and maintain element comments through pages, would be better to setup elements canonical URL (check "Initialization" chapter to know more).

Facebook Comments

Facebook requires a couple of extra things to be done.

As first, you should enable moderation:

  1. create a new app
  2. Add this code into your website's HEAD section
  3. before launching comments, be sure to have set moderators here clicking on "settings"

    facebook comments

  4. If everything is ok, moderators will see the moderation label on top of comments form and you will receive notifications through the app
  5. NB: you might face troubles displaying it for European people. Please check the official Facebook comment plugin page to know more

 

Then add this code in your page, right before BODY's tag closing:

 

And here's lightbox option:

<script type='text/javascript'>
$(document).ready(function() {
	lc_lightbox('#lcl_elems_wrapper a', {
		comments: {
			type 	: 'facebook',
			style	: 'dark' // Facebook styles are dark or light 	
		}	
	});
});
</script>

Disqus Comments

Just register on Disqus and create your shortname.
Here's lightbox option:

<script type='text/javascript'>
$(document).ready(function() {
	lc_lightbox('#lcl_elems_wrapper a', {
		comments: {
			type 		: 'disqus',
			shortname	: 'YOUR-SHORTNAME',	
		}	
	});
});
</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