LC Lightbox - jQuery Plugin
Documentation
Options
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',
...
});
});
</script>
You can obviously initialize multiple lightbox instances with different options in the same page.
Here's the complete list:
| Option Name | Data Type | Dscription | Default value |
|---|---|---|---|
| gallery | (bool) | whether to display multiple elements singularly or as a gallery | true |
| gallery_hook | (string|bool) | attribute used to group elements - use false to create a gallery with all fetched elements | rel |
| live_elements | (bool) | tracks DOM changes to dynamically alterate fetched elements (only if lightbox is initialized with a selector) | true |
| preload_all | (bool) | whether to preload all images on document ready | false |
| global_type | (string|bool) | Forces elements type globally. Can be overrided by in-element attribute. Supported types: image - video - youtube - vimeo - dailymotion - html - iframe | false |
| deeplink | (bool) | whether to create browser history and an unique URL for every element | false |
| img_zoom | (bool) | whether to enable images zooming system | false |
| comments | (bool|object) | whether to enable element comments system. Please check the related chapter to know how to setup specific object keys | false |
| src_attr | (string) | attribute containing element's source | href (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 name | by |
| slideshow | (bool) | whether to enable slideshow system | true |
| 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 slideshow | false |
| counter | (bool) | whether to display elements counter | false |
| progressbar | (bool) | whether to display a progressbar when slideshow runs | true |
| carousel | (bool) | whether to create a non-stop pagination cycling elements | true |
| max_width | (int|string) | lightbox maximum width. Use a responsive percent value or an integer for static pixel value | 93% |
| max_height | (int|string) | lightbox maximum height. Use a responsive percent value or an integer for static pixel value | 93% |
| 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 opacity | 0.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 false | false |
| 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 window | true |
| remove_scrollbar | (bool) | whether to hide page's vertical scroller on lightbox opening | true |
| 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 | light |
| data_position | (string) | Specifies where elements data will be shown. Available modes are: over (over element) Please note lightbox uses a smart system automatically switching to "over" as soon element becomes too small because of long texts or tiny window. | over |
| 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 | inner |
| 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, middle | normal |
| txt_hidden | (int|bool) | Whether to hide texts on lightbox opening: false = texts are always shown | 500 |
| show_title | (bool) | whether to display titles | true |
| show_descr | (bool) | whether to display descriptions | true |
| show_author | (bool) | whether to display authors | true |
| thumbs_nav | (bool) | enables thumbnails navigation (requires elements poster or images) | true |
| tn_icons | (bool) | prints type icons on thumbs if element types are mixed | true |
| tn_hidden | (int|bool) | whether to hide thumbs navigation on lightbox opening: false = texts are always shown | 500 |
| 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: http://www.mysite.com/humbs_maker.php?src=%URL%&w=%W%&h=%H% | false |
| fullscreen | (bool) | Whether to allow fullscreen mode | true |
| fs_img_behavior | (string) | Fullscreen image behavior: fit - image will be completely visible (eventually leaving spaces on edges) | fit |
| fs_only | (int|bool) | whether to use only fullscreen mode lightbox opening (useful for mobile devices): false = lightbox will be normally opened | 500 |
| browser_fs_mode | (bool) | whether to use browser fullscreen mode or not | true |
| socials | (bool) | whether to show social share button | true |
| 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% | false |
| txt_toggle_cmd | (bool) | whether to show element's text toggle button | true |
| download | (bool) | whether to show element's file download button | false |
| autoplay_videos | (bool) | whether to autoplay videos NB: modern browsers ignore this for deeplinked elements. Not applied if video has poster | false |
| touchswipe | (bool) | enables touch interactions (requires AlloyFinger) | true |
| mousewheel | (bool) | enables elements navigation with mousewheel | true |
| modal | (bool) | enables modal mode (no lightbox closing on overlay click) | false |
| rclick_prevent | (bool) | whether to avoid right click on lightbox elements | false |