jQuery Fancybox插件使用参数详解
来源:互联网 发布:如何减腓肠肌 知乎 编辑:程序博客网 时间:2024/05/01 07:28
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="image_small.jpg" kesrc="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>
C、Iframe
<a href="http://www.example?iframe">This goes to iframe</a> 或者 <a class="iframe" href="http://www.example">This goes to iframe</a>
D、Ajax
<a href="http://www.example/data.php">This takes content using ajax</a>
如果你要显示描述信息,可以在链接上加上title,将描述信息放到title中。
4、最终的jquery初始化代码
$(document).ready(function() { /* 最基本的,使用了默认配置 */ $("a#single_image").fancybox(); /* 使用了自定义配置 */ $("a#inline").fancybox({ 'hideOnContentClick': true }); /* 一下配置支持组播放 */ $("a.group").fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : false }); });
用rel标签来创建相册
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""></a><a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""></a> <a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""></a> <a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""></a> $("a.grouped_elements").fancybox();
Fancybox的API和配置选项说明
注意: 'error' and 'success' 这两个回调事件会被fancybox重写swf{wmode: 'transparent'}swf的设置选项hideOnOverlayClicktrue如果为true则点击遮罩层关闭fancyboxhideOnContentClickfalse如果为true则点击播放内容关闭fancyboxoverlayShowtrue如果为true,则显示遮罩层overlayOpacity0.3遮罩层的透明度(范围0-1)overlayColor'#666'遮罩层的背景颜色titleShowtrue如果为true,则显示标题titlePosition'outside'设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over'titleFormatnull可以自定义标题的格式transitionIn, transitionOut'fade'设置动画效果. 可以设置为 'elastic', 'fade' 或 'none'speedIn, speedOut300fade 和 elastic 动画切换的时间间隔, 以毫秒为单位
changeSpeed300切换时fancybox尺寸的变化时间间隔(即变化的速度),以毫秒为单位changeFade'fast'切换时内容淡入淡出的时间间隔(即变化的速度)easingIn, easingOut'swing'为 elastic 动画使用 EasingshowCloseButtontrue如果为true,则显示关闭按钮showNavArrowstrue如果为true,则显示上一张下一张导航箭头enableEscapeButtontrue如果为true,则启用ESC来关闭fancyboxonStartnull回调函数,加载内容是触发onCancelnull回调函数,取消加载内容后触发onCompletenull回调函数,加载内容完成后触发onCleanupnull回调函数,关闭fancybox前触发onClosednull回调函数,关闭fancybox后触发
0 0
- jQuery Fancybox插件使用参数详解
- jQuery Fancybox插件使用参数详解
- jQuery Fancybox插件使用参数详解
- jQuery Fancybox插件使用参数详解
- jquery图片播放插件Fancybox使用详解
- jquery插件:fancybox
- jQuery Fancybox插件介绍
- jquery fancybox插件
- FancyBox参数详解
- 关于使用fancybox插件
- jquery Fancybox使用教程
- 【推荐】jquery幻灯片插件fancybox
- jquery 插件 jParallax 和fancyBox
- jquery fancybox 弹层插件
- jquery-fancybox查看大图插件
- Jquery之弹出层插件FancyBox
- jquery的图片播放插件Fancybox
- FancyBox - 经典的 jQuery Lightbox 插件
- eclipse maven 插件
- TINY4412 驱动开发学习笔记整理---内存管理篇
- VB.NET版机房收费系统---外观层如何写
- CentOS下源码安装PostgreSQL
- tomcat 7 源码分析
- jQuery Fancybox插件使用参数详解
- 各种指针分类总结 + 指针间的赋值关系
- windows内核模式开发常用知识
- 统一D3D与OpenGL坐标系统
- Android的多媒体数据库
- 开源夏令营Memcached哈希性能优化(二)
- Hibernate的检索方式
- Ubuntu下VMware无法保存配置文件问题
- unity 我的第一个项目总结(进行中)