当前位置：首页 > 网页特效 > 图片特效

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

分类：图片特效日期：2024-05-14 点击(3) 评论(0)

简介

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

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

```html
<link rel="stylesheet" href="path/to/lc_lightbox.css">
<link rel="stylesheet" href="path/to/skins/dark.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结构如下：

```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插件。

```html
$(document).ready(function() {
    lc_lightbox('.elem', {
        wrap_class: 'lcl_fade_oc',
        gallery : true, 
        thumb_attr: 'data-lcl-thumb', 
        skin: 'dark'
    }); 
});
```
#####  配置参数
LC Lightbox插件的所有可用配置参数如下，具体请参考官方说明文档。

```html
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
   
});                  
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果