jquery.fancybox.js点击列表图片弹出大图效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jquery.fancybox.js点击列表图片弹出大图效果， Fancybox是一款基于jQuery的强大插件，为多媒体显示的优质用户体验设定了标准。支持图像、视频、地图、内联内容、iframe 和任何其他 HTML 内容。

优点

  • 可以显示图像、HTML 元素、SWF 电影、Iframe 以及 Ajax 请求

  • 可通过设置和 CSS 进行自定义

  • 对相关项目进行分组并添加导航。

  • 如果页面中包含鼠标滚轮插件，那么 FancyBox 也会响应鼠标滚轮事件

  • 使用缓动插件支持花哨的过渡

  • 在缩放项目下添加漂亮的阴影

如何使用：

html

<a href="images/1.jpg" data-fancybox="gallery" data-caption="标题1">
    <div class="pic">
        <img src="images/1.jpg" />
    </div>
    <h2>
        标题1</h2>
</a>

创建元素并添加data-fancybox属性。使用href或data-src属性指定要在 Fancybox 中显示的内容源。 通过将相同的属性data-fancybox值添加到多个元素来创建列表图片弹出， （可选）使用data-caption属性在内容下显示标题。

引用jQuery.js 和 fancybox.js

<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.fancybox.min.js"></script>

调用 fancybox.js

<script>
    $('[data-fancybox="gallery"]').fancybox({
        buttons: ['close']
    });
</script>