欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

图像特效 图片特效 好用的jquery图片播放插件Fancybox使用方法 弹出视频 图像 文字div等 有大用

shiping1 的头像
星期二, 2013-08-06 16:20 — shiping1

http://fancybox.net/  jquery图片播放插件Fancybox的官网

好用的jquery图片播放插件Fancybox使用方法

上次给大家介绍了一款简易的jquery图片播放插件LightBox的使用方法，没看过的朋友可以去看看，配置十分简单，也很好用。今天给大家介绍的jquery图片播放插件叫Fancybox，相比LightBox来说，Fancybox相对庞大点，配置也更丰富一些，相信你会喜欢的。

Fancybox的项目主页地址：http://fancybox.net/

Fancybox的特点如下：

  1. 可以支持图片、html文本、flash动画、iframe以及ajax的支持
  2. 可以自定义播放器的CSS样式
  3. 可以以组的形式进行播放
  4. 如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
  5. Fancybox播放器支持投影，更有立体的感觉

Fancybox使用方法：

1、引入jquery核心库和Fancybox插件库

1
2
<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（一些动画效果）你还需要引入以下脚本
1
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
可选 - 如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本
1
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
2、添加样式表文件
1
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
3、在页面上创建链接元素

A、图片元素

1
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
B、普通文本
1
2
3
4
5
<a id="inline" href="#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
1
2
3
4
5
<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
1
<a href="http://www.example/data.php">This takes content using ajax</a>
如果你要显示描述信息，可以在链接上加上title，将描述信息放到title中。

4、最终的jquery初始化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(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标签来创建相册
1
2
3
4
5
6
7
<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和配置选项说明
属性名默认值简要说明
padding10浏览框内边距，和css中的padding一个意思
margin20浏览框外边距，和css中的margin一个意思
opacityfalse如果为true，则fancybox在动画改变的时候透明度可以跟着改变
modalfalse如果为true，则'overlayShow' 会被设成 'true' ， 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 会被设成 'false'
cyclicfalse如果为true，相册会循环播放
scrolling'auto'设置overflow的值来创建或隐藏滚动条，可以设置成 'auto', 'yes', or 'no'
width560设置iframe和swf的宽度，如果 'autoDimensions'为 'false'，这也可以设置普通文本的宽度
height340设置iframe和swf的高度，如果 'autoDimensions'为 'false'，这也可以设置普通文本的高度
autoScaletrue如果为true，fancybox可以自适应浏览器窗口大小
autoDimensionstrue在内联文本和ajax中，设置是否动态调整元素的尺寸，如果为true，请确保你已经为元素设置了尺寸大小
centerOnScrollfalse如果为true，当你滚动滚动条时，fancybox将会一直停留在浏览器中心
ajax{ }和jquery的ajax调用选项一样
注意: 'error' and 'success' 这两个回调事件会被fancybox重写
swf{wmode: 'transparent'}swf的设置选项
hideOnOverlayClicktrue如果为true则点击遮罩层关闭fancybox
hideOnContentClickfalse如果为true则点击播放内容关闭fancybox
overlayShowtrue如果为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 动画使用 Easing
showCloseButtontrue如果为true，则显示关闭按钮
showNavArrowstrue如果为true，则显示上一张下一张导航箭头
enableEscapeButtontrue如果为true，则启用ESC来关闭fancybox
onStartnull回调函数，加载内容是触发
onCancelnull回调函数，取消加载内容后触发
onCompletenull回调函数，加载内容完成后触发
onCleanupnull回调函数，关闭fancybox前触发
onClosednull回调函数，关闭fancybox后触发

好了，这款fancybox图片播放插件就介绍到这里，由于比较晚了，写文章难免手抖，如果有什么纰漏还请各位网友指出。

来自  http://www.itivy.com/jquery/archive/2011/6/28/jquery-fancybox-usage.html


 

Fancybox丰富的弹出层效果  演示站 http://www.helloweba.com/demo/fancybox/

helloweba.com 作者：月光光 时间：2010-10-15 15:55 标签： Fancybox  jquery插件  弹出层 

 

这才是你要学的！0基础4个月成为Web前端工程师，保就业！（最新版）

Fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层效果。前面我们有文章介绍了facybox弹出层效果，相比facybox，fancybox显得功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。

Fancybox丰富的弹出层效果
查看演示 下载源码

fancybox具有以下特性：

可以加载DIV、图片、图片集、Ajax数据、SWF影片，iframe页面等。

支持键盘方向键和ESC键。

丰富的参数设置和方法调用。

可扩展性强。

如何使用？

本文以DEMO中的Demo2为例，讲解fancybox的使用。

1、添加javascript引用和css文件的引用

<link rel="stylesheet" type="text/css" href="fancybox.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/fancybox.js"></script> 

2、HTML

<h4>图片集，支持键盘方向键</h4> 
<p> 
   <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a> 
   <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></a> 
   <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a> 
</p> 

3、调用fancybox

$(function(){ 
    $("a[rel=group]").fancybox({ 
        'titlePosition' : 'over', 
        'cyclic'        : true, 
        'titleFormat'    : function(title, currentArray, currentIndex, currentOpts) { 
                    return '<span id="fancybox-title-over">' + (currentIndex + 1) + 
 ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>'; 
                } 
    }); 
}); 

注意，fancybox的参数设置格式为：'key':'value'。titlePosition:设置图片标题的显示位置为图片上。cyclic：设置图片浏览方式为循环浏览。titleFormat：设置图片标题的格式，可以显示图片总数和当前图片顺序。

fancybox插件主要参数和方法一览表

参数/方法描述默认值
基本
width设置弹出串口的宽度，当内容为swf,iframe或者单行文字时，
应该将'autoDimensions' 设置为false		560
height设置弹出串口的高度，当内容为swf,iframe或者单行文字时，
应该将'autoDimensions' 设置为false		340
cyclic是否循环显示，当内容为图片集时。false
centerOnScroll弹出窗口始终浏览器居中。false
modal是否使用模式窗口。当设置为true时，应该同时将：'hideOnOverlayClick'，'hideOnContentClick'，
'enableEscapeButton'， 'showCloseButton' 设置为false，并将'overlayShow' 设置为true		false
titlePosition标题的位置,可以设置为'outside', 'inside' or 'over''outside'
transitionIn, transitionOut窗口显示的方式，可以设置为'elastic', 'fade' or 'none''fade'
send方法，向服务端发送裁剪图片的数据，以便服务端接收参数进行处理，
e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });		 
方法
$.fancybox.showActivity显示加载动画 
$.fancybox.hideActivity隐藏加载动画 
$.fancybox.close关闭窗口 
$.fancybox.resize自动调整窗口的高度使之与内容相适应 
Centered是否将选区居中，即显示在容器的中心。 

更多参数和方法请参照http://fancybox.net/api

声明：本文为原创文章，helloweba.com和作者拥有版权，如需转载，请注明来源于helloweba.com并保留原文链接：http://www.helloweba.com/view-blog-65.html
多级下拉菜单：superfish的应用
PHP+Mysql+jQuery实现发布微博程序--jQuery篇

延伸阅读

 
 

 

被顶起来的评论
  • 挺不错
    挺不错

    我按照教程把代码写完了，可谓什么还是独立代开图像并没有窗口了？求解

    2011年7月4日回复顶(3)转发
最新最早最热

来自 http://www.helloweba.com/view-blog-65.html
普通分类: 
jquery
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2