angular中封装fancyBox(图片预览)

首先在官网下载最新版的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}}" 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}}" data-fancybox><img style="{{imgStyle}}" src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>'

      或者
     template:'<a class="imageBox" ng-href="{{imgUrl}}" data-fancybox><img style="{{imgStyle}}" ng-src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>'
     后面的th:src可以不用拼接,如果你项目中是用cdn上的资源图片,可以使用。
 

 

  -----原创文章,©版权所有,转载请注明标明出处:http://www.cnblogs.com/doinbean

  



 

转载于:https://www.cnblogs.com/doinbean/p/7459838.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251942.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

十二省联考题解 - JLOI2019 题解

十二省联考题解 - JLOI2019 题解 两个T3的难度较大 平均代码量远大于去年省选 套路题考查居多 A 难度等级 1 $n^2$暴力可以拿到$60$分的优秀成绩 然后可以想到把区间异或转化为前缀两点异或 可以想到使用二分答案的方法可持久化Trie解决&#xff0c;但是时间复杂度为$n\log^2 (…

前端vue的get和post请求

vue的get和post需要两个文件vue.js和vue-resource.js 以下是实现的代码&#xff0c;可以参考一下&#xff0c;需要注意的接口的请求需要考虑跨域的问题&#xff0c;其次就是访问页面需要在tomcat下访问&#xff0c;否则也会报跨域的问题 <!DOCTYPE html> <html lang&q…

[Vijos 1143]三取方格数

Description 设有N*N的方格图&#xff0c;我们将其中的某些方格填入正整数&#xff0c; 而其他的方格中放入0。 某人从图得左上角出发&#xff0c;可以向下走&#xff0c;也可以向右走&#xff0c;直到到达右下角。 在走过的路上&#xff0c;他取走了方格中的数。&#xff08;取…

线扫相机相关规格说明

工业线阵相机与面阵相机特点分析 点滴成海~ 2018-06-29 13:50:38 12184 收藏 29 分类专栏&#xff1a; intership 文章标签&#xff1a; 视觉元件分析 版权 最近在公司实习&#xff0c;实习中的项目是使用的是微视的一款线阵相机&#xff08;Microview MVC1024DLM-GE35&…

postgresql 不同数据库不同模式下的数据迁移

编写不容易,转载请注明出处谢谢, 数据迁移 因为之前爬虫的时候&#xff0c;一部分数据并没有上传到服务器&#xff0c;在本地。本来用的就是postgresql&#xff0c;也没用多久&#xff0c;数据迁移的时候&#xff0c;也遇到了很多问题&#xff0c;第一次使pg_dump xx > file…

Oracle中主键自增长

最近在学习Oracle和MySql&#xff0c;MySql有自动配置主键自增长auto_increment&#xff0c;这样在输入数据的时候可以不考虑主键的添加&#xff0c;方便对数据库的操作。 在Oracle中设置自增长首先用到sequence序列&#xff1b; 以创建学生表为例&#xff1a; create table St…

3.单例模式

public class Singleton {//定义私有的静态变量 private static Singleton singleton;//私有化构造函数private Singleton(){}//获取实例public static Singleton getInstance(){//同步前判断避免同步的性能损耗if(nullsingleton){//预防多线程问题synchronized(Singleton.clas…

docker与mmdetection

这里不再介绍 mmdetection 的安装和配置&#xff0c;使用 mmdetection 较简单的方法是使用已安装 mmdetection 的 docker 容器。这样直接省去了安装 mmdetection 的过程&#xff0c;让重心放在模型训练上&#xff01; 如果你对 docker 和 mmdetection 还不是很熟悉&#xff0c…

互联网平台掘金三四五线城市,你需要知道的9.9个真相

互联网上半场结束&#xff0c;一二线城市流量红利消失&#xff0c;许多互联网平台、投资机构一度经历至黑之夜。融资失败、公司倒闭、大裁员迭出。对比鲜明的是&#xff0c;深耕三四五线城市的互联网平台正在迅猛崛起。春节期间&#xff0c;小部分敏锐的业者注意到互联网产品在…

平滑重启更新(GR机制)

平滑重启更新&#xff08;GR机制&#xff09; 什么是平滑启动机制 是一种在协议重启时保证转发业务不中断的机制。什么时候用到平滑重启 平滑重启一般应用于业务更新或者版本发布过程中&#xff0c;能够避免因为代码发布重启服务导致的暂时性服务不可用的影响。ngnix 平滑重启和…

正斜杠( / )和反斜杠( \ )的区别

反斜杠“\”是电脑出现了之后为了表示程序设计里的特殊含义才发明的专用标点。所以除了程序设计领域外&#xff0c;任何地方都不应该使用反斜杠。 如何区分正反斜杠 英语&#xff1a;"/" 英文是forward slash, “\" 是backward slash形象些比喻的话&#xff0c;…

MMDetectionV2 + Colab

MMDetectionV2 Colab 超详细教程及踩坑实录 文章目录 前言一、环境配置二、准备自己的数据集 Aug.14更新三&#xff1a;修改config文件 3.1 文件结构3.2 &#xff08;本地&#xff09;修改config文件 3.2.1 &#xff08;本地&#xff09;构造自己模型的权重文件3.2.2 &#x…

刚刚,OpenStack 第 19 个版本来了,附28项特性详细解读!

刚刚&#xff0c;OpenStack 第 19 个版本来了&#xff0c;附28项特性详细解读&#xff01; OpenStack Stein版本引入了新的多云编排功能&#xff0c;以及帮助实现边缘计算用例的增强功能。 OpenStack由一系列相互关联的项目组成&#xff0c;这些项目可以以不同的组合方式组合在…

SQL作业:综合练习(二)的返评

一&#xff1a;作业题目&#xff1a;综合练习&#xff08;二&#xff09; 二&#xff1a;题目要求&#xff1a; 1、创建数据库CPXS&#xff0c;保存于E盘根目录下以自己学号姓第一个字母&#xff08;阿拉伯数字大写字母&#xff09;方式创建的文件夹中&#xff0c;初始大小5MB&…

caffe cifar10试跑问题总结

caffe cifar10试跑问题总结 [daniel] 写了一个脚本可以直接用来添加环境变量&#xff1a;/Users/songdanzju/daniel_script/export_for_ananconda.sh#! /bin/bash export PATH~/ananconda/bin:$PATH export DYLD_FALLBACK_LIBRARY_PATH~/anaconda:~/anaconda/lib:/usr/local/l…

paddlepaddle-VisualDL2.0对项目进行可视化调参

如果需要更好的阅读体验&#xff0c;可以在ai studio上fork该项目&#xff1a;使用VisualDL2.0对项目进行可视化调参 调参是深度学习必须要做的事情。数据和模型处理好后&#xff0c;需要进行模型训练&#xff0c;这个时候就需要进行调参了。一种好的参数配置&#xff0c;可以…

第一、二次实训作业

1.编写程序&#xff1a; 声明一个整型变量a&#xff0c;并赋初值5&#xff0c;在程序中判断a是奇数还是偶数&#xff0c;然后输出判断的结果。 package 判断奇偶; public class liux { public static void main(String[] args){ int x5; if(x%20){ System.out.println("这…

推荐一款作图工具

以前看到别人的时序图觉得好好看&#xff0c;然后就想这都是用的什么工具画出来的呢&#xff1f;然后看到了一个师兄用的这个工具&#xff0c;真的挺好用的。这是是试用版的界面。类图我觉着看起来效果都挺不错的。转载于:https://www.cnblogs.com/tuhooo/p/8874410.html

【codeforces】【比赛题解】#849 CF Round #431 (Div.2)

cf的比赛越来越有难度了……至少我做起来是这样。 先看看题目吧&#xff1a;点我。 这次比赛是北京时间21:35开始的&#xff0c;算是比较良心。 【A】奇数与结束 "奇数从哪里开始&#xff0c;又在哪里结束&#xff1f;梦想从何处起航&#xff0c;它们又是否会破灭呢&#…

PaddleDetection支持的数据格式

PaddleDetection支持的数据格式 目前#PaddleDetection支持43种数据格式&#xff1a;coco voc widerface。在这里我们主要说明一下如何使用自定义COCO进行目标检测、实例分割&#xff1b;如何使用自定义VOC数据集进行目标检测。在PaddleDetection新的版本中&#xff0c;我们将数…