Angular中封装fancyBox(图片预览)遇到问题小结       这篇文章主要介绍了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 =“// /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 @fancyap凡科抠图/fancybox --save

3.项目中通过外部引用，一般放在lib文件夹下(我采用的是这种方法)

<中引入压缩后的文件。

以本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);

template:' a href="{{imgUrl}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-fancybox img src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" / /a ', link:function (scope,elem,attrs) { $(".imageBox").fancybox(); }

官方写法：

 a href="9/4700_a_k.jpg" data-fancybox="images" data-width="2048" data-height="1365" 
 img src="9/4700_58c1cb71cf_m.jpg" / 
 a href="9/3462_abebaddc38_k.jpg" data-fancybox="images" data-width="2048" data-height="1366" 
 img src="9/3462_f890687b7a_m.jpg" / 
 a href="9/5394_a0ff0fc5c1_k.jpg" data-fancybox="images" data-width="2048" data-height="1365" 
 img src="9/5394_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 href="{{imgUrl}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-fancybox img src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" / /a '

或者

template:' a ng-href="{{imgUrl}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-fancybox img ng-src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" / /a '

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

总结

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