LC Lightbox – 强大的 jQuery 图像查看器画廊插件

2026年4月7日34

LC Lightbox 是一款响应式、灵活、强大且适合移动端的 jQuery 图像查看器和画廊插件，适用于现代网页设计。

插图1|LC Lightbox – 强大的 jQuery 图像查看器画廊插件|字节网络

特色

单页或画廊模式。
文档读取时图片预载。
幻灯片和旋转木马风格画廊，配有自定义控制。
内置主题：明亮、黑暗和极简。
显示图片标题、描述和作者。
可自定义缩略图导航。

可分享、可下载的图片。
全屏。
支持触摸滑动和鼠标滚轮事件。
配置选项非常多。

基本用法

1、在文档中加载所需的 JavaScript 和 CSS 文件。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/lc_lightbox.lite.js"></script>
<link rel="stylesheet" href="css/lc_lightbox.css">

2、在文档中加载你选择的主题 CSS。

<!-- dark -->
<link rel="stylesheet" href="skins/dark.css">

<!-- light -->
<link rel="stylesheet" href="skins/light.css">

<!-- minimal -->
<link rel="stylesheet" href="skins/minimal.css">

3、向网页添加图片如下：

Data-LCL-TXT：图像描述
Data-LCL-作者：图像作者
Data-LCL-Thumb：路径到缩略图

<a class="elem" 
   href="large1.jpg" 
   title="image 1" 
   data-lcl-txt="Description 1" 
   data-lcl-author="Author 1" 
   data-lcl-thumb="thumb1.jpg">
  <span style="background-image: url(thumb1.jpg);"></span>
</a>

<a class="elem" 
   href="large2.jpg" 
   title="image 2" 
   data-lcl-txt="Description 2" 
   data-lcl-author="Author 2" 
   data-lcl-thumb="thumb2.jpg">
  <span style="background-image: url(thumb2.jpg);"></span>
</a>

<a class="elem" 
   href="large1.jpg" 
   title="image 3" 
   data-lcl-txt="Description 3" 
   data-lcl-author="Author 3" 
   data-lcl-thumb="thumb3.jpg">
  <span style="background-image: url(thumb3.jpg);"></span>
</a>

4、通过调用图片链接中的函数来启用 jQuery LC Lightbox。

lc_lightbox('.elem', {
  wrap_class: 'lcl_fade_oc',
  gallery : true, 
  thumb_attr: 'data-lcl-thumb', 
  skin: 'dark',
  // more options here
});

5、所有默认配置选项。

lc_lightbox('.elem', {

  // whether to display a single element or compose a gallery
  gallery     : true, 

  // attribute grouping elements - use false to create a gallery with all fetched elements 
  gallery_hook  : 'rel', 

  // if a selector is found, set true to handle automatically DOM changes
  live_elements : true, 

  // whether to preload all images on document ready
  preload_all   : false, 

  // force elements type
  global_type   : 'image', 
  
  // attribute containing element's source
  src_attr    : 'href', 

  // attribute containing the title - is possible to specify a selector with this syntax: "> .selector" or "> span" 
  title_attr    : 'title', 

  // attribute containing the description - is possible to specify a selector with this syntax: "> .selector" or "> span" 
  txt_attr    : 'data-lcl-txt', 

  // attribute containing the author - is possible to specify a selector with this syntax: "> .selector" or "> span" 
  author_attr   : 'data-lcl-author', 
  
  // whether to enable slideshow
  slideshow   : true, 

  // animation duration for lightbox opening and closing / 1000 = 1sec
  open_close_time : 500, 

  // overlay's animation advance (on opening) and delay (on close) to window / 1000 = sec
  ol_time_diff  : 100, 

  // elements fading animation duration in millisecods / 1000 = 1sec
  fading_time   : 150, 

  // sizing animation duration in millisecods / 1000 = 1sec
  animation_time  : 300, 

  // slideshow interval duration in milliseconds / 1000 = 1sec
  slideshow_time  : 6000, 

  // autoplay slideshow - bool
  autoplay    : false, 

  // whether to display elements counter
  counter     : false, 

  // whether to display a progressbar when slideshow runs
  progressbar   : true, 

  // whether to create a non-stop pagination cycling elements
  carousel    : true, 
  
  // Lightbox maximum width. 
  // Use a responsive percent value or an integer for static pixel value
  max_width   : '93%', 

  // Lightbox maximum height. 
  // Use a responsive percent value or an integer for static pixel value
  max_height    : '93%', 

  // overlay opacity / value between 0 and 1
  ol_opacity    : 0.7, 

  // background color of the overlay
  ol_color    : '#111', 

  // overlay patterns - insert the pattern name or false
  ol_pattern    : false, 

  // width of the lightbox border in pixels 
  border_w    : 3, 

  // color of the lightbox border
  border_col    : '#ddd', 

  // width of the lightbox padding in pixels
  padding     : 10, 

  // lightbox border radius in pixels 
  radius      : 4, 

  // whether to apply a shadow around lightbox window
  shadow      : true, 

  // whether to hide page's vertical scroller
  remove_scrollbar: true, 
  
  // custom classes added to wrapper - for custom styling/tracking
  wrap_class    : '', 

  // light / dark / Minimal
  skin      : 'light', 

  // over / under / lside / rside
  data_position : 'over', 

  // inner / outer
  cmd_position  : 'inner',  

  // set closing button position for inner commands - normal/corner 
  ins_close_pos : 'normal', 

  // set arrows and play/pause position - normal/middle
  nav_btn_pos   : 'normal', 
  
  // whether to hide texts on lightbox opening - bool or int (related to browser's smaller side)
  txt_hidden    : 500, 

  // bool / whether to display titles
  show_title    : true, 

  // bool / whether to display descriptions
  show_descr    : true, 

  // bool / whether to display authors
  show_author   : true, 
  
  // enables thumbnails navigation (requires elements poster or images)
  thumbs_nav    : true, 

  // print type icons on thumbs if types are mixed
  tn_icons    : true, 

  // whether to hide thumbs nav on lightbox opening - bool or int (related to browser's smaller side)
  tn_hidden   : 500, 

  // width of the thumbs for the standard lightbox
  thumbs_w    : 110, 

  // height of the thumbs for the standard lightbox
  thumbs_h    : 110, 

  // attribute containing thumb URL to use or false to use thumbs maker
  thumb_attr    : false, 

  // script baseurl to create thumbnails (use src=%URL% w=%W% h=%H%)
  thumbs_maker_url: false, 
  
  // Allow the user to expand a resized image. true/false
  fullscreen    : true, 

  // resize mode of the fullscreen image - smart/fit/fill
  fs_img_behavior : 'fit', 

  // when directly open in fullscreen mode - bool or int (related to browser's smaller side)
  fs_only     : 500, 

  // whether to trigger or nor browser fullscreen mode
  browser_fs_mode : true, 
  
  // bool
  socials     : true, 

  // 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 <a href="https://www.jqueryscript.net/tags.php?/Facebook/">Facebook</a> 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%
  fb_share_params : false,

  // bool / allow text hiding
  txt_toggle_cmd  : true, 

  // bool / whether to add download button
  download    : true, 

  // bool / Allow touch interactions for mobile (requires AlloyFinger)
  touchswipe    : true, 

  // bool / Allow elements navigation with mousewheel
  mousewheel    : true, 

  // enable modal mode (no closing on overlay click)
  modal     : false, 

  // whether to avoid right click on lightbox
  rclick_prevent  : false
  
});

6、函数与回调。

lc_lightbox('.elem', {

  elems_parsed  : function() {},
  html_is_ready   : function() {},
  on_open     : function() {},
  on_elem_switch  : function() {},
  slideshow_start : function() {},
  slideshow_end : function() {},
  on_fs_enter   : function() {},
  on_fs_exit    : function() {},
  on_close    : function() {},
  
});

初始发布：2026年4月7日