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. openwrt web server

    刚刚群里又个同学问PHP页面放到哪个文件夹下. 我一想那得apache呀,于是我说你得先看自己的路由器能不能装的下apache. 但是回头他又问,那openwrt的页面怎么弄的? 我一时语塞,于是就百 ...

  2. [Functional Programming Monad] Combine Stateful Computations Using A State Monad

    The true power of the State ADT really shows when we start combining our discrete, stateful transact ...

  3. maven中如何指定jdk的版本

    问题再现: 当我们每次创建maven项目时,jdk的默认版本是1.5,而我们一般机器上安装的是1.7以上的版本,jdk版本不一样,遇到这种问题,有两种解决办法: 至于右键设置jdk版本不推荐,在此不作 ...

  4. iOS12适配指南

    1.重复文件报错 build Phases-> 删除多余的info.plist 2.library not found for -lstdc++ 苹果在XCode10和iOS12中移除了libs ...

  5. MVC 之 架构的基本原理及Asp.Net实现MVC

    一.引言 许多Web应用都是从数据存储中检索数据并将其显示给用户.在用户更改数据之后,系统再将更新内容存储到数据存储中.因为关键的信息流发生在数据存储和用户界面之间,所以很多应用将数据和用户界面这两部 ...

  6. NGUI图集切割代码

    原地址:http://blog.csdn.net/u011440375/article/details/9707491 因为最近工作用NGUI比较多,修改图集时还没原图,有时候需要把图集重新切割开来, ...

  7. <译>Flink编程指南

    Flink 的流数据 API 编程指南 Flink 的流数据处理程序是常规的程序 ,通过再流数据上,实现了各种转换 (比如 过滤, 更新中间状态, 定义窗口, 聚合).流数据可以来之多种数据源 (比如 ...

  8. JavaScript | JSON基本格式

    ————————————————————————————————————————————————————————— JSON 语法 "use strict"; // 简单值 &qu ...

  9. tableView 获取网络图片，并且设置为圆角(优化，fps)

    代码地址如下:http://www.demodashi.com/demo/11088.html 一.准备工作 例子比较精简,没有什么特殊要求,具备Xocde8.0左右版本的就好 二.程序实现 1.相关 ...

  10. Bootstrap-学习系列

    前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中,只有前两篇关于Bootstrap的文章发表在了博客园的首页 ...