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. linux mysql 更改MySQL数据库目录位置

    MySQL默认的数据文件存储目录为/var/lib/mysql.假如要把目录移到/home/data下需要进行下面几步: 1.home目录下建立data目录 cd /home mkdir data 2 ...

  2. 轻量级的前端UI开发框架 - UIkit

    来源:GBin1.com UIkit是YOOtheme团队开发的开源的前端UI界面框架,可以帮助你快速的开发和创建前端UI界面. 基于下列开源项目: LESS jQuery normalize.css ...

  3. 搭建dubbo-admin-2.5.3

    dubbo管理界面 一,安装zookeeper 1,下载包zookeeper-3.3.3.tar.gz 2,解压 tar zxvf zookeeper-3.3.3.tar.gz cd zookeepe ...

  4. iOS12适配指南

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

  5. iOS开发必备指南合集之游戏接入GameCenter 指南

    原地址:http://bbs.9ria.com/thread-248408-1-1.html iTunes Connect 设置 首先,申请一个应用程序,不必提交.目地是为了得到Bundle ID.  ...

  6. springmvc使用实体參数和ServletAPI

    一. 实体參数 前面我们知道使用注解@RequestParam能够获得參数的值,那么如今提交一个表单怎么获得当中的值了.你能够说能够使用request.getParameter("" ...

  7. （七）Oracle学习笔记—— 游标

    1.游标简介 游标用来处理从数据库中检索的多行记录(使用SELECT语句).利用游标,程序可以逐个地处理和遍历一次检索返回的整个记录集. 为了处理SQL语句,Oracle将在内存中分配一个区域,这就是 ...

  8. Exception sending context initialized event to listener instance of class ssm.blog.listener.InitBloggerData java.lang.NullPointerException at ssm.blog.listener.InitBloggerData.c

     spring注入是分两部分执行的     首先是 先把需要注入的对象加载到spring容器     然后在把对象注入到具体需要注入的对象里面   这种就是配置和注解的注入    getbean方式其 ...

  9. 使用QQ互联登录应用

    QQ登录集成插件简介 互联网应用越来越多,通常每一个应用都会要求用户注册登录,粗略估记一下,QQ,微博,微信,银行帐号.邮箱,招聘网站账户,淘宝帐号,支付宝帐号,公司OA帐号....粗略算一下,十几个 ...

  10. node.js零基础详细教程(6)：mongodb数据库操作 以及导入导出

    第六章 建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...