jquery图片播放插件Fancybox(灯箱)
Fancybox的特点如下:
- 可以支持图片、html文本、flash动画、iframe以及ajax的支持
- 可以自定义播放器的CSS样式
- 可以以组的形式进行播放
- 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
- Fancybox播放器支持投影,更有立体的感觉
Fancybox使用方法:
1、引入jquery核心库和Fancybox插件库
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
可选 - 如果需要用到fancy transition(一些动画效果)你还需要引入以下脚本
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
可选 - 如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
2、添加样式表文件
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
3、在页面上创建链接元素
A、图片元素
<a id="single_image" href="image_big.jpg"><img src="data:image_small.jpg" kesrc="data:image_small.jpg" alt=""></a>
B、普通文本
<a id="inline" href="#data" kesrc="#data">This shows content of element who has id="data"</a> <div style="display: none;">
<div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
4、最终的jquery初始化代码
$(document).ready(function() { /* 最基本的,使用了默认配置 */ $("a#single_image").fancybox(); /* 使用了自定义配置 */ $("a#inline").fancybox({
'hideOnContentClick': true
}); /* 一下配置支持组播放 */ $("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : ,
'speedOut' : ,
'overlayShow' : false
}); });
//用rel标签来创建相册 <a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="data:image_small_1.jpg" alt=""></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="data:image_small_2.jpg" alt=""></a> <a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="data:image_small_3.jpg" alt=""></a>
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="data:image_small_4.jpg" alt=""></a> $("a.grouped_elements").fancybox();
Fancybox的API和配置选项说明
属性名 | 默认值 | 简要说明 |
---|---|---|
padding | 10 | 浏览框内边距,和css中的padding一个意思 |
margin | 20 | 浏览框外边距,和css中的margin一个意思 |
opacity | false | 如果为true,则fancybox在动画改变的时候透明度可以跟着改变 |
modal | false | 如果为true,则'overlayShow' 会被设成 'true' , 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 会被设成 'false' |
cyclic | false | 如果为true,相册会循环播放 |
scrolling | 'auto' | 设置overflow的值来创建或隐藏滚动条,可以设置成 'auto', 'yes', or 'no' |
width | 560 | 设置iframe和swf的宽度,如果 'autoDimensions'为 'false',这也可以设置普通文本的宽度 |
height | 340 | 设置iframe和swf的高度,如果 'autoDimensions'为 'false',这也可以设置普通文本的高度 |
autoScale | true | 如果为true,fancybox可以自适应浏览器窗口大小 |
autoDimensions | true | 在内联文本和ajax中,设置是否动态调整元素的尺寸,如果为true,请确保你已经为元素设置了尺寸大小 |
centerOnScroll | false | 如果为true,当你滚动滚动条时,fancybox将会一直停留在浏览器中心 |
ajax | { } | 和jquery的ajax调用选项一样 注意: 'error' and 'success' 这两个回调事件会被fancybox重写 |
swf | {wmode: 'transparent'} | swf的设置选项 |
hideOnOverlayClick | true | 如果为true则点击遮罩层关闭fancybox |
hideOnContentClick | false | 如果为true则点击播放内容关闭fancybox |
overlayShow | true | 如果为true,则显示遮罩层 |
overlayOpacity | 0.3 | 遮罩层的透明度(范围0-1) |
overlayColor | '#666' | 遮罩层的背景颜色 |
titleShow | true | 如果为true,则显示标题 |
titlePosition | 'outside' | 设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over' |
titleFormat | null | 可以自定义标题的格式 |
transitionIn, transitionOut | 'fade' | 设置动画效果. 可以设置为 'elastic', 'fade' 或 'none' |
speedIn, speedOut | 300 | fade 和 elastic 动画切换的时间间隔, 以毫秒为单位 |
changeSpeed | 300 | 切换时fancybox尺寸的变化时间间隔(即变化的速度),以毫秒为单位 |
changeFade | 'fast' | 切换时内容淡入淡出的时间间隔(即变化的速度) |
easingIn, easingOut | 'swing' | 为 elastic 动画使用 Easing |
showCloseButton | true | 如果为true,则显示关闭按钮 |
showNavArrows | true | 如果为true,则显示上一张下一张导航箭头 |
enableEscapeButton | true | 如果为true,则启用ESC来关闭fancybox |
onStart | null | 回调函数,加载内容是触发 |
onCancel | null | 回调函数,取消加载内容后触发 |
onComplete | null | 回调函数,加载内容完成后触发 |
onCleanup | null | 回调函数,关闭fancybox前触发 |
onClosed | null | 回调函数,关闭fancybox后触发 |
jquery图片播放插件Fancybox(灯箱)的更多相关文章
- jquery图片播放插件Fancybox使用详解
今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...
- 分享8款精美的jQuery图片播放插件
本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究.废话不多说了,直接上这些插件. 1.3D轮播相册 这款3D相册插件利用了HTML5 ...
- 一款超炫的jquery图片播放插件[Cloud Carousel]
今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...
- jQuery图片播放插件prettyPhoto使用介绍
演示效果 http://www.17sucai.com/preview/131993/2014-07-09/mac-Bootstrap/gallery.html 点击之后的效果 使用方法 Query ...
- 美女jquery图片播放器插件
相册在线查看http://keleyi.com/keleyi/phtml/image/6.htm 可全屏,可拖动,可自动播放的jquery图片展示插件 使用说明:1.引用css文件:<link ...
- 十个jQuery图片画廊插件推荐
jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视.下面为你介绍了10个最有美感,创新性和创造性的jQu ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
- jQuery语音播放插件
自己做jQuery插件:将audio5js封装成jQuery语音播放插件 日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以 ...
随机推荐
- ImageButton如何让图片按比例缩放不被拉伸
了解 在安卓的界面XML中,ImageButton有这样一个属性android:scaleType,他干嘛的? ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例 ...
- java.util.Hashtable源码分析
Hashtable实现一个键值映射的表.任何非null的object可以用作key和value. 为了能存取对象,放在表里的对象必须实现hashCode和equals方法. 一个Hashtable有两 ...
- PHP权限分配思路
常见四种方式1.用户+组+角色+权限2.用户+组+权限3.用户+角色+权限(最多用)4.用户+权限以第三种为例:权限:用户操作的具体事件:如curd角色:指一类用户拥有的权限,如超级管理员,管理员,普 ...
- Asp.Net细节性问题精萃
1.<%=…%>与<%#… %>的区别: 答:<%=…%>是在程序执行时调用,<%#… %>是在DataBind()方法之后被调用 2.控件接收哪些类型 ...
- 在网页中插入qq连接
<a href="tencent://message/?uin=这里写qq号 &Site=这里随便七个名字 &Menu=要为yes">显示出来的名字&l ...
- AngularJS(4)-服务(Service)
1.$location服务 $location 服务,它可以返回当前页面的 URL 地址 2.$http服务 $http 是 AngularJS 应用中最常用的服务. 服务向服务器发送请求,应用响应服 ...
- 用javascript快速清空你的人人时间轴、状态和分享
博客已经迁移到www.imyzf.com,本站不再更新,请谅解! 现在玩人人的人越来越少了,很多人担心不玩以后东西放上面不安全..我也有同样的想法,但是手动删除上百条东西,太累了,于是写了些javas ...
- 使用pdb调试python
python pdb调试 python -m pdb myscript.py #注意这会重启myscript.py,这样启动的话,代码每一行都是一个节点 也可以在程序中这么设置断点: import p ...
- Java应用程序可执行jar文件与服务器交互中文乱码
生成可执行jar文件后,直接双击打开应用,发送Http请求带有中文时,服务器接收到的中文乱码! 解决方式: 1.在cmd命令中执行javaw命令打开jar可执行应用: 打开cmd命令框,输入: jav ...
- 关于JS中的apply()与call()使用方法与区别
Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里 ...