FancyBox单图片和多图片弹窗插件
  • 分享到微信朋友圈
    X

本文介绍如何使用FancyBox预览单个图片和多个图片, FancyBox 是一款基于 jquery 开发的类 Lightbox 插件。支持图像、视频、地图、内联内容、iframe 和任何其他 HTML 内容。

优点

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

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

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

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

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

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

如何使用:

引用jQuery.js 和 fancybox.js

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox.js" type="text/javascript"></script>

调用 fancybox.js

<script type="text/javascript">
    $(document).ready(function () {
        $('.fancybox').fancybox();
    });
</script>