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


Posted in Javascript onSeptember 01, 2017

首先在官网下载最新版的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}}" 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(图片预览)遇到问题小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 小数取整的函数
May 10 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
ES10 特性的完整指南小结
Mar 04 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 #Javascript
Angularjs实现上传图片预览功能
Sep 01 #Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 #Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 #Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
基于Vue.js 2.0实现百度搜索框效果
Dec 28 #Javascript
JavaScript闭包的简单应用
Sep 01 #Javascript
You might like
php重定向的三种方法分享
2012/02/22 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
出国签证在职证明
2014/01/16 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
优秀护士获奖感言
2014/02/20 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
标准版离职证明书
2014/09/12 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
小学运动会前导词
2015/07/20 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android