LC Lightbox



LC Lightbox is extremely flexible and can be configured with many options.
Options have to be used directly on plugin's initialization:

<script type='text/javascript'>
$(document).ready(function() {
	lc_lightbox('.elems-selector', {
		option1 : 'value',
		option2 : 'value',


You can obviously initialize multiple lightbox instances with different options in the same page.
Here's the complete list:

Option NameData TypeDscriptionDefault value
gallery(bool)whether to display multiple elements singularly or as a gallerytrue
gallery_hook(string|bool)attribute used to group elements - use false to create a gallery with all fetched elementsrel
live_elements(bool)tracks DOM changes to dynamically alterate fetched elements
(only if lightbox is initialized with a selector)
preload_all(bool)whether to preload all images on document readyfalse
global_type (string|bool)Forces elements type globally. Can be overrided by in-element attribute.
Supported types: image - video - youtube - vimeo - dailymotion - html - iframe
deeplink (bool)whether to create browser history and an unique URL for every elementfalse
img_zoom (bool)whether to enable images zooming systemfalse
comments (bool|object)whether to enable element comments system. Please check the related chapter to know how to setup specific object keysfalse
src_attr(string)attribute containing element's sourcehref
(to be used on links)
title_attr(string)attribute containing element's title. Is possible to specify an inner selector with this syntax: "> .selector" or "> span"title
txt_attr(string)attribute containing element's description. Is possible to specify an inner selector with this syntax: "> .selector" or "> span"data-lcl-txt
author_attr(string)attribute containing element's author. Is possible to specify an inner selector with this syntax: "> .selector" or "> span"data-lcl-author
author_by_txt(string)which text is used before the author's nameby
slideshow(bool)whether to enable slideshow systemtrue
open_close_time(int)animation duration for lightbox opening and closing (in milliseconds)500
ol_time_diff(int)overlay's animation advance (on opening) and delay (on close) to window (in milliseconds)100
fading_time(int)elements fading animation duration (in milliseconds)150
animation_time(int)sizing animation duration (in milliseconds)300
slideshow_time(int)slideshow interval duration (in milliseconds)6000
autoplay(bool)whether to autoplay slideshowfalse
counter(bool)whether to display elements counterfalse
progressbar(bool)whether to display a progressbar when slideshow runstrue
carousel(bool)whether to create a non-stop pagination cycling elementstrue
max_width(int|string)lightbox maximum width. Use a responsive percent value or an integer for static pixel value93%
max_height(int|string)lightbox maximum height. Use a responsive percent value or an integer for static pixel value93%
wrap_padding(string)sets lightbox wrapping padding. Useful to maintain spaces using px max-sizes. Use a CSS value
ol_opacity(float)lightbox overlay's opacity0.7
ol_color(string)lightbox overlay's color#111
ol_pattern(string|bool)lightbox overlay's pattern. Use pattern's name (check available ones into IMG folder) or falsefalse
border_w(int)Lightbox border's width (in pixels)0
border_col(string)Lightbox border's color#ddd
padding(int)Lightbox contents padding (in pixels)0
radius(int)Lightbox borders radius (in pixels)0
shadow(bool)whether to apply a shadow around lightbox windowtrue
remove_scrollbar(bool)whether to hide page's vertical scroller on lightbox openingtrue
wrap_class(string)Custom classes added to wrapper. Useful for customizations
skin(string)Skin applied to lightbox. Skin's CSS must be already included in the page.
Skin name will be used to create a wapper's class: for "light" will create lcl_light class. Read more about skins in the related chapter
data_position(string)Specifies where elements data will be shown. Available modes are:

over (over element)
under (under element)
rside (on right side)
lside (on left side)

Please note lightbox uses a smart system automatically switching to "over" as soon element becomes too small because of long texts or tiny window.

cmd_position(string)Declare where commands have to be shown: available options are inner or outer.
This can be forced to "outer" on an element basis using a specific attribute. Check "initialization" chapter to know more.

Please note lightbox will automatically switch to "outer" if inner commands are too wide for the represented element

ins_close_pos(string)Set closing button's position. Available options: normal, corner (only for inner commands)normal
nav_btn_pos(string)Set arrows and play/pause position. Available options: normal, middlenormal
txt_hidden(int|bool)Whether to hide texts on lightbox opening:

false = texts are always shown
integer number = minimum threshold to keep texts. Is related browser's smaller side in pixels

show_title(bool)whether to display titlestrue
show_descr(bool)whether to display descriptionstrue
show_author(bool)whether to display authorstrue
thumbs_nav(bool)enables thumbnails navigation (requires elements poster or images)true
tn_icons(bool)prints type icons on thumbs if element types are mixedtrue
tn_hidden(int|bool)whether to hide thumbs navigation on lightbox opening:

false = texts are always shown
integer number = minimum threshold to keep texts. Is related browser's smaller side in pixels

thumbs_w(int)thumbnails width (in pixels)110
thumbs_h(int)thumbnails height (in pixels)110
thumb_attr(bool|string)element's attribute name containing thumbnail's URL. Use false to use thumbs maker system (see next option)false
thumbs_maker_url(bool|string)here you can insert a common URL including specific placeholders to create thumbnails on the fly (for example with Timthumb). Use false to ignore this. Here's a demo URL containing detected placeholders:

fullscreen(bool)Whether to allow fullscreen modetrue
fs_img_behavior(string)Fullscreen image behavior:

fit - image will be completely visible (eventually leaving spaces on edges)
fill - image will always fill the screen (a portion could be eventually hidden)
smart - LC Lightbox uses "fit" mode and switches to "fill" only if image's aspect ratio is similar to available space

fs_only(int|bool)whether to use only fullscreen mode lightbox opening (useful for mobile devices):

false = lightbox will be normally opened
integer number = minimum threshold to normally open lightbox. Is related browser's smaller side in pixels

browser_fs_mode(bool)whether to use browser fullscreen mode or nottrue
socials(bool)whether to show social share buttontrue
fb_direct_share (bool|string)False by default, use a specific string representing URL parameters + placeholders (they will be replaced by the lightbox).
It requires a server-side script handling those parameters and filling the page with Facebook Metadata.

A usage example could be: app_id=YOUR-APP-ID&redirect_uri=THE-REDIRECT-URI&lcsism_img=%IMG%&lcsism_title=%TITLE%&lcsism_descr=%DESCR%
The lightbox will replace %IMG% %TITLE% and %DESCR%

txt_toggle_cmd(bool)whether to show element's text toggle buttontrue
download(bool)whether to show element's file download buttonfalse
autoplay_videos (bool)whether to autoplay videos
NB: modern browsers ignore this for deeplinked elements. Not applied if video has poster
touchswipe(bool)enables touch interactions (requires AlloyFinger)true
mousewheel(bool)enables elements navigation with mousewheeltrue
modal(bool)enables modal mode (no lightbox closing on overlay click)false
rclick_prevent(bool) whether to avoid right click on lightbox elementsfalse