• 福州率先出台人才共有产权住房政策 工作满12年可获完全产权 2019-08-21
  • 领克02:锁好车门,总想回头多看你一眼 2019-07-12
  • 雄安新区公布非法集资举报电话:最高奖励15000元 2019-07-12
  • 石家庄、定州大沙河惊现3公里“垃圾带” 2019-07-09
  • 儿童掉进冰窟 小伙用双手砸出“生命通道” 2019-07-09
  • 中国丹寨少年亮相世界杯揭幕战 2019-07-08
  • 拉萨市海拔4300米以下再无“无树村 无树户” 2019-07-08
  • 618独特风景:新品密集上苏宁 这次迎来比佛利 2019-06-22
  • 北京:推租赁型集体宿舍  每房间最多住8人 2019-06-22
  • 0712-2888027 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="//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="//www.example?iframe">This goes to iframe</a>
     
    or
     
    <a class="iframe" href="//www.example">This goes to iframe</a>
     
    Ajax应用:
    <a href="//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的话将不会出现动画

    里昂队徽 www.ywpww.com          方法
             $.fancybox.showActivity 显示加载动画  
             $.fancybox.hideActivity 隐藏加载动画  
             $.fancybox.close 关闭窗口  
             $.fancybox.resize 自动调整窗口的高度使之与内容相适应


    栏目列表
    推荐内容
    热点内容
    展开
  • 福州率先出台人才共有产权住房政策 工作满12年可获完全产权 2019-08-21
  • 领克02:锁好车门,总想回头多看你一眼 2019-07-12
  • 雄安新区公布非法集资举报电话:最高奖励15000元 2019-07-12
  • 石家庄、定州大沙河惊现3公里“垃圾带” 2019-07-09
  • 儿童掉进冰窟 小伙用双手砸出“生命通道” 2019-07-09
  • 中国丹寨少年亮相世界杯揭幕战 2019-07-08
  • 拉萨市海拔4300米以下再无“无树村 无树户” 2019-07-08
  • 618独特风景:新品密集上苏宁 这次迎来比佛利 2019-06-22
  • 北京:推租赁型集体宿舍  每房间最多住8人 2019-06-22
  • 481软件手机版 五分彩稳赚公式软件 湖北十一选五第十三期开奖号码 北京pk拾送彩金送28 澳洲幸运10走势 新疆时时开奖官网 体育票新时时 贵州11选5开奖结果查询结果 优彩彩票app下载安装 手机斗牛技巧 陕西体育十一选五开奖结果查询 时时9码平刷稳赚方案 山东11选5开奖视频时时彩直播 河南481同步势图 赛车pk开奖走势图 山西11选5开奖记录