强大jquery图片画廊Lightbox插件

PetitQ Lightbox/弹窗 2018-10-26 1.46K 0 0

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

强大 jquery 图片画廊 Lightbox 插件

已有 366 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Lightbox/弹窗

强大jquery图片画廊Lightbox插件

使用方法：

HTML 结构：

初始化插件：

配置参数：

强大 jquery 图片画廊 Lightbox 插件

相关文章

超酷jQuery+css3图片预览插件

flashy - 弹出层Lightbox相册插件

lightcase - 智能灵活Lightbox相册插件

发表回复取消回复

热销模板

Lightbox/弹窗

使用方法：

HTML 结构：

初始化插件：

配置参数：

强大 jquery 图片画廊 Lightbox 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复