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

前言

由於一些特殊的業務需求,通過一個多月的蟄伏及思考,我開發了這款 jQuery 圖片查看器插件 Magnify,它實現了 Windows 照片查看器的全部功能,好比模態窗的拖拽、調整大小、最大化,圖片的縮放、旋轉,平移、鍵盤控制等。插件的樣式都是最基礎的 CSS,定製很是容易,能夠輕鬆修改爲本身喜歡的樣式。隨後會陸續發佈 React 及 Vue 相關版本的插件。本文主要介紹插件的特色及使用方法,而關於插件開發的細節將會在以後的具體文章中說明。css

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

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

開發小記

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

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

插件全部的代碼幾乎都是在調整彈窗或者圖片的 width、height、left、top ,因此兼容性問題不大,主要是 2D 旋轉問題,IE 9 如下須要使用濾鏡實現。爲了方便調整樣式,其中有不少相對位置的計算。svg

Magnify 採用了文件分離的方式編寫,使用 npm 插件打包,並無使用新語法,也沒有使用如今流行的打包工具。使用 npm 工具已是項目開發打包發佈的一個趨勢。工具

演示

若是你不想點開網址查看示例的話,能夠經過下面的 CodePen 查看插件效果,除了視窗的大小以外,兩種方式沒有任何區別:字體

See the Pen A jQuery plugin to view images just like in Windows. by Zongbin (@nzbin) on CodePen.spa

若是你的網速和其餘緣由不能打開 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 by Zongbin (@nzbin) on CodePen.

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

總結

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

個人博客即將搬運同步至騰訊雲+社區,邀請你們一同入駐:https://cloud.tencent.com/developer/support-plan

相關文章
相關標籤/搜索