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

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

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

支持项目计数。

支持移动设备的swipe事件。

支持预加载动画

支持键盘导航,和ESC键退出。

支持视频自动播放。

支持无限循环。

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

1
2
3
<link rel="stylesheet" href="css/flashy.min.css">
<script src="jquery.min.js"></script>
<script src="jquery.flashy.min.js"></script>

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

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

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

1
2
3
4
5
6
7
8
9
10
11
<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()方法来初始化该插件。

1
2
3
$(document).ready(function(){
  $('.demo').flashy();
});

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('.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'
   
});

文件信息:

    5

    发表评论