首先在官网下载最新版的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>

	<meta charset =“utf-8”>

	<title>我的页面</ title>

	<！ -  CSS  - >

	<link rel =“stylesheet”type =“text / css”href =“jquery.fancybox.min.css”>

</ HEAD>

<BODY>

	<！ - 您的HTML内容到这里 - >

	<！ -  JS  - >

	<script src =“// code.jquery.com/jquery-3.2.1.min.js”> </ script>

	<script src =“jquery.fancybox.min.js”> </ script>

</ BODY>

</ HTML>

2.通过通过Bower或npm安装工具安装
# Bower

bower install fancybox --save

# NPM

npm install @fancyapps/fancybox --save

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);
　　});

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'));//打包输出目录(在哪个目录下)

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

封装在angular自定义组件中
html模块：
<img-box img-url="'xxxxxx.png'" img-style="'width:740px;margin-left:-50px;'"></img-box>

directive.js模块：
var appModule = angular.module('app.core');
appModule.directive('imgBox',imgBox);

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();
        },
    }
}

官方写法：

　　<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 标题信息

　　启用方法：

　　<script type="text/javascript">

	$("[data-fancybox]").fancybox({

		// Options will go here

	});

　　</script>

　　遇到的问题：
　　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上的资源图片，可以使用。
 
　　-----原创文章，©版权所有，转载请注明标明出处：http://www.cnblogs.com/doinbean

　　



 
												


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

    
								
  1. 在 vue 中使用 vieiwer 图片预览插件
		
    https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...
    
		
    2. 
						
  2. vue项目中编写一个图片预览的公用组件
		
    今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件 ...
    
		
    3. 
						
  3. vue项目中图片预览旋转功能
		
    最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...
    
		
    4. 
						
  4. JS 解决 IOS 中拍照图片预览旋转 90度 BUG
		
    上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
    
		
    5. 
						
  5. [RN] React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中，放大报错问题
		
    React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题 报错如下: Cannot record touch end w ...
    
		
    6. 
						
  6. win7中资源管理器不能显示图片预览的解决方法
		
    在用xp的时候,在资源管理器里面预览图片文件是在普通不过的事情了.换到win7之后,图片文件一直不能预览,只是显示图标还挺烦的.肯定是哪里设置的不对,下午闲来无事,找到是哪里的问题了. 如果你也遇到相 ...
    
		
    7. 
						
  7. JS魔法堂之实战：纯前端的图片预览
		
    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
    
		
    8. 
						
  8. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览
		
    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...
    
		
    9. 
						
  9. js实现移动端图片预览：手势缩放， 手势拖动，双击放大...
		
    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex >  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 决策树(C4.5)原理
			
    决策树c4.5算法是在决策树ID3上面演变而来. 在ID3中: 信息增益 按属性A划分数据集S的信息增益Gain(S,A)为样本集S的熵减去按属性A划分S后的样本子集的熵,即 在此基础上,C4.5计算 ...
    
			
    2. 
						
  2. 了解Java并学会创建Java项目（一个菜鸟的成长历程）
			
    计算机语言分类:了解 1)低级语言:更接近于计算机的语言 1.1)机器语言:由0和1组成的 1.2)汇编语言:有一些助记符号2)高级语言:更接近于人的语言 2.1)面向过程的:C... 2.2)面向对 ...
    
			
    3. 
						
  3. Hexo博客添加SEO-评论系统-阅读统计-站长统计
			
    原文地址:→传送门 写在前面 在五月出捣腾了一把个人博客,但是刚开始只做了一些基础设置,套路也没摸清,基础安装篇请看hexo从零开始到搭建完整,里面讲到了基础工具的安装及blog项目的文件夹含义,以及 ...
    
			
    4. 
						
  4. 4G内存服务器的MySQL配置优化
			
    公司网站访问量越来越大(日均超10万PV),MySQL自然成为瓶颈,关于 MySQL 的优化,最基本的是 MySQL 系统参数的优化. MySQL对于web架构性能的影响最大,也是关键的核心部分.My ...
    
			
    5. 
						
  5. 64位linux系统通过编译安装apache+…
			
    二.安装php 上传php压缩包 例如:php-5.2.3.tar.gz 移动 mv php-5.2.3.tar.gz /usr/local/src 进入 cd /usr/local/src 解压 t ...
    
			
    6. 
						
  6. HDU5742 It's All In The Mind（思维题，水题）
			
    Problem Description Professor Zhang has a number sequence a1,a2,...,an. However, the sequence is not ...
    
			
    7. 
						
  7. 使用Jexus 5.8.2在Centos下部署运行Asp.net core
			
    这里安装的Jexus不是独立版本,所以需要先安装Mono   系统版本:Cenos7,Mono版本:5.0.1 Stable (5.0.1.1) Mono官方doc:http://www.mono-p ...
    
			
    8. 
						
  8. 175. Combine Two Tables【LeetCode】-LEFT JON 和RIGHT JOIN，两张表关联查询-java -sql入门
			
    Table: Person +-------------+---------+ | Column Name | Type | +-------------+---------+ | PersonId  ...
    
			
    9. 
						
  9. ECharts的简单使用
			
    ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...
    
			
    10. 
						
  10. Hibernate（四）
			
    Hibernate的二级缓存 理解缓存定义: 缓存(Cache):计算机领域非常通用的概念.它介于应用程序和永久性数据存储源(如硬盘上的文件或者数据库)之间,其作用是降低应用程序直接读写永久性数据存储 ...
    
			
    11.