jquery Fancybox使用教程

最新推荐文章于 2025-06-21 16:18:41 发布

weixin_30563319

最新推荐文章于 2025-06-21 16:18:41 发布

阅读量460

点赞数

CC 4.0 BY-SA版权

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/phpddt/p/3162871.html

Fancybox是一款基于jQuery的图片展示插件，支持多种媒体格式，并可通过CSS自定义外观。本文介绍如何引入所需文件并提供了一个简单的图片展示示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery Fancybox使用教程

Fancybox是一款基于jquery的对图片展示播放的插件，当然，它html文本、flash动画、iframe以及ajax也予以支持。还可以通过css自定义外观，阴影效果超级赞！

演示效果：http://www.phpddt.com/demo/fancyBox/demo/index.html
使用教程也是相当简单：

首先当然是要引入jquery核心库和Fancybox插件库：

<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>

如果你要实现图片滚轮效果，引入下面文件：

<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

FancyBox核心js和css文件：

<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>

<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

如果你需要按钮效果，引入按钮css文件：

<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />

<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

如果你要实现缩略图效果，引入：

<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />

<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

如果要动态加载媒体，引入：

<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

下面是一个最简单的图片展示例子：

<!DOCTYPE html>
<html>
<head>
    <title>fancyBox使用教程 -  PHP点点通(www.phpddt.com)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('.fancybox').fancybox();
            $(".fancybox-effects-a").fancybox({
                helpers: {
                    title : {
                        type : 'outside'
                    },
                    overlay : {
                        speedOut : 0
                    }
                }
            });
        });
    </script>
    <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }
        body {
            max-width: 700px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h3>对简单图片展示</h3>
    <p>
        <a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" /></a>
    </p>
</body>
</html>