Angular中封装fancyBox(图片预览)遇到问题小结

时间：2019-01-07分类：JavaScript作者：编程之家用户

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

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

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

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

我的页面</ 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></pre> </div> <p>2.通过通过Bower或npm安装工具安装</p> <div class="jb51code"> <pre class="brush:js;"> # Bower bower install fancybox --save # NPM npm install @fancyapps/fancybox --save</pre> </div> <p>3.项目中通过外部引用，一般放在lib文件夹下(我采用的是这种方法)</p> <p>在lib下新建一个文件目录fancy文件夹，然后引入下载好的.js和.css，在gulpfile.js添加自动化打包压缩任务，放在css目录中的lib.min.css和lib.min.js,在入口index.html中引入压缩后的文件。</p> <p>以本fancyBox插件举例：</p> <div class="jb51code"> <pre class="brush:js;"> 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); });</pre> </div> <p>封装在angular自定义组件中</p> <p>html模块：</p> <div class="jb51code"> <pre class="brush:js;"> <img-box img-url="'xxxxxx.png'" img-style="'width:740px;margin-left:-50px;'"></img-box></pre> </div> <p>directive.js模块：</p> <div class="jb51code"> <pre class="brush:js;"> var appModule = angular.module('app.core'); appModule.directive('imgBox',imgBox);</pre> </div> <div class="jb51code"> <pre class="brush:js;"> function imgBox() { return { restrict:'AE',transclude:true,scope:{ imgUrl:"=",imgStyle:'=' },template:'<a class="imageBox" href="{{imgUrl}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-fancybox><img style="{{imgStyle}}" src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>',link:function (scope,elem,attrs) { $(".imageBox").fancybox(); },} }</pre> </div> <p>官方写法：</p> <div class="jb51code"> <pre class="brush:js;"> <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"> 　　　　<p class="pic_center"><img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" /></p> 　　</a> 　　<a href="https://c1.staticflickr.com/9/8487/28808645394_a0ff0fc5c1_k.jpg" data-fancybox="images" data-width="2048" data-height="1365"> 　　　　<p class="pic_center"><img src="https://c1.staticflickr.com/9/8487/28808645394_9c7e6bf8a5_m.jpg" /></p> 　　</a></pre> </div> <p>　　标注：data-fancybox使用图片预览插件，三个值都为images表示在一个图片组内 data-width data-height 图像的真实宽高度 data-caption 标题信息</p> <p>　　启用方法：　</p> <div class="jb51code"> <pre class="brush:js;"> <script type="text/javascript"> $("[data-fancybox]").fancybox({ // Options will go here }); 　　</script></pre> </div> <p>　　遇到的问题：</p> <p>　　1.如果使用低版本的图片预览插件，回报Cannot read property 'msie' of undefined的错，原因低版本似乎使用$ .browser方法，但是从jQuery 1.9起已被删除</p> <p>　　2.在template或者templateUrl要使用html中传入的imgUrl值，不能直接使用imgUrl或者scope.imgUrl获取。</p> <p>　　方法：</p> <div class="jb51code"> <pre class="brush:js;"> template:'<a class="imageBox" href="{{imgUrl}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-fancybox><img style="{{imgStyle}}" src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>'</pre> </div> <p>　　　　　　或者</p> <div class="jb51code"> <pre class="brush:js;"> template:'<a class="imageBox" ng-href="{{imgUrl}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-fancybox><img style="{{imgStyle}}" ng-src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>'</pre> </div> <p>　　　　　后面的th:src可以不用拼接，如果你项目中是用cdn上的资源图片，可以使用。 </p> <p><h3>总结</h3></p> <p>以上所述是小编给大家介绍的Angular中封装fancyBox(图片预览)遇到问题小结。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。</p><p class="text-muted" style="margin-top:20px;">版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。</p> </div><div class="topcard-tags"><a href="https://www.jb51.cc/tag/angular/" class="tag_link" target="_blank">angular</a><a href="https://www.jb51.cc/tag/tupianyulan/" class="tag_link" target="_blank">图片预览</a></div></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <h3>相关推荐</h3> <hr /> <div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4759195.html" title="让kindeditor显示高亮代码">让kindeditor显示高亮代码</a></div> <div class="summary">kindeditor4.x代码高亮功能默认使用的是prettify插件，prettify是Google提供的一款源代码语法高亮着色器，它提供一种简单的形式来着色HTML页面上的程序代码，实现方式如下：首先在编辑器里面插入javascript代码：确定后会在编辑器插入这样的代码： <pre</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4759194.html" title="kindeditor4整合SyntaxHighlighter，让代码亮起来">kindeditor4整合SyntaxHighlighter，让代码亮起来</a></div> <div class="summary">这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮，因为SyntaxHighlighter的应用非常广泛，所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件上一篇“让kindeditor显示高亮代码”中已经</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">js如何实现弹出form提交表单？</a></div> <div class="summary">js如何实现弹出form提交表单？（图文+视频）</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">js怎么获取复选框选中的值</a></div> <div class="summary">js怎么获取复选框选中的值</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">js如何实现倒计时跳转页面</a></div> <div class="summary">js如何实现倒计时跳转页面</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675581.html" title="如何用js控制图片放大缩小">如何用js控制图片放大缩小</a></div> <div class="summary">如何用js控制图片放大缩小</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675580.html" title="JS怎么获取当前时间戳">JS怎么获取当前时间戳</a></div> <div class="summary">JS怎么获取当前时间戳</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675578.html" title="JS如何判断对象是否为数组">JS如何判断对象是否为数组</a></div> <div class="summary">JS如何判断对象是否为数组</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675577.html" title="JS怎么获取图片当前宽高">JS怎么获取图片当前宽高</a></div> <div class="summary">JS怎么获取图片当前宽高</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675574.html" title="JS对象如何转为json格式字符串">JS对象如何转为json格式字符串</a></div> <div class="summary">JS对象如何转为json格式字符串</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675573.html" title="JS怎么获取图片原始宽高">JS怎么获取图片原始宽高</a></div> <div class="summary">JS怎么获取图片原始宽高</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675566.html" title="怎么在click事件中调用多个js函数">怎么在click事件中调用多个js函数</a></div> <div class="summary">怎么在click事件中调用多个js函数</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675564.html" title="js如何往数组中添加新元素">js如何往数组中添加新元素</a></div> <div class="summary">js如何往数组中添加新元素</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675561.html" title="js如何拆分字符串">js如何拆分字符串</a></div> <div class="summary">js如何拆分字符串</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675559.html" title="JS怎么对数组内元素进行求和">JS怎么对数组内元素进行求和</a></div> <div class="summary">JS怎么对数组内元素进行求和</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675557.html" title="JS如何判断屏幕大小">JS如何判断屏幕大小</a></div> <div class="summary">JS如何判断屏幕大小</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675556.html" title="js怎么解析json数据">js怎么解析json数据</a></div> <div class="summary">js怎么解析json数据</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675555.html" title="js如何实时获取浏览器窗口大小">js如何实时获取浏览器窗口大小</a></div> <div class="summary">js如何实时获取浏览器窗口大小</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675552.html" title="原生JS实现别踩白块小游戏（五）">原生JS实现别踩白块小游戏（五）</a></div> <div class="summary">原生JS实现别踩白块小游戏（五）</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675551.html" title="原生JS实现别踩白块小游戏（一）">原生JS实现别踩白块小游戏（一）</a></div> <div class="summary">原生JS实现别踩白块小游戏（一）</div> </div></div> </div> </div> </div> <div class="col-sm-12 col-md-12 col-lg-3">  <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card">  <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7541177540"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div>  <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门文章</label> <ul class="n-list"><li><a href="https://www.jb51.cc/js/4759195.html" title="让kindeditor显示高亮代码">• 让kindeditor显示高亮代码</a></li><li><a href="https://www.jb51.cc/js/4759194.html" title="kindeditor4整合SyntaxHighlighter，让代码亮起来">• kindeditor4整合SyntaxHighlighter，让…</a></li><li><a href="https://www.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">• js如何实现弹出form提交表单？</a></li><li><a href="https://www.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">• js怎么获取复选框选中的值</a></li><li><a href="https://www.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">• js如何实现倒计时跳转页面</a></li><li><a href="https://www.jb51.cc/js/4675581.html" title="如何用js控制图片放大缩小">• 如何用js控制图片放大缩小</a></li><li><a href="https://www.jb51.cc/js/4675580.html" title="JS怎么获取当前时间戳">• JS怎么获取当前时间戳</a></li><li><a href="https://www.jb51.cc/js/4675578.html" title="JS如何判断对象是否为数组">• JS如何判断对象是否为数组</a></li><li><a href="https://www.jb51.cc/js/4675577.html" title="JS怎么获取图片当前宽高">• JS怎么获取图片当前宽高</a></li><li><a href="https://www.jb51.cc/js/4675574.html" title="JS对象如何转为json格式字符串">• JS对象如何转为json格式字符串</a></li></ul> </div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="https://www.jb51.cc/js/4759195.html" title="让kindeditor显示高亮代码">• 让kindeditor显示高亮代码</a></li><li><a href="https://www.jb51.cc/js/4759194.html" title="kindeditor4整合SyntaxHighlighter，让代码亮起来">• kindeditor4整合SyntaxHighlighter，让…</a></li><li><a href="https://www.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">• js如何实现弹出form提交表单？</a></li><li><a href="https://www.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">• js怎么获取复选框选中的值</a></li><li><a href="https://www.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">• js如何实现倒计时跳转页面</a></li><li><a href="https://www.jb51.cc/js/4675581.html" title="如何用js控制图片放大缩小">• 如何用js控制图片放大缩小</a></li><li><a href="https://www.jb51.cc/js/4675580.html" title="JS怎么获取当前时间戳">• JS怎么获取当前时间戳</a></li><li><a href="https://www.jb51.cc/js/4675578.html" title="JS如何判断对象是否为数组">• JS如何判断对象是否为数组</a></li><li><a href="https://www.jb51.cc/js/4675577.html" title="JS怎么获取图片当前宽高">• JS怎么获取图片当前宽高</a></li><li><a href="https://www.jb51.cc/js/4675574.html" title="JS对象如何转为json格式字符串">• JS对象如何转为json格式字符串</a></li></ul> </div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签<a href="https://www.jb51.cc/all" class="pull-right">更多</a> </label> <div class="topcard-tags"><a href="https://www.jb51.cc/tag/python/" title="python">python</a><a href="https://www.jb51.cc/tag/JavaScript/" title="JavaScript">JavaScript</a><a href="https://www.jb51.cc/tag/java/" title="java">java</a><a href="https://www.jb51.cc/tag/HTML/" title="HTML">HTML</a><a href="https://www.jb51.cc/tag/PHP/" title="PHP">PHP</a><a href="https://www.jb51.cc/tag/reactjs/" title="reactjs">reactjs</a><a href="https://www.jb51.cc/tag/C/" title="C#">C#</a><a href="https://www.jb51.cc/tag/Android/" title="Android">Android</a><a href="https://www.jb51.cc/tag/CSS/" title="CSS">CSS</a><a href="https://www.jb51.cc/tag/Nodejs/" title="Node.js">Node.js</a><a href="https://www.jb51.cc/tag/sql/" title="sql">sql</a><a href="https://www.jb51.cc/tag/rp/" title="r">r</a><a href="https://www.jb51.cc/tag/python3x/" title="python-3.x">python-3.x</a><a href="https://www.jb51.cc/tag/MysqL/" title="MysqL">MysqL</a><a href="https://www.jb51.cc/tag/jQuery/" title="jQuery">jQuery</a><a href="https://www.jb51.cc/tag/c4343/" title="c++">c++</a><a href="https://www.jb51.cc/tag/pandas/" title="pandas">pandas</a><a href="https://www.jb51.cc/tag/flutter/" title="Flutter">Flutter</a><a href="https://www.jb51.cc/tag/angular/" title="angular">angular</a><a href="https://www.jb51.cc/tag/IOS/" title="IOS">IOS</a><a href="https://www.jb51.cc/tag/django/" title="django">django</a><a href="https://www.jb51.cc/tag/linux/" title="linux">linux</a><a href="https://www.jb51.cc/tag/swift/" title="swift">swift</a><a href="https://www.jb51.cc/tag/typescript/" title="typescript">typescript</a><a href="https://www.jb51.cc/tag/luyouqi/" title="路由器">路由器</a><a href="https://www.jb51.cc/tag/JSON/" title="JSON">JSON</a><a href="https://www.jb51.cc/tag/luyouqishezhi/" title="路由器设置">路由器设置</a><a href="https://www.jb51.cc/tag/wuxianluyouqi/" title="无线路由器">无线路由器</a><a href="https://www.jb51.cc/tag/h3c/" title="h3c">h3c</a><a href="https://www.jb51.cc/tag/huasan/" title="华三">华三</a><a href="https://www.jb51.cc/tag/huasanluyouqishezhi/" title="华三路由器设置">华三路由器设置</a><a href="https://www.jb51.cc/tag/huasanluyouqi/" title="华三路由器">华三路由器</a><a href="https://www.jb51.cc/tag/diannaoruanjianjiaocheng/" title="电脑软件教程">电脑软件教程</a><a href="https://www.jb51.cc/tag/arrays/" title="arrays">arrays</a><a href="https://www.jb51.cc/tag/docker/" title="docker">docker</a><a href="https://www.jb51.cc/tag/ruanjiantuwenjiaocheng/" title="软件图文教程">软件图文教程</a><a href="https://www.jb51.cc/tag/C/" title="C">C</a><a href="https://www.jb51.cc/tag/vuejs/" title="vue.js">vue.js</a><a href="https://www.jb51.cc/tag/laravel/" title="laravel">laravel</a><a href="https://www.jb51.cc/tag/springboot/" title="spring-boot">spring-boot</a></div> </div> </div> </div> <div class="row row-sm rbox"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card">  <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7541177540"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> </div> <footer id="footer"> <div class="container" style="width:1440px;"> <div class="row hidden-xs"> <div class="col-sm-12 col-md-9 col-lg-9 site-link"> <ul class="list-inline"> <li>友情链接:</li><li><a href="https://www.runoob.com/" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank" rel="nofollow">菜鸟教程</a></li><li><a href="https://ai.jb51.cc/" title="ai导航是编程之家旗下ai方向的ai资讯、ai工具类集合导航站。" target="_blank" rel="nofollow">ai导航</a></li></ul> <ul class="list-inline"> <li><a href="https://www.jb51.cc" title="编程之家">编程之家</a></li>-<li><a href="https://t5m44pq3f7.jiandaoyun.com/f/638ca61b7b079a000a5d2dd6" rel="nofollow" title="我要投稿" target="_blank">我要投稿</a></li>-<li><a target="_blank" rel="nofollow" href="https://t5m44pq3f7.jiandaoyun.com/f/638ca8c69ad234000a79561f" title="广告合作">广告合作</a></li>-<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></li>-<li><a href="https://www.jb51.cc/disclaimers.html" title="免责声明">免责声明</a></li>-<li><a href="https://www.jb51.cc/sitemap/all/index.xml" title="网站地图" target="_blank">网站地图</a></li> </ul> <div>版权所有 © 2018编程之家<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> <div class="col-sm-12 col-md-3 col-lg-3"><img src="https://www.jb51.cc/qrcode.jpg" width="90" alt="微信公众号搜索 “ 程序精选 ” ，选择关注！"> <div class="pull-right">微信公众号搜<span class="text-danger">"程序精选"</span>关注<br />微信扫一扫可直接关注哦！</div> </div> </div> </div> </footer> <script src="https://www.jb51.cc/js/count.js"></script> </body> </html>