溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-10-02 00:01:55 來源：腳本之家 閱讀：128 作者：給你添麻煩了 欄目：web開發(fā)

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

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

然后在項目中引用jquery，然后在引用jquery.fancybox.min.css和jquery.fancybox.min.js。

如果需要動畫和鼠標(biāo)滾輪滾動效果還可以引入他提供的相關(guān)工具文件。

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內(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.通過通過Bower或npm安裝工具安裝

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

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

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

封裝在angular自定義組件中

html模塊：

<img-box img-url="'xxxxxx.png'" img-></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  src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>',
    link:function (scope,elem,attrs) {
      $(".imageBox").fancybox();
    },
  }
}

官方寫法：

<a  data-fancybox="images" data-width="2048" data-height="1365">
　　　　<img src="https://cache.yisu.com/upload/information/20200622/114/66510.jpg" />
　　</a>
　　<a  data-fancybox="images" data-width="2048" data-height="1366">
　　　　<img src="https://cache.yisu.com/upload/information/20200622/114/66513.jpg" />
　　</a>
　　<a  data-fancybox="images" data-width="2048" data-height="1365">
　　　　<img src="https://cache.yisu.com/upload/information/20200622/114/66539.jpg" />
　　</a>

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

　　啟用方法：　

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

　　遇到的問題：

　　1.如果使用低版本的圖片預(yù)覽插件，回報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  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  ng-src="{{imgUrl}}" th:src="${cdn.url('+"'{{imgUrl}}'"+')}" /></a>'

　　　　　后面的th:src可以不用拼接，如果你項目中是用cdn上的資源圖片，可以使用。

總結(jié)

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手