摘要:隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點,但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器,的圖片查看器也非常的高大上。
前言
因為一些特殊的業務需求,經過一個多月的蟄伏及思考,我開發了這款 jQuery 圖片查看器插件 Magnify,它實現了 Windows 照片查看器的所有功能,比如模態窗的拖拽、調整大小、最大化,圖片的縮放、平移、旋轉,鍵盤控制等。插件的樣式都是最基礎的 CSS,定制非常容易,可以輕松修改成自己喜歡的樣式。隨后會陸續發布 React 及 Vue 相關版本的插件。本文主要介紹插件的特點及使用方法,而關于插件開發的細節將會在之后的具體文章中說明。
</>復制代碼
Github: https://github.com/nzbin/magnifyWebsite: 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.需要引用的文件</>復制代碼
Magnify 默認使用 font-awesome 的圖標,所以需要引用 font-awesome 的 css 文件。如果你想使用其它圖標,可以修改 options 的 icons 參數。在之后的版本中,我可能會添加定制的字體圖標文件或者使用 svg 圖標。
2.HTML 結構</>復制代碼
Magnify 默認使用以下結構,這樣的結構可以做兼容處理,也是大多數 lightbox 使用的結構。
</>復制代碼
也可以使用下面更簡潔的結構
</>復制代碼
Magnify 的 HTML 結構包含以下幾個選項
添加 data-src 屬性可以鏈接到大圖。如果在 標簽中使用,它會覆蓋 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 中提問,也可以在此留言,大家的支持是我前進的最大動力!如果這款插件對你有幫助或者你在項目中使用了這款插件,歡迎留言告知!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/51623.html
摘要:隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點,但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器,的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因為一些特殊的業務需求,經過一個多月的蟄...
摘要:隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點,但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器,的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因為一些特殊的業務需求,經過一個多月的蟄...
摘要:發布應用市場的平臺搶紅包工具紅包精靈開源啦掘金紅包精靈,如果喜歡,點個開源不易。作者將原素材文章進行了新內容的添加和重新排列,但是因為文章高效的代碼編寫技巧總結前端掘金本文總結了代碼編寫技巧,來提升你的和代碼。 收藏安卓開發中非常實用優秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉念一想,已經有這么多優秀的庫了,就沒必要再去重復造輪子了,便歸納工作中比...
閱讀 3737·2021-11-24 10:23
閱讀 2782·2021-09-06 15:02
閱讀 1286·2021-08-23 09:43
閱讀 2362·2019-08-30 15:44
閱讀 3058·2019-08-30 13:18
閱讀 796·2019-08-23 16:56
閱讀 1753·2019-08-23 16:10
閱讀 552·2019-08-23 15:08
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要