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

anyway 發(fā)布于2019-08-01 18:17 / 504人閱讀

摘要：隨后會陸續(xù)發(fā)布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調(diào)整大小存在一點，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。

前言

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

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

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

開發(fā)小記

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

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

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

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

演示

如果你不想點開網(wǎng)址查看示例的話，可以通過下面的 CodePen 查看插件效果，除了視窗的大小之外，兩種方式?jīng)]有任何區(qū)別：

See the Pen A jQuery lightbox plugin to view images just like in Windows.

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

主要功能

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

1.模態(tài)窗拖拽

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

2.模態(tài)窗調(diào)整大小

可以通過參數(shù)設置模態(tài)窗的最小寬高。目前的調(diào)整大小存在一點 bug，但不影響整體的使用。

3.模態(tài)窗最大化

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

4.圖片縮放

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

5.圖片旋轉(zhuǎn)

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

6.鍵盤控制

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

← 上一張

→ 下一張

+ 放大

- 縮小

ctrl + alt + 0 實際尺寸

ctrl + , 向左旋轉(zhuǎn)

ctrl + . 向右旋轉(zhuǎn)

7.全屏顯示

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

使用方法

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

1.需要引用的文件

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

2.HTML 結(jié)構(gòu)

Magnify 默認使用以下結(jié)構(gòu)，這樣的結(jié)構(gòu)可以做兼容處理，也是大多數(shù) lightbox 使用的結(jié)構(gòu)。

也可以使用下面更簡潔的結(jié)構(gòu)

Magnify 的 HTML 結(jié)構(gòu)包含以下幾個選項

添加 data-src 屬性可以鏈接到大圖。如果在標簽中使用，它會覆蓋 href 屬性的值。

添加 data-caption 屬性可以顯示標題。如果你不使用這個屬性，插件會顯示 URL 中的圖片名。

添加 data-group 屬性可以對圖片分組。

3.初始化插件

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

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

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

參數(shù)配置

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

關于插件參數(shù)的具體含義，我就不在此復制黏貼了，請大家參考官方文檔的詳細說明，以后的參數(shù)變化不會在博客中更新。如有問題，可以在此留言。

自定義樣式

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

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

總結(jié)

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

云服務器 GPU云服務器 js圖片查看器插件云服務器照片查看器不能查看圖片服務器照片手機查看圖片js插件

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/51623.html

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

摘要：隨后會陸續(xù)發(fā)布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調(diào)整大小存在一點，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言因為一些特殊的業(yè)務需求，經(jīng)過一個多月的蟄...

chaosx110 2019-08-29 14:06 評論0 收藏0
jQuery 圖片查看插件 Magnify 開發(fā)簡介（仿 Windows 照片查看器）

摘要：隨后會陸續(xù)發(fā)布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調(diào)整大小存在一點，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言因為一些特殊的業(yè)務需求，經(jīng)過一個多月的蟄...

Airmusic 2019-08-21 18:23 評論0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：發(fā)布應用市場的平臺搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點個開源不易。作者將原素材文章進行了新內(nèi)容的添加和重新排列，但是因為文章高效的代碼編寫技巧總結(jié)前端掘金本文總結(jié)了代碼編寫技巧，來提升你的和代碼。收藏安卓開發(fā)中非常實用優(yōu)秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉(zhuǎn)念一想,已經(jīng)有這么多優(yōu)秀的庫了,就沒必要再去重復造輪子了,便歸納工作中比...

ermaoL 2019-08-29 13:03 評論0 收藏0