jQuery Lightbox实现弹出层图片轮播特效

简要教程

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'
  
});