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
