flashy - 弹出层Lightbox相册插件

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

Flashy.js 是一款响应式 jQuery Lightbox 和弹出层插件。该 jQuery Lightbox 和弹出层插件支持图片，内联内容，iframes，以及 vimeo 和 youtube 视频，功能非常强大。它的特点还有：

支持项目计数

也想出现在这里？联系我们吧

支持移动设备的 swipe 事件

支持预加载动画

支持键盘导航，和 ESC 键退出

支持视频自动播放

支持无限循环

使用方法：

在页面中引入 flashy.min.css 和 jquery 以及 jquery.flashy.min.js 文件。

<link rel="stylesheet" href="css/flashy.min.css">

```
<script src="jquery.min.js"></script>
```

<script src="jquery.flashy.min.js"></script>

如果你需要添加更加炫酷的切换效果，可以引入 effect.css 文件。

<link rel="stylesheet" href="css/effect.css">

HTML 结构：

然后在页面中创建一组需要展示的内容，结构如下：

<a class="demo" href="image-big.jpg"><img src="image-small.jpg" alt="image alt"/></a>

<a class="demo" data-flashy-type="video" href="https://vimeo.com/271516323">Vimeo</a>

<a class="demo" data-flashy-type="video" href="https://youtu.be/dzNvk80XY9s">YouTube</a>

<a class="demo" data-flashy-type="iframe" href="https://example.com/">iFrame</a>

<a class="demo" data-flashy-type="inline" href="#inline">Inline</a>

```
<div id="inline" style="display:none">
```
```
  <div class="inline">
```
```
   
```
```
  </div>
```
```
</div>
```

初始化插件：

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

```
$(document).ready(function(){
```
```
  $('.demo').flashy(); 
```
```
});
```

或者在初始化是传入配置参数：

```
$('.demo').flashy({
```
```
 
```
```
  // Applied when a new item is shown
```
```
  showClass: 'fx-fadeIn',
```
```
 
```
```
  // Applied when a new item is hidden
```
```
  hideClass: 'fx-fadeOut'
```
```
 
```

  // Applied when a new item is shown on prev event

```
  prevShowClass: 'fx-bounceInLeft',
```
```
 
```

  // Applied when a new item is shown on next event

```
  nextShowClass: 'fx-bounceInRight',
```
```
 
```

  // Applied when the current item is hidden on prev event

```
  prevHideClass: 'fx-bounceOutRight',
```
```
 
```

  // Applied when the current item is hidden on next event

```
  nextHideClass: 'fx-bounceOutLeft'
```
```
 
```
```
});
```

配置参数：

Flashy.js 插件可用的配置参数有：

```
$('.mixed').flashy({
```
```
 
```
```
  // image, inline, ajax, iframe, video
```
```
  type: 'image',
```
```
 
```
```
  // show title
```
```
  title: true,
```
```
 
```

  // can be any CSS valid unit - px, %, and etc

```
  width: null,
```
```
  height: null,
```
```
 
```
```
  // enable/disable gallery mode
```
```
  gallery: true, 
```
```
 
```
```
  // enable/disable infinite loop
```
```
  galleryLoop: true, 
```
```
 
```
```
  // show item counter
```
```
  galleryCounter: true, 
```
```
 
```

  // show prev and next navigation controls

```
  galleryPrevNext: true, 
```
```
 
```

  // message used in the item counter. If empty, no counter will be displayed

  galleryCounterMessage: '[index] / [total]',

```
 
```
```
  // enable/disable swipe on desktop
```
```
  gallerySwipeDesktop: true, 
```
```
 
```

  // enable/disable swipe on mobile devices

```
  gallerySwipeMobile: true, 
```
```
 
```
```
  // set swipe threshold in px
```
```
  gallerySwipeThreshold: 100, 
```
```
 
```

  // enable/disable keyboard navigation with arrows and close with ESC

```
  keyboard: true, 
```
```
 
```

  // close lightbox via the close button or overlay click

```
  overlayClose: false, 
```
```
 
```

  // additional css classes for customization

```
  themeClass: null, 
```
```
 
```
```
  // enable/Disable video autoplay
```
```
  videoAutoPlay: false, 
```
```
 
```

  // error message displayed when a content fails to load

  loadError: 'Sorry, an error occured while loading the content...'

```
 
```
```
});
```

Flashy.js 响应式 jQuery Lightbox 和弹出层插件的 github 地址为：https://github.com/avirtum/flashy

flashy - 弹出层 Lightbox 相册插件

已有 419 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

Lightbox/弹窗

flashy - 弹出层Lightbox相册插件

使用方法：

HTML 结构：

初始化插件：

配置参数：

flashy - 弹出层 Lightbox 相册插件

相关文章

纯js实用响应式lightbox插件

触屏响应式jQuery lightbox插件

酷轮播图效果Lightbox弹出层插件

发表回复取消回复

热销模板

Lightbox/弹窗

使用方法：

HTML 结构：

初始化插件：

配置参数：

flashy - 弹出层 Lightbox 相册插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复