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. 接口测试框架开发（三）：maven+restAssured+Excel（jxl）+testng+extentreports的接口自动化

    1.http://www.cnblogs.com/lin-123/p/7151031.html 2.http://www.cnblogs.com/lin-123/p/7151046.html 3.ht ...

  2. 进程上下文切换 – 残酷的性能杀手（上）(转载cppthinker.com)

    对于服务器的优化,很多人都有自己的经验和见解,但就我观察,有两点常常会被人忽视 – 上下文切换 和 Cache Line同步 问题,人们往往都会习惯性地把视线集中在尽力减少内存拷贝,减少IO次数这样的 ...

  3. malloc、calloc、realloc的区别（转）

    (1)C语言跟内存分配方式 <1>从静态存储区域分配.       内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量.static变量.<2> ...

  4. dmesg 时间转换脚本

    https://linuxaria.com/article/how-to-make-dmesg-timestamp-human-readable perl脚本 #!/usr/bin/perl use ...

  5. 【DB2】DbVisualizer编译存储过程

    之前我一直以为DbVisualizer是不可以编译存储过程的,现在才发现是可以的,编译如下: 只需要在编译的时候注意使用--/与/将存储过程包为起来编辑即可.

  6. （一）Solr——简介和安装配置

    1. solr简介 1.1 Solr是什么 Solr是apache的顶级开源项目,它是使用java开发 ,基于lucene的全文检索服务器. Solr和lucene的版本是同步更新的,最新的版本是7. ...

  7. sklearn word2vec 实践

    源代码: https://blog.csdn.net/github_38705794/article/details/75452729 一.复现时报错: Traceback (most recent ...

  8. 1px 下划线solid的问题

    1 物理像素线,也就是普通屏幕下 1px,高清屏幕下 0.5px的情况,采用transform属性 scale 实现即可. .mod_grid { position: relative; &: ...

  9. Codeforces Round #265 (Div. 2) B. Inbox (100500)

    Over time, Alexey's mail box got littered with too many letters. Some of them are read, while others ...

  10. Powershell分支条件

    Where-Object 进行条件判断很方便,如果在判断后执行很多代码可以使用IF-ELSEIF-ELSE语句.语句模板: If(条件满足){如果条件满足就执行代码}Else{如果条件不满足}条件判断 ...