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>

效果如如下：

更多FancyBox参数及选项配置如下：

下载：fancyBox-master.zip  （点击这里演示）

欢迎转载！ 原文地址: http://www.phpddt.com/dhtml/jquery-fancybox.html ，转载请注明地址，谢谢！

jquery Fancybox使用教程的更多相关文章

  1. jQuery Colorbox使用教程

    jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,最关键的是大小只有10KB,当然我主要是用来弹出图片啦,(之前介绍过jquery Fancybox插件,个人很喜欢).jQuery ...

  2. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  3. 【转载】jQuery Validate 菜鸟教程

    文章1:http://www.runoob.com/jquery/jquery-plugin-validate.html          (jQuery Validate 菜鸟教程)

  4. jQuery插件开发详细教程

    这篇文章主要介绍了jQuery插件开发详细教程,将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱,需要的朋友可以参考下 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间. ...

  5. 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

    阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...

  6. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  7. jquery ajax实例教程和一些高级用法

    jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...

  8. 《JQuery常用插件教程》系列分享专栏

    <JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...

  9. jQuery插件开发精品教程，让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

随机推荐

  1. RocketMQ 拉取消息-文件获取

    看完了上一篇的<RocketMQ 拉取消息-通信模块>,请求进入PullMessageProcessor中,接着 PullMessageProcessor.processRequest(f ...

  2. 在 TDA 工具里看到 Java Thread State 的第一反应是

    转载:http://itindex.net/detail/43158-tda-%E5%B7%A5%E5%85%B7-java   使用 TDA 工具,看到大量 Java Thread State 的第 ...

  3. FTP服务器配置

    一.FTP服务器: FTP服务使用FTP协议来进行文件的上传和下载,可以非常方便的进行远距离的文件传输,并可以实现相应的安全控制. FTP和NFS.Samba :三大文件服务器 主动模式:消息端口21 ...

  4. java泛型介绍

    一.泛型初衷 Java集合不会知道我们需要用它来保存什么类型的对象,所以他们把集合设计成能保存任何类型的对象,只要就具有很好的通用性.但这样做也带来两个问题: –集合对元素类型没有任何限制,这样可能引 ...

  5. JAVA学习笔记 -- 读写XML

    XML是一种可扩展标记语言 以下是一个完整的XML文件(也是下文介绍读写XML的样本): <? xml version="1.0" encoding="UTF-8& ...

  6. 更轻便的markdown 编辑器Typora

    更轻便的markdown 编辑器 Typora 所见即所得的键入方式 https://typora.io 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论.

  7. http keep-alive 解释

    1.概念 keep-alive示例: keep-alive模式(又称持久连接.连接重用)时,keep-alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,keep-alive功 ...

  8. 前端工程化 ESlint 配置

    1.使用的标准 // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends ...

  9. RelativeLayout与LinearLayout的比较

    转自:http://blog.csdn.net/onepiece2/article/details/26396287 RelativeLayout 是相对布局在页面上相对于页面坐标进行布局设置.比如可 ...

  10. Python-绑定与未绑定方法通俗讲解

    像函数一样,Python中的类方法也是一种对象.由于既可以通过实例也可以通过类来访问方法,所以在Python里有两种风格:   未绑定的类方法:没有self     通过类来引用方法返回一个未绑定方法 ...