首先在官网下载最新版的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. Docker for windows10 配置镜像加速
			
    windows玩docker的时候,经常碰到这种问题: Error response from daemon: Get https://registry-1.docker.io/v2/: net/ht ...
    
			
    2. 
						
  2. linux和Windows实现文件共享之samba的安装与配置
			
    背景: 项目需求linux的一个目录,需要在两台windows目录上面进行同时共享. 使用mount时发现,通过mount将同一个linux上面的目录挂载在两台windows机器上时,会出现文件隐藏的 ...
    
			
    3. 
						
  3. （转）spring学习之@ModelAttribute运用详解
			
    @ModelAttribute使用详解 1 @ModelAttribute注释方法 例子(1),(2),(3)类似,被@ModelAttribute注释的方法会在此controller每个方法执行前被 ...
    
			
    4. 
						
  4. Qt For Android 开发环境配置
			
    想了想,还是再写一篇关于Qt for Android开发环境配置的教程. 准备:Java jdk,Android sdk,Android adb,Android ndk,Android ant,Qt  ...
    
			
    5. 
						
  5. hdu 6047 Maximum Sequence（贪心）
			
    Description Steph is extremely obsessed with "sequence problems" that are usually seen on  ...
    
			
    6. 
						
  6. Web Animations API (JS动画利器)
			
    原文地址:→传送门 写在前面 之前学习了CSS animation/setTimeout/setInterval/requestAnimationFrame等,这些都可以用在某种场景下的小动画,也可以 ...
    
			
    7. 
						
  7. Python爬虫从入门到放弃（二十三）之 Scrapy的中间件Downloader Middleware实现User-Agent随机切换
			
    总架构理解Middleware 通过scrapy官网最新的架构图来理解: 这个图较之前的图顺序更加清晰,从图中我们可以看出,在spiders和ENGINE提及ENGINE和DOWNLOADER之间都可 ...
    
			
    8. 
						
  8. python_装饰器_语法糖
			
    什么是高阶函数? -- 把函数名当做参数传给另外一个函数,在另外一个函数中通过参数调用执行 #!/usr/bin/python3 __author__ = 'beimenchuixue' __blog ...
    
			
    9. 
						
  9. java虚拟机详解
			
    注: 此篇文章可以算是读<深入理解Java虚拟机:JVM高级特性与最佳实践>一书后的笔记总结加上我个人的心得看法. 整体总结顺序沿用了书中顺序,但多处章节用自己的话或直白或扩展的进行了重新 ...
    
			
    10. 
						
  10. 解决QT编程出现 C2001错误
			
    最近做项目时,在debug输出或者是在其他用到字符串常量的时候,总会时不时的出现C2001错误,提示"常量中有换行符", 比如 tr("删除此设备") 或者 q ...
    
			
    11.