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

更新时间：2017年09月01日 14:27:35 作者：给你添麻烦了

这篇文章主要介绍了Angular中封装fancyBox(图片预览)遇到的问题小结,需要的朋友可以参考下

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

然后在项目中引用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}}" 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();
    },
  }
}

官方写法：

<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}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-fancybox><img style="{{imgStyle}}" src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>'

　　　　　　或者

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>'

　　　　　后面的th:src可以不用拼接，如果你项目中是用cdn上的资源图片，可以使用。

总结

以上所述是小编给大家介绍的Angular中封装fancyBox(图片预览)遇到问题小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

angularjs点击图片放大实现上传图片预览

AngularJS入门教程之链接与图片模板详解
本文主要介绍 AngularJS 链接与图片模板的知识，这里整理了相关资料及示例代码，有兴趣的小伙伴可以参考下
2016-08-08
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2018-03-03
AngularJS动态菜单操作指令
在我们创建一个angularJS应用的时候，菜单往往往是不可或缺的元素之一。接下来通过本文给大家介绍AngularJS动态菜单操作指令，感兴趣的朋友一起学习吧
2017-04-04
对angular2中的ngfor和ngif指令嵌套实例讲解
今天小编就为大家分享一篇对angular2中的ngfor和ngif指令嵌套实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Angular项目过大时的合理拆分angular split
这篇文章主要为大家介绍了Angular项目过大时的合理拆分angular split示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
AngularJS使用拦截器实现的loading功能完整实例
这篇文章主要介绍了AngularJS使用拦截器实现的loading功能,结合完整实例形式分析了AngularJS拦截器的设置、调用及loading功能实现技巧,需要的朋友可以参考下
2017-05-05
angularjs自定义过滤器demo示例
这篇文章主要介绍了angularjs自定义过滤器,结合完整实例形式分析了angularjs自定义过滤器相关原理、使用方法及操作注意事项,需要的朋友可以参考下
2019-08-08
Angular CLI 安装和使用教程
本篇文章主要介绍了Angular CLI 安装和使用教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Angular2下使用pdf插件的方法详解
这篇文章主要给大家介绍了在Angular2下使用pdf插件的方法，使用这个插件是要实现一个pdf显示的功能，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-04-04
Angular6 正则表达式允许输入部分中文字符
这篇文章主要介绍了Angular6 正则表达式允许输入部分中文字符的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具