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实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
vue和小程序项目中使用iconfont的方法
May 19 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调用三种数据库的方法(3)
2006/10/09 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
js控制table合并具体实现
2014/02/20 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
Python进阶篇之字典操作总结
2016/11/16 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
英国复古服装购物网站:Collectif
2019/10/30 全球购物
个人自我评价和职业目标
2014/01/24 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
文明礼仪标语
2014/06/13 职场文书
出国签证在职证明
2014/09/20 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
python开发制作好看的时钟效果
2022/05/02 Python