jQuery 插件 Magnify 開發簡介(仿 Windows 照片查看器)
前言
因為一些特殊的業務需求,經過一個多月的蟄伏及思考,我開發了這款 jQuery 圖片查看器插件 Magnify,它實現了 Windows 照片查看器的所有功能,比如模態窗的拖拽、調整大小、最大化,圖片的縮放、平移,鍵盤控制等。插件的樣式都是最基礎的 CSS,定制非常容易,可以輕松模仿 QQ 圖片查看器的效果。隨後會陸續發布 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.模態窗拖拽
如果圖片尺寸不大於展示區域,通過圖片展示區域也可以拖拽彈窗。
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);
參數配置
關於插件的詳細參數,我就不在此復制黏貼了,請大家參考 官方文檔 的詳細說明。如有問題,可以在此留言。
樣式修改
因為插件的樣式比較簡單,所以修改起來也非常容易。除了 Windows 照片查看器,QQ 的圖片查看器也非常的高大上。我們只要簡單修改就可以實現 QQ 圖片查看器的效果,但是部分功能比如縮略圖還沒有實現。
See the Pen Magnify with QQ viewer style by Zongbin (@nzbin) on CodePen.
面對這樣的圖片查看器足以令人心曠神怡~
總結
目前插件整體已經趨於完善,但仍然有很多需要修改及添加的細節,尤其對移動端的支持。關於插件的介紹就不再贅述了,如果大家發現了 Bug 或者有更好的建議,可以在 GitHub 中提問,也可以在此留言,大家的支持是我前進的最大動力!
我的博客即將搬運同步至騰訊雲+社區,邀請大家一同入駐:https://cloud.tencent.com/developer/support-plan
jQuery 插件 Magnify 開發簡介(仿 Windows 照片查看器)