前言
因為一些特殊的業務需求，經過一個多月的蟄伏及思考，我開發了這款 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 檢視外掛效果，除了視窗的大小之外，兩種方式沒有任何區別：
See the Pen A jQuery lightbox plugin to view images just like in Windows. by Zongbin (@nzbin) on 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.需要引用的檔案
|
1 2 3 |
<link href="/path/to/magnify.css" 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 圖示。
|
1 |
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> |
2.HTML 結構
Magnify 預設使用以下結構，這樣的結構可以做相容處理，也是大多數 lightbox 使用的結構。
|
1 2 3 4 5 6 7 8 9 |
<a data-magnify="gallery" href="big-1.jpg"> <img src="small-1.jpg"> </a> <a data-magnify="gallery" href="big-2.jpg"> <img src="small-2.jpg"> </a> <a data-magnify="gallery" href="big-3.jpg"> <img src="small-3.jpg"> </a> |
也可以使用下面更簡潔的結構
|
1 2 3 |
<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 外掛一樣：
|
1 |
$('[data-magnify=gallery]').magnify(options); |
引數配置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
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 圖片檢視器的效果，但是部分功能比如縮圖還沒有實現。以下是實時演示：
See the Pen Magnify with another viewer style by Zongbin (@nzbin) on CodePen.
面對這樣的圖片檢視器足以令人心曠神怡~
總結
目前外掛整體已經趨於完善，但仍然有很多需要修改及新增的細節，尤其對移動端的支援，大家可以 star 一下隨時關注專案的更新動態。關於外掛的介紹就不再贅述了，如果大家發現了 Bug 或者有更好的建議，可以在 GitHub 中提問，也可以在此留言，大家的支援是我前進的最大動力！如果這款外掛對你有幫助或者你在專案中使用了這款外掛，歡迎留言告知！
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
