jQuery 圖片查看插件 Magnify 開發簡介（仿 Windows 照片查看器）

前言

由於一些特殊的業務需求，通過一個多月的蟄伏及思考，我開發了這款 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.

若是你的網速和其餘緣由不能打開 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="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="stylesheet">

2.HTML 結構

Magnify 默認使用如下結構，這樣的結構能夠作兼容處理，也是大多數 lightbox 使用的結構。

<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>

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

<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 圖片查看器的效果，可是部分功能好比縮略圖尚未實現。

See the Pen Magnify with another viewer style
面對這樣的圖片查看器足以使人心曠神怡~

總結

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