效果预览Demo源码下载

Fancybox的特点如下:

  1. 可以支持图片、html文本、flash动画、iframe以及ajax的支持
  2. 可以自定义播放器的CSS样式
  3. 可以以组的形式进行播放
  4. 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
  5. 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(灯箱)的更多相关文章

  1. jquery图片播放插件Fancybox使用详解

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

  2. 分享8款精美的jQuery图片播放插件

    本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究.废话不多说了,直接上这些插件. 1.3D轮播相册 这款3D相册插件利用了HTML5 ...

  3. 一款超炫的jquery图片播放插件[Cloud Carousel]

    今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...

  4. jQuery图片播放插件prettyPhoto使用介绍

    演示效果  http://www.17sucai.com/preview/131993/2014-07-09/mac-Bootstrap/gallery.html 点击之后的效果 使用方法 Query ...

  5. 美女jquery图片播放器插件

    相册在线查看http://keleyi.com/keleyi/phtml/image/6.htm 可全屏,可拖动,可自动播放的jquery图片展示插件 使用说明:1.引用css文件:<link ...

  6. 十个jQuery图片画廊插件推荐

    jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视.下面为你介绍了10个最有美感,创新性和创造性的jQu ...

  7. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  8. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

  9. jQuery语音播放插件

    自己做jQuery插件:将audio5js封装成jQuery语音播放插件   日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以 ...

随机推荐

  1. ImageButton如何让图片按比例缩放不被拉伸

    了解 在安卓的界面XML中,ImageButton有这样一个属性android:scaleType,他干嘛的? ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例 ...

  2. java.util.Hashtable源码分析

    Hashtable实现一个键值映射的表.任何非null的object可以用作key和value. 为了能存取对象,放在表里的对象必须实现hashCode和equals方法. 一个Hashtable有两 ...

  3. PHP权限分配思路

    常见四种方式1.用户+组+角色+权限2.用户+组+权限3.用户+角色+权限(最多用)4.用户+权限以第三种为例:权限:用户操作的具体事件:如curd角色:指一类用户拥有的权限,如超级管理员,管理员,普 ...

  4. Asp.Net细节性问题精萃

    1.<%=…%>与<%#… %>的区别: 答:<%=…%>是在程序执行时调用,<%#… %>是在DataBind()方法之后被调用 2.控件接收哪些类型 ...

  5. 在网页中插入qq连接

    <a href="tencent://message/?uin=这里写qq号 &Site=这里随便七个名字 &Menu=要为yes">显示出来的名字&l ...

  6. AngularJS(4)-服务(Service)

    1.$location服务 $location 服务,它可以返回当前页面的 URL 地址 2.$http服务 $http 是 AngularJS 应用中最常用的服务. 服务向服务器发送请求,应用响应服 ...

  7. 用javascript快速清空你的人人时间轴、状态和分享

    博客已经迁移到www.imyzf.com,本站不再更新,请谅解! 现在玩人人的人越来越少了,很多人担心不玩以后东西放上面不安全..我也有同样的想法,但是手动删除上百条东西,太累了,于是写了些javas ...

  8. 使用pdb调试python

    python pdb调试 python -m pdb myscript.py #注意这会重启myscript.py,这样启动的话,代码每一行都是一个节点 也可以在程序中这么设置断点: import p ...

  9. Java应用程序可执行jar文件与服务器交互中文乱码

    生成可执行jar文件后,直接双击打开应用,发送Http请求带有中文时,服务器接收到的中文乱码! 解决方式: 1.在cmd命令中执行javaw命令打开jar可执行应用: 打开cmd命令框,输入: jav ...

  10. 关于JS中的apply()与call()使用方法与区别

    Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里 ...