jquery图片插件 fancybox

转载 (原文地址) netsrong 随笔 待整理 1336阅读 2014-08-27 15:06:49 举报

<!--图片元素 最基本的弹框-->
<a id="single_image" href="images/fancybox/1.jpg"><img src="images/fancybox/1.jpg" kesrc="image_small.jpg" alt=""></a>
<!--普通文本 弹出另外一个div-->
<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><!--iframe 弹出另外一个iframe-->
<a id="iframe_a" href="#iframe1">This goes to iframe</a>
<div style="display: none;">
<iframe id="iframe1" src="images/fancybox/1.jpg"></iframe>
</div>
<!--轮播-->
<a class="grouped_elements" rel="group1" href="images/fancybox/1.jpg"><img src="images/fancybox/1.jpg" alt=""></a>
<a class="grouped_elements" rel="group1" href="images/fancybox/2.jpg"><img src="images/fancybox/2.jpg" alt=""></a>
<a class="grouped_elements" rel="group2" href="images/fancybox/3.jpg"><img src="images/fancybox/3.jpg" alt=""></a>
<a class="grouped_elements" rel="group2" href="images/fancybox/4.jpg"><img src="images/fancybox/4.jpg" alt=""></a>

js:
<link type="text/css" href="css/jquery.fancybox-1.3.4.css" rel="stylesheet"/>
<script type="text/javascript" src="js/external/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/external/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(function(){
$("a#single_image").fancybox(); //最基本的弹框
$("a#inline").fancybox({
'hideOnContentClick': true
});
$("a.grouped_elements").fancybox({
'transitionIn' : 'elastic', //设置动画效果. 可以设置为 'elastic', 'fade' 或 'none'
'transitionOut' : 'elastic',
'speedIn' : 600, //transitionIn动画切换的时间间隔, 以毫秒为单位
'speedOut' : 200,
'overlayShow' : true, //如果为true,则显示遮罩层
'overlayColor':'#666', //遮罩层的背景颜色
'titleShow':true
}); //轮播
$('a#iframe_a').fancybox();
});
</script>

Fancybox的API和配置选项说明:
[table]
[td][tr][td]属性名[/td][td]默认值[/td][td]简要说明[/td][/tr]
[tr][td]padding[/td][td]10[/td][td]浏览框内边距,和css中的padding一个意思[/td][/tr]
[tr][td]margin[/td][td]20[/td][td]浏览框外边距,和css中的margin一个意思[/td][/tr]
[tr][td]opacity[/td][td]false[/td][td]如果为true,则fancybox在动画改变的时候透明度可以跟着改变[/td][/tr]
[tr][td]modal[/td][td]false[/td][td]如果为true,则'overlayShow' 会被设成 'true' , 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 会被设成 'false'[/td][/tr]
[tr][td]cyclic[/td][td]false[/td][td]如果为true,相册会循环播放[/td][/tr]
[tr][td]scrolling[/td][td]'auto'[/td][td]设置overflow的值来创建或隐藏滚动条,可以设置成 'auto', 'yes', or 'no'[/td][/tr]
[tr][td]width[/td][td]560[/td][td]设置iframe和swf的宽度,如果 'autoDimensions'为 'false',这也可以设置普通文本的宽度[/td][/tr]
[tr][td]height[/td][td]340[/td][td]设置iframe和swf的高度,如果 'autoDimensions'为 'false',这也可以设置普通文本的高度[/td][/tr]
[tr][td]autoScale[/td][td]true[/td][td]如果为true,fancybox可以自适应浏览器窗口大小[/td][/tr]
[tr][td]autoDimensions[/td][td]true[/td][td]在内联文本和ajax中,设置是否动态调整元素的尺寸,如果为true,请确保你已经为元素设置了尺寸大小[/td][/tr]
[tr][td]centerOnScroll[/td][td]false[/td][td]如果为true,当你滚动滚动条时,fancybox将会一直停留在浏览器中心[/td][/tr]
[tr][td]ajax[/td][td]{ }[/td][td]和jquery的ajax调用选项一样
注意: 'error' and 'success' 这两个回调事件会被fancybox重写[/td][/tr]
[tr][td]swf[/td][td]{wmode: 'transparent'}[/td][td]swf的设置选项[/td][/tr]
[tr][td]hideOnOverlayClick[/td][td]true[/td][td]如果为true则点击遮罩层关闭fancybox[/td][/tr]
[tr][td]hideOnContentClick[/td][td]false[/td][td]如果为true则点击播放内容关闭fancybox[/td][/tr]
[tr][td]overlayShow[/td][td]true[/td][td]如果为true,则显示遮罩层[/td][/tr]
[tr][td]overlayOpacity[/td][td]0.3[/td][td]遮罩层的透明度(范围0-1)[/td][/tr]
[tr][td]overlayColor[/td][td]'#666'[/td][td]遮罩层的背景颜色[/td][/tr]
[tr][td]titleShow[/td][td]true[/td][td]如果为true,则显示标题[/td][/tr]
[tr][td]titlePosition[/td][td]'outside'[/td][td]设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over'[/td][/tr]
[tr][td]titleFormat[/td][td]null[/td][td]可以自定义标题的格式[/td][/tr]
[tr][td]transitionIn, transitionOut[/td][td]'fade'[/td][td]设置动画效果. 可以设置为 'elastic', 'fade' 或 'none'[/td][/tr]
[tr][td]speedIn, speedOut[/td][td]300[/td][td]fade 和 elastic 动画切换的时间间隔, 以毫秒为单位
[/td][/tr]
[tr][td]changeSpeed[/td][td]300[/td][td]切换时fancybox尺寸的变化时间间隔(即变化的速度),以毫秒为单位[/td][/tr]
[tr][td]changeFade[/td][td]'fast'[/td][td]切换时内容淡入淡出的时间间隔(即变化的速度)[/td][/tr]
[tr][td]easingIn, easingOut[/td][td]'swing'[/td][td]为 elastic 动画使用 Easing[/td][/tr]
[tr][td]showCloseButton[/td][td]true[/td][td]如果为true,则显示关闭按钮[/td][/tr]
[tr][td]showNavArrows[/td][td]true[/td][td]如果为true,则显示上一张下一张导航箭头[/td][/tr]
[tr][td]enableEscapeButton[/td][td]true[/td][td]如果为true,则启用ESC来关闭fancybox[/td][/tr]
[tr][td]onStart[/td][td]null[/td][td]回调函数,加载内容是触发[/td][/tr]
[tr][td]onCancel[/td][td]null[/td][td]回调函数,取消加载内容后触发[/td][/tr]
[tr][td]onComplete[/td][td]null[/td][td]回调函数,加载内容完成后触发[/td][/tr]
[tr][td]onCleanup[/td][td]null[/td][td]回调函数,关闭fancybox前触发[/td][/tr]
[tr][td]onClosed[/td][td]null[/td][td]回调函数,关闭fancybox后触发
[/td][/tr]
[/table]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复