angular中封装fancyBox(图片预览)
首先在官网下载最新版的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安装工具安装
# Bower3.项目中通过外部引用，一般放在lib文件夹下(我采用的是这种方法)
bower install fancybox --save # NPM
npm install @fancyapps/fancybox --save
在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">template:'<a class="imageBox" href="{{imgUrl}}" data-fancybox><img style="{{imgStyle}}" src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>'
$("[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" 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(图片预览)的更多相关文章
- 在 vue 中使用 vieiwer 图片预览插件
https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...
- vue项目中编写一个图片预览的公用组件
今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件 ...
- vue项目中图片预览旋转功能
最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...
- JS 解决 IOS 中拍照图片预览旋转 90度 BUG
上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
- [RN] React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中，放大报错问题
React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题 报错如下: Cannot record touch end w ...
- win7中资源管理器不能显示图片预览的解决方法
在用xp的时候,在资源管理器里面预览图片文件是在普通不过的事情了.换到win7之后,图片文件一直不能预览,只是显示图标还挺烦的.肯定是哪里设置的不对,下午闲来无事,找到是哪里的问题了. 如果你也遇到相 ...
- JS魔法堂之实战：纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- dwz+jquery+fileupload+springmvc实现文件上传 及图片预览
1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...
- js实现移动端图片预览：手势缩放， 手势拖动，双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
随机推荐
- Memcache+cookie实现模拟session
上一片讲到Memcached在Windows上的安装,和用Telnet工具进行命令操作,在稍微了解了原理之后,我也就开始尝试着用程序来对Memcached进行操作.这一篇分为两个部分,第一部分是用.n ...
- 一些重要 Docker 命令的简单介绍
1. 拉取 Docker 镜像 由于容器是由 Docker 镜像构建的,首先我们需要拉取一个 docker 镜像来开始.我们可以从 Docker Registry Hub 获取所需的 docker 镜 ...
- ngin隐藏版本号
Nginx默认是显示版本号的,如: 这样就给人家看到你的服务器nginx版本,这样暴露出来的版本号就容易变成攻击者可利用的信息.所以,从安全的角度来说,隐藏版本号会相对安全些! 配置如下: 修改n ...
- 关于Class.forName(className).newInstance()介绍
Class.forName(xxx.xx.xx) 返回的是一个类 首先你要明白在java里面任何class都要装载在虚拟机上才能运行.这句话就是装载类用的(和new 不一样,要分清楚). 至于什么时候 ...
- (转)Memcached 在windows下的java使用
Memcached 在windows下的java使用 研究这个东东主要是为了解决在教务管理中选课系统的大并发情况下数据库频繁读写造成速度慢的问题,但要使用WEB服务器的内存,是不是可靠还需要验证, ...
- SLAM中的优化理论（二）- 非线性最小二乘
本篇博客为系列博客第二篇,主要介绍非线性最小二乘相关内容,线性最小二乘介绍请参见SLAM中的优化理论(一)-- 线性最小二乘.本篇博客期望通过下降法和信任区域法引出高斯牛顿和LM两种常用的非线性优化方 ...
- 微信客户端+微信公众平台+新浪云SAE+Arduino+WS100（控制LED）
第一步:准备 1.智能手机微信客户端或微信电脑版 2.注册微信公众平台 https://mp.weixin.qq.com 3.注册新浪账号 http://www.sinacloud.com 4.拥有一 ...
- 拯救莫莉斯[GDOI2014]
时间限制:1s 内存限制:256MB 问题描述 莫莉斯·乔是圣域里一个叱咤风云的人物,他凭借着自身超强的经济头脑,牢牢控制了圣域的石油市场. 圣域的地图可以看成是一个n*m的矩阵.每个整数坐标 ...
- 156个Python网络爬虫资源
本列表包含Python网页抓取和数据处理相关的库. 网络相关 通用 urllib - 网络库(标准库) requests - 网络库 grab - 网络库(基于pycurl) pycurl - 网络库 ...
- Go的类型断言解析
经常地我们对一个接口值的动态类型是不确定的,如方法的形参为接口类型时,此时就需要检验它是否符合我们需要的类型.类型断言是一个使用在接口值上的操作.断言类型的语法:x.(T),这里x表示一个接口的类型, ...