FancyBox-jQuery插件 简单而别致的lightbox替代品
  • 分享到微信朋友圈
    X
立即下载 查看演示

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

优点

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

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

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

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

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

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

主要js

<script type="text/javascript">
    $(document).ready(function () {
        $("a[rel=example_group]").fancybox({
            'transitionIn': 'none',
            'transitionOut': 'none',
            'titlePosition': 'over',
            'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image：' + (currentIndex + 1) + ' / ' + currentArray.length + '</span><strong>' + (title.length ? ' &nbsp; ' + title : '') + '</strong>';
            }
        });
    });
</script>