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. （转）MySQL的JDBC驱动源码解析

    一.背景 MySQL是一个中小型关系型数据库管理系统,目前我们淘宝也使用的也非常广泛.为了对开发中间DAO持久层的问题能有更深的理解以及最近在使用的phoenix on Hbase的SQL也是实现的J ...

  2. poj 2778 AC自己主动机 + 矩阵高速幂

    // poj 2778 AC自己主动机 + 矩阵高速幂 // // 题目链接: // // http://poj.org/problem?id=2778 // // 解题思路: // // 建立AC自 ...

  3. 【ACM】Largest prime factor

    /*打表把素数能组合的数先设置成相应的位数*/ /* if n equals two and n is No.1 position of prime factors  so four position ...

  4. 小白系列-免费广告路由器web认证设置(2)

    要设置认证页面图片.须要到后台注冊一个帐号,绑定路由器. 路由器管理后台网址 http://115.29.12.130/router 第一步:自己主动获取一个路由器ID(上一篇文章中的路由器ID也要改 ...

  5. 解决Android NDK 报jxxx编译找不到

    如题 解决: 引入NDK对应的arm或者x86库 如果你用的是GinyMotion模拟器,那就引入x86库 不多说了,见截图 1.选择Propertities->C/C++ General-&g ...

  6. WebService 之 WSDL详解

    WSDL (Web Services Description Language,Web服务描述语言)是一种XML Application,他将Web服务描述定义为一组服务访问点,客户端可以通过这些服务 ...

  7. Firefly 流程架构

    print '----startmaster------' 1print '----appmain------' 2 print '----netserver------' 3 print '---- ...

  8. 算法笔记_074:子集和问题（Java）

    目录 1 问题描述 2 解决方案 2.1 全排列思想求解 2.2 状态空间树思想求解   1 问题描述 求n个正整数构成的一个给定集合A = {a1,a2,a3,...,an}的子集,子集的和要等于一 ...

  9. TP框架模板中默认值输出

    TP框架模板中默认值输出 我们可以给变量输出提供默认值,例如: {$user.nickname|default="这家伙很懒,什么也没留下"} 对系统变量依然可以支持默认值输出,例 ...

  10. centos无法安装vmvare-tools的问题

    不要使用 vmware 自带的 tools, 版本太老了. 从这里下载:https://github.com/rasa/vmware-tools-patches.git 直接下载或者使用下面的命令: ...