文档章节

jquery Fancybox使用教程

mckee
 mckee
发布于 2013/06/29 21:53
字数 454
阅读 1450
收藏 13

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>



效果如如下:

jquery Fancybox演示教程

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

FancyBox参数及选项配置

下载:fancyBox-master.zip  (点击这里演示

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

© 著作权归作者所有

mckee
粉丝 1
博文 8
码字总数 5157
作品 0
闵行
程序员
私信 提问
加载中

评论(1)

子弹兄
子弹兄
一直在用,不过有一点,好像和百度统计冲突,不知道如何解决
jQuery 1.5 + FancyBox 在 IE9 下的问题

今天在做个人空间改版的时候发现了这样一个问题: 软件: jQuery 1.5 正式版 FancyBox 1.3.4 使用的是最新的 IE9 RC 版本,无法打开 FancyBox 弹出窗口 而换成 jQuery 1.4.x 版本后,就可以正...

红薯
2011/02/14
1K
3
FancyBox ,比LightBox更绚丽的效果

官方教程: 1,首先,你应当确定你的文档中应有一个有效的文档声明(即DOCTYPE声明),这是保证FancyBox效果能正常实现的前提条件。 2,请将以下js文件包含在你的效果展示页面 < script type ...

红薯
2011/01/23
3.3K
4
jQuery Fancybox插件使用参数详解

今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的。 Fancybox的项目主页地址:http://fancybox.net/ Fancybox的特点...

欣儿
2014/04/18
3.9K
0
FancyBox 2.0 发布,全新的 jQuery 弹出层

FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自...

红薯
2011/11/23
8.2K
10
【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox。它除了能够展示图片之外,还可以展示 flash、iframe 内容、html 文本以及 ajax 调用,我们可以通过 css 来自定义外观。 fancybox...

chaun
2015/05/27
203
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周四乱弹 —— 干啥啥不行,吃饭第一名。

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 : 李白到杜甫家吃饭。杜甫洗菜,发现只有青瓜和萝卜,心中愧疚。这时,他看见了邻居家的鸡,杜甫一时心酸,忍不住喃喃自语:我希望...

小小编辑
20分钟前
78
7
Java描述设计模式(08):桥接模式

本文源码:GitHub·点这里 || GitEE·点这里 一、桥接模式简介 1、基础描述 桥梁模式是对象的结构模式。又称为柄体(Handle and Body)模式或接口(Interface)模式。桥梁模式的用意是“将抽象化...

知了一笑
20分钟前
4
0
C++ 函数指针的用法

天王盖地虎626
35分钟前
1
0
白话比原链跨链技术

随着Bystack的主侧链架构的推出,主侧链之间的跨链问题也成为比原链团队的主要攻克工程难题,当前比原链已经推出了两种跨链的机制,各有不同的侧重点,可能因为本身的跨链技术比较晦涩,本篇...

比原链Bytom
43分钟前
2
0
PostgreSQL参数search_path影响及作用

search_path稍微熟悉PG就会用到,用法这里就不必讲,本篇主要讲它在程序里怎样处理。 1、GUC参数定义 这是个 config_string 参数 {{"search_path", PGC_USERSET, CLIENT_CONN_STATEMENT,...

有理想的猪
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部