首先在官网下载最新版的fancyBox(一定要去最新网站，以前依赖的jquery版本偏低)，附上链接：http://fancyapps.com/fancybox/3/

然后在项目中引用jquery，然后在引用jquery.fancybox.min.css和jquery.fancybox.min.js。

如果需要动画和鼠标滚轮滚动效果还可以引入他提供的相关工具文件。

1.你可以通过链接.css和.js在你的html文件来安装fancyBox 。确保您也加载了jQuery库。以下是用作示例的基本HTML模板

<！DOCTYPE html><HTML>

<HEAD>

  1. 	<meta charset =“utf-8”>
  2. 	<title>我的页面</ title>
  3.  
  4. 	<！ -  CSS  - >
  5. 	<link rel =“stylesheet”type =“text / css”href =“jquery.fancybox.min.css”>
  6. </ HEAD>
  7. <BODY>
  8.  
  9. 	<！ - 您的HTML内容到这里 - >
  10.  
  11. 	<！ -  JS  - >
  12. 	<script src =“// code.jquery.com/jquery-3.2.1.min.js”> </ script>
  13. 	<script src =“jquery.fancybox.min.js”> </ script>
  14. </ BODY>
  15. </ HTML>
  16.  
  17. 2.通过通过Bower或npm安装工具安装
  1. # Bower
  2. bower install fancybox --save
  4. # NPM
  5. npm install @fancyapps/fancybox --save
  7. 3.项目中通过外部引用，一般放在lib文件夹下(我采用的是这种方法)
    在lib下新建一个文件目录fancy文件夹，然后引入下载好的.js和.css，在gulpfile.js添加自动化打包压缩任务，放在css目录中的lib.min.css和lib.min.js,在入口index.html中引入压缩后的文件。
    以本fancyBox插件举例：

gulp.task('build-lib-js', ['build-clean-third-lib-js'], function () {
　　var thirdLibJs = gulp.src([

　　//外部引用js
　　'./lib/fancybox/jquery.fancybox.min.js',
　　])
　　.pipe(uglify())
　　.pipe(concat('lib.min.js', {newLine: '\r\n'}))
　　.pipe(gulp.dest('js'));

　　return merge.apply(null, thirdLibJs);
　　});

  1. gulp.task('build-lib-css', ['build-clean-lib-css'], function () {
        var thirdLibCss = gulp.src([
    　　 　　　//外部引用css
            './lib/fancybox/jquery.fancybox.min.css'
        ])
            .pipe(concat('lib.min.css', {newLine: '\r\n'})) //放在哪个文件中
            .pipe(gulp.dest('css'));//打包输出目录(在哪个目录下)
  2.  
  3.     return merge.apply(null, thirdLibCss);
    });
  4.  
  5. 封装在angular自定义组件中
    html模块：
  1. <img-box img-url="'xxxxxx.png'" img-style="'width:740px;margin-left:-50px;'"></img-box>
  2.  
  3. directive.js模块：
  1. var appModule = angular.module('app.core');
  1. appModule.directive('imgBox',imgBox);
  1. function imgBox() {
        return {
            restrict:'AE',
            transclude:true,
            scope:{
                imgUrl:"=",
                imgStyle:'='
            },
            template:'<a class="imageBox" href="{{imgUrl}}" data-fancybox><img style="{{imgStyle}}" src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>',
            link:function (scope,elem,attrs) {
                $(".imageBox").fancybox();
            },
        }
    }
  2.  
  3. 官方写法：

　　<a href="https://c1.staticflickr.com/9/8387/29155724700_a227577206_k.jpg" data-fancybox="images" data-width="2048" data-height="1365">
　　　　<img src="https://c1.staticflickr.com/9/8387/29155724700_58c1cb71cf_m.jpg" />
　　</a>

　　<a href="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" data-fancybox="images" data-width="2048" data-height="1366">
　　　　<img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" />
　　</a>

　　<a href="https://c1.staticflickr.com/9/8487/28808645394_a0ff0fc5c1_k.jpg" data-fancybox="images" data-width="2048" data-height="1365">
　　　　<img src="https://c1.staticflickr.com/9/8487/28808645394_9c7e6bf8a5_m.jpg" />
　　</a>

　　标注：data-fancybox使用图片预览插件，三个值都为images表示在一个图片组内 data-width data-height 图像的真实宽高度 data-caption 标题信息

　　启用方法：

  1. 　　<script type="text/javascript">
  2. 	$("[data-fancybox]").fancybox({
  3. 		// Options will go here
  4. 	});
  5. 　　</script>
  7. 　　遇到的问题：
    　　1.如果使用低版本的图片预览插件，会报Cannot read property 'msie' of undefined的错，原因低版本似乎使用$ .browser方法，但是从jQuery 1.9起已被删除
    　　2.在template或者templateUrl要使用html中传入的imgUrl值，不能直接使用imgUrl或者scope.imgUrl获取。
    　　方法：    template:'<a class="imageBox" href="{{imgUrl}}" data-fancybox><img style="{{imgStyle}}" src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>'
    　　　　　　或者
    　　　　　template:'<a class="imageBox" ng-href="{{imgUrl}}" data-fancybox><img style="{{imgStyle}}" ng-src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>'
    　　　　　后面的th:src可以不用拼接，如果你项目中是用cdn上的资源图片，可以使用。
  1.  
  1. 　　-----原创文章，©版权所有，转载请注明标明出处：http://www.cnblogs.com/doinbean

　　

  1.  
  1.  

angular中封装fancyBox(图片预览)的更多相关文章

  1. 在 vue 中使用 vieiwer 图片预览插件

    https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...

  2. vue项目中编写一个图片预览的公用组件

    今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件 ...

  3. vue项目中图片预览旋转功能

    最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...

  4. JS 解决 IOS 中拍照图片预览旋转 90度 BUG

    上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...

  5. [RN] React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中，放大报错问题

    React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题 报错如下: Cannot record touch end w ...

  6. win7中资源管理器不能显示图片预览的解决方法

    在用xp的时候,在资源管理器里面预览图片文件是在普通不过的事情了.换到win7之后,图片文件一直不能预览,只是显示图标还挺烦的.肯定是哪里设置的不对,下午闲来无事,找到是哪里的问题了. 如果你也遇到相 ...

  7. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  8. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...

  9. js实现移动端图片预览：手势缩放， 手势拖动，双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

随机推荐

  1. java第二课，java基础2

    关键字:            在java中被赋予了特殊含义的单词,具有特殊用途.   标识符:               由字母,数字,下划线(_),美元符($)组成,不能以数字开头,不能是jav ...

  2. hadoop全分布式环境搭建

    本文主要介绍基本的hadoop的搭建过程.首先说下我的环境准备.我的笔记本使用的是Windows10专业版,装的虚拟机软件为VMware WorkStation Pro,虚拟机使用的系统为centos ...

  3. nyoj_61: 传纸条（一）

    题目链接 使用双线dp,假设两个人同时从左上角移动到右下角,且满足路线不交叉,另k=x1+y1=x2+y2压缩状态进行优化.每次状态转移满足 x1,x2,y1,y2都在矩阵范围内,且(x2,y2)在相 ...

  4. 【期望DP】

    [总览] [期望dp] 求解达到某一目标的期望花费:因为最终的花费无从知晓(不可能从$\infty$推起),所以期望dp需要倒序求解. 设$f[i][j]$表示在$(i, j)$这个状态实现目标的期望 ...

  5. Multimodal —— 看图说话（Image Caption）任务的论文笔记（三）引入视觉哨兵的自适应attention机制

    在此前的两篇博客中所介绍的两个论文,分别介绍了encoder-decoder框架以及引入attention之后在Image Caption任务上的应用. 这篇博客所介绍的文章所考虑的是生成captio ...

  6. MySQL优化 - 性能分析与查询优化

    优化应贯穿整个产品开发周期中,比如编写复杂SQL时查看执行计划,安装MySQL服务器时尽量合理配置(见过太多完全使用默认配置安装的情况),根据应用负载选择合理的硬件配置等. 1.性能分析 性能分析包含 ...

  7. iframe中的模态框遮罩父窗口原理

    关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就 ...

  8. Jenkins: 配置信息变更历史

    像 Jenkins 这样的系统,使用的过程就是配置文件变更的过程.如果能够对配置文件的变更进行跟踪管理,将极大的提高系统的可用性.Job Configuration History 插件就是这么一款实 ...

  9. 干货--Excel的表格数据的一般处理和常用python模块。

    写在前面: 本文章的主要目的在于: 介绍了python常用的Excel处理模块:xlwt,xlrd,xllutils,openpyxl,pywin32的使用和应用场景. 本文只针对于Excel表中常用 ...

  10. Servlet做简单的ajax增删改查（分页）

    jdbc.java package servlet; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...