当前位置：首页 > 网页特效 > Lightbox和对话框

支持移动手机的简洁jQuery图片LightBox插件

分类：Lightbox和对话框日期：2024-05-14 点击(5) 评论(0)

简介

##### HTML结构
该lightbox插件的基本HTML结构如下：

```html
<div class="gallery"> 
  <a href="images/image1.jpg" class="big"><img src="images/thumbs/thumb1.jpg" alt="" title="Image" /></a>
  <a href="images/image2.jpg"><img src="images/thumbs/thumb2.jpg" alt="" title=""/></a>
  <a href="images/image3.jpg"><img src="images/thumbs/thumb3.jpg" alt="" title="Beautiful Image"/></a>
  <a href="images/image4.jpg"><img src="images/thumbs/thumb4.jpg" alt="" title=""/></a>
  <div class="clear"></div>
   
  <a href="images/image5.jpg"><img src="images/thumbs/thumb5.jpg" alt="" title=""/></a>
  <a href="images/image6.jpg"><img src="images/thumbs/thumb6.jpg" alt="" title=""/></a>
  <a href="images/image7.jpg" class="big"><img src="images/thumbs/thumb7.jpg" alt="" title=""/></a>
  <a href="images/image8.jpg"><img src="images/thumbs/thumb8.jpg" alt="" title=""/></a>
  <div class="clear"></div>
   
  <a href="images/image9.jpg" class="big"><img src="images/thumbs/thumb9.jpg" alt="" title=""/></a>
  <a href="images/image10.jpg"><img src="images/thumbs/thumb10.jpg" alt="" title=""/></a>
  <a href="images/image11.jpg"><img src="images/thumbs/thumb11.jpg" alt="" title=""/></a>
  <a href="images/image12.jpg"><img src="images/thumbs/thumb12.jpg" alt="" title=""/></a>
  <div class="clear"></div>
   
</div>  
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该Lightbox插件。

```html
var lightbox = $('.gallery a').simpleLightbox(options);    
```           
#####  配置参数
|  参数 | 类型  | 默认值  |  描述 |
| ------------ | ------------ | ------------ | ------------ |
|overlay|true|bool|是否显示遮罩层|
|spinner|true|bool|是否显示加载指示器|
|nav|true|bool|是否显示左右导航箭头|
|navText|[←‘,’→‘]|array|导航箭头文字或HTML标签|
|captions|true|bool|是否显示标题|
|captionSelector|'img'|string|如何获取标题，可以在 attr, data 或 text之间选择|
|captionType|'attr'|string|是否显示标题|
|captionsData|title|string|从给定的属性或data-title获取标题|
|close|true|bool|是否显示关闭按钮|
|closeText|'X'|string|关闭按钮上的文本|
|showCounter|true|bool|是否显示当前图片的序号|
|fileExt|png|jpg|jpeg|gif|regexp|图片文件类型扩展名的正则表达式|
|animationSpeed|250|int|幻灯片模式中slide的动画速度|
|preloading|true|bool|是否预加载前一张和下一张图片|
|enableKeyboard|true|bool|是否允许键盘导航和使用ESC键关闭|
|loop|true|bool|是否循环图片|
|docClose|true|bool|是否在点击lightbox之外的区域时关闭它|
|swipeTolerance|50|int|swipe多少像素才显示下一张图片|
|className|'simple-lightbox'|string|包裹容器的class名称|
|widthRatio|0.8|float|图片宽度和屏幕宽度的比例|
|heightRatio|0.9|float|图片高度和屏幕高度的比例|
#####  事件
|  事件名称 | 描述  |
| ------------ | ------------ |
| open.simplelightbox| 该事件在lightbox打开之前触发| 
| opened.simplelightbox| 该事件在lightbox打开之后触发| 
| close.simplelightbox| 该事件在lightbox关闭之前触发| 
| closed.simplelightbox| 该事件在lightbox关闭之后触发| 
##### 示例代码

```html
$('.gallery a').on('open.simplelightbox', function () {
  // do something…
});  
```
#####  公共方法
| 名称  |  描述 |
| ------------ | ------------ |
|open|通过给定的JQuery元素打开lightbox|
|close|表格当前打开的Lightbox|
|next|跳转到下一张图片|
|prev|跳转到前一张图片|
|destroy|销毁lightbox实例对象|
##### 示例代码：

```html
var gallery = $('.gallery a').simpleLightbox();
 
gallery.next(); // Next Image  
```

web299.com

支持移动手机的简洁jQuery图片LightBox插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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