Angular中封裝fancyBox(圖片預(yù)覽)遇到問(wèn)題小結(jié)

更新時(shí)間：2017年09月01日 14:27:35 作者：給你添麻煩了

這篇文章主要介紹了Angular中封裝fancyBox(圖片預(yù)覽)遇到的問(wèn)題小結(jié),需要的朋友可以參考下

首先在官網(wǎng)下載最新版的fancyBox(一定要去最新網(wǎng)站，以前依賴的jquery版本偏低)，附上鏈接：

http://fancyapps.com/fancybox/3/

然后在項(xiàng)目中引用jquery，然后在引用jquery.fancybox.min.css和jquery.fancybox.min.js。

如果需要?jiǎng)赢?huà)和鼠標(biāo)滾輪滾動(dòng)效果還可以引入他提供的相關(guān)工具文件。

1.你可以通過(guò)鏈接.css和.js在你的html文件來(lái)安裝fancyBox 。確保您也加載了jQuery庫(kù)。以下是用作示例的基本HTML模板

<！DOCTYPE html><HTML>
<HEAD>
 <meta charset =“utf-8”>
 <title>我的頁(yè)面</ title>
 <！ - CSS - >
 <link rel =“stylesheet”type =“text / css”href =“jquery.fancybox.min.css”>
</ HEAD>
<BODY>
 <！ - 您的HTML內(nèi)容到這里 - >
 <！ - JS - >
 <script src =“// code.jquery.com/jquery-3.2.1.min.js”> </ script>
 <script src =“jquery.fancybox.min.js”> </ script>
</ BODY>
</ HTML>

2.通過(guò)通過(guò)Bower或npm安裝工具安裝

# Bower
bower install fancybox --save
# NPM
npm install @fancyapps/fancybox --save

3.項(xiàng)目中通過(guò)外部引用，一般放在lib文件夾下(我采用的是這種方法)

在lib下新建一個(gè)文件目錄fancy文件夾，然后引入下載好的.js和.css，在gulpfile.js添加自動(dòng)化打包壓縮任務(wù)，放在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'})) //放在哪個(gè)文件中
    .pipe(gulp.dest('css'));//打包輸出目錄(在哪個(gè)目錄下)
  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();
    },
  }
}

官方寫(xiě)法：

<a  data-fancybox="images" data-width="2048" data-height="1365">
　　　　<img src="https://c1.staticflickr.com/9/8387/29155724700_58c1cb71cf_m.jpg" />
　　</a>
　　<a  data-fancybox="images" data-width="2048" data-height="1366">
　　　　<img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" />
　　</a>
　　<a  data-fancybox="images" data-width="2048" data-height="1365">
　　　　<img src="https://c1.staticflickr.com/9/8487/28808645394_9c7e6bf8a5_m.jpg" />
　　</a>

　　標(biāo)注：data-fancybox使用圖片預(yù)覽插件，三個(gè)值都為images表示在一個(gè)圖片組內(nèi) data-width data-height 圖像的真實(shí)寬高度 data-caption 標(biāo)題信息

　　啟用方法：　

<script type="text/javascript">
 $("[data-fancybox]").fancybox({
 // Options will go here
 });
　　</script>

　　遇到的問(wèn)題：

　　1.如果使用低版本的圖片預(yù)覽插件，回報(bào)Cannot read property 'msie' of undefined的錯(cuò)，原因低版本似乎使用$ .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可以不用拼接，如果你項(xiàng)目中是用cdn上的資源圖片，可以使用。

總結(jié)

以上所述是小編給大家介紹的Angular中封裝fancyBox(圖片預(yù)覽)遇到問(wèn)題小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: