强大的图片画廊式jquery Lightbox插件

LC Lightbox是一款强大的图片画廊式jquery Lightbox插件。LC Lightbox采用响应式设计，功能强大，支持移动手机，支持缩略图等，是现代网页设计的首选lightbox插件。LC Lightbox插件的特点还有：

• 支持单张图片或图片画廊模式。
• 支持图片预加载。
• 内置light、dark 和 minimal三种主题样式。
• 可定制缩略图导航。
• 支持分享和下载图片。
• 支持全屏模式。
• 支持移动手机的滑动和桌面浏览器的鼠标滚轮事件。
• 提供大量的配置参数可供使用。

使用方法

在页面中引入jquery和lc_lightbox.lite.js文件，以及样式文件lc_lightbox.css。在三种主题中选择一种来使用，引入相应的css文件。

伪类支持移动设备的手指滑动事件，还需要引入AlloyFinger插件。

<link rel="stylesheet" href="path/to/lc_lightbox.css">
<link rel="stylesheet" href="path/to/skins/dark.css">
<!-- 或者 -->
<!--
<link rel="stylesheet" href="path/to/skins/light.css">
<link rel="stylesheet" href="path/to/skins/minimal.css">
-->
<script src="path/to/jquery.min.js"></script>
<script src="path/to/lc_lightbox.lite.js"></script>
<script src="path/to/alloy_finger.min.js"></script>
                

HTML结构

该LC Lightbox插件的基本HTML结构如下：

<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>     
                

其中，data-lcl-txt是图片的描述信息。data-lcl-author是图片的作者信息。data-lcl-thumb是缩略图的路径。

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jquery Lightbox插件。

$(document).ready(function() {
    lc_lightbox('.elem', {
        wrap_class: 'lcl_fade_oc',
        gallery : true, 
        thumb_attr: 'data-lcl-thumb', 
        skin: 'dark'
    }); 
});
                

配置参数

LC Lightbox插件的所有可用配置参数如下，具体请参考官方说明文档。

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, 

  // 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
  
});                   
                

LC Lightbox-jquery Lightbox插件的github地址为：https://github.com/LCweb-ita/LC-Lightbox-LITE