使用JQuery FancyBox插件实现图片展示特效


Posted in Javascript onNovember 16, 2015

FancyBox是一个用于显示图像,HTML内容和多媒体的lightbox工具。

jquery插件之fancybox弹出框特效,与广为人之的lightbox插件比较类拟,可以展示单张图片,也可展示一组图片,它还可以展示自定义的内容与ajax载入外部文件的内容等,功能也是很方便与实用的。

Demo effect(image gallery):

使用JQuery FancyBox插件实现图片展示特效

Sample code:

<link href="~/Content/jquery.fancybox.css" rel="stylesheet" />
<p>
  <h2>First test(Image gallery)</h2>
  <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg"><img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" /></a>
  <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg"><img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg" alt="" /></a>
</p>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
      $(".fancybox1").fancybox();      
    });
</script>

Demo effect(single images):

使用JQuery FancyBox插件实现图片展示特效

Sample code:

<link href="~/Content/jquery.fancybox.css" rel="stylesheet" />
<p>
  <h2>Single images</h2>
  <a id="single_1" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg" title="Lupines (Kiddi Einars)">
    <img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg" alt="" />
  </a>
  <a id="single_2" href="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_b.jpg" title="Colorful Feldberg II (STEFFEN EGLY)">
    <img src="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_m.jpg" alt="" />
  </a>
  <a id="single_3" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg" title="Cannon Needles (JustinPoe)">
    <img src="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg" alt="" />
  </a>
  <a id="single_4" href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg" title="Making a summer # 3 :) ((Nikon woman))">
    <img src="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg" alt="" />
  </a>
</p>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
      $("#single_1").fancybox({
        helpers: {
          title: {
            type: 'float'
          }
        }
      });

      $("#single_2").fancybox({
        openEffect: 'elastic',
        closeEffect: 'elastic',

        helpers: {
          title: {
            type: 'inside'
          }
        }
      });

      $("#single_3").fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        helpers: {
          title: {
            type: 'outside'
          }
        }
      });

      $("#single_4").fancybox({
        helpers: {
          title: {
            type: 'over'
          }
        }
      });      
    });
  </script>

Demo effect(thumbnail):

使用JQuery FancyBox插件实现图片展示特效

Sample code:

<link href="~/Content/jquery.fancybox.css" rel="stylesheet" />
<link href="~/Content/jquery.fancybox-thumbs.css" rel="stylesheet" />
<p>
  <h2>Thumbnail helper</h2>
  <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg" title="Bråviken (jarnasen)">
    <img src="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg" alt="" />
  </a>
  <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg" title="From the garden (*Jilltoo)">
    <img src="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg" alt="" />
  </a>
  <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8591/16141566979_347348e72c_b.jpg" title="cold forest (picturesbywalther)">
    <img src="http://farm9.staticflickr.com/8591/16141566979_347348e72c_m.jpg" alt="" />
  </a>
  <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_b.jpg" title="Holly blue (Masa_N)">
    <img src="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_m.jpg" alt="" />
  </a>
</p>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
  <script src="~/Scripts/jquery.fancybox-thumbs.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $(".fancybox-thumb").fancybox({
        prevEffect: 'elastic',
        nextEffect: 'elastic',
        helpers: {
          title: {
            type: 'inside'
          },
          thumbs: {
            width: 50,
            height: 50
          }
        }
      });
    });
  </script>

以上就是3款jQuery插件fancybox图片放大展示效果网页特效,应用简单,兼容IE6老版本级别浏览器。图片放大只适应大小并自动窗口居中显示。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)

Javascript 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
js 异步处理进度条
Apr 01 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
使用JS实现简易计算器
Jun 14 Javascript
uploadify多文件上传参数设置技巧
Nov 16 #Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 #Javascript
跟我学习javascript的全局变量
Nov 16 #Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 #Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 #Javascript
简单实现限制uploadify上传个数
Nov 16 #Javascript
跟我学习javascript的隐式强制转换
Nov 16 #Javascript
You might like
php中取得文件的后缀名?
2012/02/20 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
PHP实现微信发红包程序
2015/08/24 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
Python中实现对list做减法操作介绍
2015/01/09 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python探索之SocketServer详解
2017/10/28 Python
Python实现购物车购物小程序
2018/04/18 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python爬虫请求头的使用
2020/12/01 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
校长寄语大全
2014/04/09 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
春季运动会开幕词
2015/01/28 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server