最专业的时时彩平台 189-8648-0214
微信公众号

孝感杏耀娱乐信息技术有限公司微信公众号

当前地位: 主页 > 技术撑腰 > Javascript/JQuery > Fancybox一款基于jquery开拓的类Lightbox插件

Fancybox一款基于jquery开拓的类Lightbox插件

时间:2018-10-26来源:杏耀娱乐网 点击:
Fancybox是一款基于jquery开拓的类Lightbox插件。撑腰对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽。
Fancybox 是一款很绚丽的 jquery 弹出层展示插件,该lightbox除了能够展示图片之外,还能够展示iframed内容, 通过css自定义外观。
Fancybox一款基于jquery开拓的类Lightbox插件
 
下载地址:https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/fancybox/jquery.fancybox-1.3.4.zip
 
使用方法
 
引入核心文件:
<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>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
 
<!--也能够通过easing插件实现fancy transitions 动画效果-->
<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>
 
 
图片应用:
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
 
链接应用:
<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应用:
<a href="http://www.example?iframe">This goes to iframe</a>
 
or
 
<a class="iframe" href="http://www.example">This goes to iframe</a>
 
Ajax应用:
<a href="http://www.example/data.php">This takes content using ajax</a>
 
JQuery操纵代码:
 
$(document).ready(function() {
 
/* This is basic - uses default settings */
 
$("a#single_image").fancybox();
 
/* Using custom settings */
 
$("a#inline").fancybox({
'hideOnContentClick': true
});
 
/* Apply fancybox to multiple items */
 
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600, 
'speedOut' : 200, 
'overlayShow' : false
});
 
});
 
用rel标签来创建相册
 
/* HTML结构 */
<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> 
 
 
/* JQuery结构*/
$("a.grouped_elements").fancybox();
 
fancybox中的一些常用参数

padding 跟css里的padding差不多意义
imageScale 如果为true,则图片会被缩放以适应窗口
zoomOpacity 如果为true,则在动画进程中内容的透明度会改变
overlayShow 如果为true,则显示遮罩,默认为false
overlayOpacity 遮罩的透明度,值为0--1
centerOnScroll 值为true的话,当用户滚动页面时,内容会一直居中显示
frameWidth/height iframe和inline框口的默认宽度/高度
zoomSpeedIn zooming-in动画时的速度,单位为毫秒。0的话动画将不会出现
zoomSpeedOut zooming-out动画时的速度,单位为毫秒。0的话动画将不会出现
zoomSpeedChange 切换图片时的动画速度,单位为毫秒。值为0的话将不会出现动画

         方法
         $.fancybox.showActivity 显示加载动画  
         $.fancybox.hideActivity 隐藏加载动画  
         $.fancybox.close 关闭窗口  
         $.fancybox.resize 主动调整窗口的高度使之与内容相适应


栏目列表
推举内容
热点内容
Sitemap
条评论