jQuery圖片查看插件Magnify開發詳解

前言

因為一些特殊的業務需求，經過一個多月的蟄伏及思考，我開發了這款 jQuery 圖片查看器插件 Magnify，它實現了 Windows 照片查看器的所有功能，比如模態窗的拖拽、調整大小、最大化，圖片的縮放、旋轉，平移、鍵盤控制等。插件的樣式都是最基礎的 CSS，定制非常容易，可以輕松修改成自己喜歡的樣式。隨后會陸續發布 React 及 Vue 相關版本的插件。本文主要介紹插件的特點及使用方法，而關于插件開發的細節將會在之后的具體文章中說明。

Github: https://github.com/nzbin/magnify

Website:  https://nzbin.github.io/magnify

開發小記

由于最近工作繁忙，幾乎每天都是晚上十點到家，然后開始編寫插件，睡覺時已過凌晨，如今身心俱疲。因為沒有找到相關的插件，所以很多問題都是絞盡腦汁獨立思考，比如以鼠標為中心縮放圖片、改變彈窗大小時對圖片移動的限制、圖片旋轉之后的縮放、平移等問題，而開發插件最讓人頭疼的就是細節，甚至大部分時間是在修復單一功能的 bug 。

另外，開發插件的最大難度不是功能實現，而是如何設計插件，如何讓插件的使用更簡單、更方便。關于如何設計插件并不是本篇文章的重點，我會在之后專門寫一篇介紹插件設計思想的文章。

插件所有的代碼幾乎都是在調整彈窗或者圖片的 width、height、left、top ，所以兼容性問題不大，主要是 2D 旋轉問題，IE 9 以下需要使用濾鏡實現。為了方便調整樣式，其中有很多相對位置的計算。

Magnify 采用了文件分離的方式編寫，使用 npm 插件打包，并沒有使用新語法，也沒有使用現在流行的打包工具。使用 npm 工具已經是項目開發打包發布的一個趨勢。

演示

如果你不想點開網址查看示例的話，可以通過下面的 CodePen 查看插件效果，除了視窗的大小之外，兩種方式沒有任何區別：

如果你的網速和其他原因不能打開 CodePen 的話，可以查看下面的圖片演示。

主要功能

Magnify 的功能可以參考 Windows 照片查看器，基本完成了可以實現的所有功能。

1.模態窗拖拽

如果圖片尺寸不大于展示區域，通過圖片展示區域也可以拖拽彈窗。這和 QQ 圖片查看器的操作方式是相同的。

2.模態窗調整大小

目前的調整大小存在一點 bug，但不影響整體的使用。

3.模態窗最大化

除了彈窗最大化，開發初期也設計了最小化的功能，但感覺有些雞肋，所以暫時沒有添加。

4.圖片縮放

可以通過鼠標滾輪、按鈕、鍵盤等操作

5.圖片旋轉

目前的圖片旋轉功能還沒有添加支持 IE9 以下版本的代碼。

6.鍵盤控制

Magnify 和 Windows 照片查看器的按鍵是一樣的

← 上一張 → 下一張 + 放大 - 縮小 ctrl + alt + 0 實際尺寸 ctrl + , 向左旋轉 ctrl + . 向右旋轉 7.全屏顯示

Magnify 的全屏顯示只實現了基本的展示功能，還沒有實現幻燈片自動輪播的功能。全屏環境下使用鍵盤控制圖片。

使用方法

Magnify 的使用和其他大多數 lightbox 插件的用法并沒有兩樣，如果你習慣了其它插件的使用，使用 Magnify 也不會有任何障礙。

1.需要引用的文件

<link href="/path/to/magnify.css" rel="external nofollow" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

Magnify 默認使用 font-awesome 的圖標，所以需要引用 font-awesome 的 css 文件。如果你想使用其它圖標，可以修改 options 的 icons 參數。在之后的版本中，我可能會添加定制的字體圖標文件或者使用 svg 圖標。

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">

2.HTML 結構

Magnify 默認使用以下結構，這樣的結構可以做兼容處理，也是大多數 lightbox 使用的結構。

<a data-magnify="gallery" href="big-1.jpg" rel="external nofollow" >
 <img src="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg" rel="external nofollow" >
 <img src="small-2.jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg" rel="external nofollow" >
 <img src="small-3.jpg">
</a>

也可以使用下面更簡潔的結構

<img data-magnify="gallery" data-src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" data-src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" data-src="big-3.jpg" src="small-3.jpg">

Magnify 的 HTML 結構包含以下幾個選項

添加 data-src 屬性可以鏈接到大圖。如果在 <a> 標簽中使用，它會覆蓋 href 屬性的值。添加 data-caption 屬性可以顯示標題。如果你不使用這個屬性，插件會顯示 URL 中的圖片名。添加 data-group 屬性可以對圖片分組。 3.初始化插件

如果在 HTML 中添加 data-magnify 屬性，插件會自動初始化。

手動初始化插件的方法和所有 jQuery 插件一樣：

$('[data-magnify=gallery]').magnify(options);

參數配置

options = {
  draggable: true,
  resizable: true,
  movable: true,
  keyboard: true,
  title: true,
  modalWidth: 320,
  modalHeight: 320,
  fixedContent: true,
  fixedModalSize: false,
  initMaximized: false,
  gapThreshold: 0.02,
  ratioThreshold: 0.1,
  minRatio: 0.1,
  maxRatio: 16,
  headToolbar: [
   'maximize',
   'close'
  ],
  footToolbar: [
   'zoomIn',
   'zoomOut',
   'prev',
   'fullscreen',
   'next',
   'actualSize',
   'rotateRight'
  ],
  icons: {
   maximize: 'fa fa-window-maximize',
   close: 'fa fa-close',
   zoomIn: 'fa fa-search-plus',
   zoomOut: 'fa fa-search-minus',
   prev: 'fa fa-arrow-left',
   next: 'fa fa-arrow-right',
   fullscreen: 'fa fa-photo',
   actualSize: 'fa fa-arrows-alt',
   rotateLeft: 'fa fa-rotate-left',
   rotateRight: 'fa fa-rotate-right'
  }
}

關于插件參數的具體含義，我就不在此復制黏貼了，請大家參考 官方文檔 的詳細說明。如有問題，可以在此留言。

自定義樣式

因為插件的樣式比較簡單，所以修改起來也非常容易。除了 Windows 照片查看器，QQ 的圖片查看器也非常的高大上。我們只要簡單修改就可以實現 QQ 圖片查看器的效果，但是部分功能比如縮略圖還沒有實現。以下是實時演示：

面對這樣的圖片查看器足以令人心曠神怡~

總結

目前插件整體已經趨于完善，但仍然有很多需要修改及添加的細節，尤其對移動端的支持，大家可以 star 一下隨時關注項目的更新動態。關于插件的介紹就不再贅述了，如果大家發現了 Bug 或者有更好的建議，可以在GitHub中提問，也可以在此留言，大家的支持是我前進的最大動力！如果這款插件對你有幫助或者你在項目中使用了這款插件，歡迎留言告知！