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

2024-10-12 19:13:05

首先在官网下载最新版的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点击图片放大预览的具体代码,供大家参考,具体内容如下承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</span
Angular中封装fancyBox(图片预览)遇到问题小结

首先在官网下载最新版的fancyBox(一定要去最新网站,以前依赖的jquery版本偏低),附上链接: http://fancyapps.com/fancybox/3/ 然后在项目中引用jquery,然后在引用jquery.fancybox.min.css和jquery.fancybox.min.js. 如果需要动画和鼠标滚轮滚动效果还可以引入他提供的相关工具文件. 1.你可以通过链接.css和.js在你的html文件来安装fancyBox .确保您也加载了jQuery库.以下是用作示例的基本H
JavaScript中的FileReader图片预览上传功能实现代码

关于filereader图片预览上传功能的实现代码如下所示: html: <div style="width:200px;height:200px;"> <label for="ceshi" style="display:block;"> <img style="width:200px;height:200px;" id="image" src=""/>
vue实现压缩图片预览并上传功能（promise封装）

本文实例为大家分享了vue实现压缩图片预览并上传的具体代码,供大家参考,具体内容如下主要用到filereader.canvas 以及 formdata 这三个h5的api 过程大致分为三步: 用户使用input file上传图片的时候,用filereader读取用户上传的图片数据(base64格式) 把图片数据传入img对象,然后将img绘制到canvas上,再调用canvas.toDataURL对图片进行压缩获取到压缩后的base64格式图片数据,转成二进制塞入formdata,再通过Xm
JS解决IOS中拍照图片预览旋转90度BUG的问题

上篇文章[Js利用Canvas实现图片压缩功能]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编程了.通过度娘找到了相关资料,解决方法记录在此.这个问题的具体因素其实我还是不清楚是为何导致的,只有IOS和部分三星手机会出现此bug. 绝大部分的安卓机并无此问题. 解决此问题需要引入一个第三方 JS 库: exif.js 下载地址:https://github.com/exif-js/exif-
vue实现图片预览组件封装与使用

这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能,在父组件中每一张图片都可以实现图片放大查看. 子组件  <template> <div id="imgEnlarge" ref="imgEnlarge" class="img-bg" @click="imgBgHide" v-show="isShow"> <
vue项目中实现图片预览的公用组件功能

今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件那边也会有一个查看影像的按钮. 所以,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去. 后来,产品要求图片可以旋转缩放. 废话不多说,贴上代码: <template> <div class="filePreview&q
详解微信小程序开发聊天室—实时聊天，支持图片预览

第一次写小程序,老板就让我用websoket写个聊天对话,群聊这种.第一次写聊天功能,第一次用websoket,第一次用小程序,这是在考验我吗?不过我还是研究了一下,终于实现了. 首先看一下界面,界面很简单,就是首页刚进来获取了用户信息头像,昵称等.点击进入聊天室就可以聊天了,下面我介绍的是前端代码实现,后台需要做的很简单,就是你给他发送什么数据,他就给你返回什么数据,就是在接收前台发送过来的图片的时候需要做个格式转换,因为有时候前端将接收到的json字符串转换json对象的时候,遇到有特殊的标
Android实现图片预览与保存功能

目录前言引入插件总结前言在App开发中,通常为了省流提高加载速度提升用户体验我们通常在列表中或新闻中的插图都是以缩略图压缩过的图片来进行展示,当用户点击图片时我们再去加载真正像素的大图让用户预览,如果用户想保存并且可以保存到自己的相册中,那么在Flutter中如何实现这样的功能,看完这篇文章让你1分钟瞬间实现. 引入插件首先,我们需要引入强大的Flutter社区中的两个插件,分别是: photo_view: ^0.13.0 用来加载查看大图. image_gallery_saver:
基于jquery实现的上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码上传图片验证复制代码代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u
nodejs 图片预览和上传的示例代码

本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下: 效果如下: 前言一般在上传图片之前需要暂存在本地预览一下. 前端图片预览用的是 FileReader的readAsDataURL方法 nodejs 图片上传用的是中间件 Multer 本地图片预览 FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据. readAsDataURL方法用于读取指定的Blob或文件的内容.当读取操

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

相关推荐

随机推荐