jquery Fancybox插件的应用

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>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<scripttype="text/javascript"src="../lib/jquery-1.10.1.min.js"></script>
<scripttype="text/javascript"src="../source/jquery.fancybox.js?v=2.1.5"></script>
<linkrel="stylesheet"type="text/css"href="../source/jquery.fancybox.css?v=2.1.5"media="screen"/>
<scripttype="text/javascript">
$(document).ready(function(){
$('.fancybox').fancybox();
$(".fancybox-effects-a").fancybox({
helpers:{
title :{
type :'outside'
},
overlay :{
speedOut :0
}
}
});
});
</script>
<styletype="text/css">
.fancybox-custom .fancybox-skin {
box-shadow:0050px#222;
}
body {
max-width:700px;
margin:0auto;
}
</style>
</head>
<body>
<h3>对简单图片展示</h3>
<p>
<aclass="fancybox"href="1_b.jpg"data-fancybox-group="gallery"title="Lorem ipsum dolor sit amet"><imgsrc="1_s.jpg"/></a>
</p>
</body>
</html>

效果如如下：

jquery Fancybox演示教程

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

FancyBox参数及选项配置

下载：fancyBox-master.zip （点击这里演示）

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

转载于:https://blog.51cto.com/phpddt/1235577

jquery Fancybox插件的应用相关推荐

jquery fancybox插件
1. 介绍 fancyBox 是一个 JavaScript 库,它以优雅的方式展示图片,视频和一些 html 内容.它包含你所期望的一切特性 -- 支持触屏,响应式和高度自定义. 1.1 依赖推荐 ...
fancybox ajax参数,jQuery Fancybox插件使用参数详解
今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...
fancybox ajax post,使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式.通过模态窗口,可以提高网站的可用性.正好项目的需要,有个客户想要模态弹出的窗体来提交网站的反馈,经过一番测试实现了,我使用jQuer ...
FancyBox - 经典的 jQuery Lightbox 插件
FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...
超强1000个jquery极品插件！（连载中。。。。最近更新20090710）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
jquery Fancybox使用教程
jquery Fancybox使用教程 Fancybox是一款基于jquery的对图片展示播放的插件,当然,它html文本.flash动画.iframe以及ajax也予以支持.还可以通过css自定义外 ...
超强1000个jquery极品插件！（感觉好强大，转载一下）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
超强1000个jquery极品插件！
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 +++++++++++++ ...
超强1000个jquery极品插件！（连载中。。。。最近更新20100127）
1.导航类 (1) Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 二手图书二手书特价书旧书网 (2)jQuery-Horizont ...

jquery Fancybox插件的应用

jquery Fancybox插件的应用相关推荐

最新文章

热门文章