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 相关文章推荐
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
JS搜狐面试题分析
Dec 16 Javascript
node内置调试方法总结
Feb 22 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
详解javascript replace高级用法
Feb 17 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php截取视频指定帧为图片
2016/05/16 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
use jscript List Installed Software
2007/06/11 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
法律专业自荐信
2014/06/03 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
深入理解python多线程编程
2021/04/18 Python
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript