使用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 相关文章推荐
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 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
Terran热键控制
2020/03/14 星际争霸
php图片加中文水印实现代码分享
2012/10/31 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
jQuery回车实现登录简单实现
2013/08/20 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
Python批量转换文件编码格式
2015/05/17 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
共青团员自我评价范文
2014/09/14 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
windows系统搭建WEB服务器详细教程
2022/08/05 Servers