PhotoSwipe介绍（1）
原文地址，點(diǎn)擊直達(dá)，閱讀效果更佳
介紹
純js畫廊 （gallery），沒有依賴性（dependencies），側(cè)重移動(dòng)端。
- API文檔
- Github地址
- Twitter主頁
畫廊風(fēng)格
所有控件（All controls）
標(biāo)題（caption）、分享（facebook,tweet）、點(diǎn)擊切換控制
極簡主義
沒有標(biāo)題、透明（transparent）背景、點(diǎn)擊關(guān)閉。
觸控手勢（gestures）
支持所有基本手勢：左右滑動(dòng)圖像切換；雙指張開圖片放大（spread to zoom）；雙指內(nèi)聚（捏：Pinch）縮小或關(guān)閉圖片；
點(diǎn)擊切換控制；雙擊縮放；
雙指張開圖片放大
PhotoSwipe聲稱是第一個(gè)支持基于javascript的圖像縮放的開源庫。即使瀏覽器的本地縮放功能被禁用，該插件仍然可以支持圖像縮放。
手指動(dòng)作如下圖：
雙指內(nèi)聚（捏：Pinch）縮小或關(guān)閉圖片
畫廊的背景會(huì)隨著圖片的縮小而逐漸淡出，當(dāng)手勢完成后，畫廊將關(guān)閉。
手指動(dòng)作如下圖：
垂直猛擊關(guān)閉畫廊
因?yàn)閱问殖忠苿?dòng)設(shè)備的時(shí)候，關(guān)閉按鈕在右上角，很難被點(diǎn)擊到，所以添加此手勢。
手指動(dòng)作如下圖：
水平(Horizontal)滑動(dòng)切換圖片
即使放大當(dāng)前圖片，也可以水平滑動(dòng)切換圖片。PhotoSwipe在過渡期間不會(huì)阻止滑動(dòng)。
手指動(dòng)作如下圖：
自定義手勢
你可以指定自己的點(diǎn)擊和雙擊手勢動(dòng)作。
瀏覽器歷史API
PhotoSwipe操作瀏覽器的歷史紀(jì)錄，以便用戶可以鏈接到每個(gè)圖庫項(xiàng)，可以通過瀏覽器的“后退”按鈕關(guān)閉圖庫。關(guān)閉圖庫時(shí)，將還原初始URL。
這個(gè)特性以模塊的形式出現(xiàn)。你可以將其完全排除在構(gòu)建之外，或者根據(jù)產(chǎn)品URL結(jié)構(gòu)的要求將其分離出來。
“后退”按鈕關(guān)閉畫廊
當(dāng)畫廊打開時(shí)，PhotoSwipe會(huì)向?yàn)g覽器添加一個(gè)歷史記錄，用戶可以通過瀏覽器的“后退”按鈕關(guān)閉它。
每一個(gè)畫廊項(xiàng)（圖片）都有一個(gè)唯一的URL
用戶可以分享和鏈接到每個(gè)圖片。哈希后綴獲得兩個(gè)額外參數(shù)：
gid：畫廊索引
pid：圖片索引
加載和顯示圖片
創(chuàng)建快速加載的錯(cuò)覺（illusion）。圖片隨著數(shù)據(jù)的到來逐漸顯示（類似圖片懶加載）
照片在被完全載入之前顯示。此功能在觸摸設(shè)備上禁用，因?yàn)樗赡軐?dǎo)致滑動(dòng)轉(zhuǎn)換延遲。
低分辨率圖像即時(shí)顯示，然后拉伸到全尺寸。
將縮略圖的源代碼傳遞給PhotoSwipe,它將立即顯示縮略圖，并在頂部加載全尺寸圖像。
智能加載提示器
使用拉伸的縮略圖或灰色占位符逐步將完整圖像加載到頂部。
縮放動(dòng)畫
打開畫廊的過渡動(dòng)畫不僅僅是為了一個(gè)奇特的效果而添加的。
圖像在動(dòng)畫開始之前開始加載，所以，快速鏈接的用戶可能不會(huì)注意到有什么東西正在加載。
旋轉(zhuǎn)進(jìn)度指示器
如果至少有一小部分圖像在一秒鐘內(nèi)沒有加載，或者瀏覽器不支持逐步加載，旋轉(zhuǎn)進(jìn)度指示器就會(huì)平滑地淡入。
添加延遲是為了避免在緩存圖像或用戶有一個(gè)快速連接的情況下閃爍。
智能延遲加載
根據(jù)用戶的移動(dòng)方向，PhotoSwipe加載臨近的圖片。您可以通過API控制圖片預(yù)加載的數(shù)量。
支持響應(yīng)式圖像
因?yàn)閳D庫中的圖像是動(dòng)態(tài)（dynamically）加載的，所以可以傳遞適合用戶窗口大小和DPI的源代碼。
有語義且對SEO友好
PhotoSwipe允許為圖庫定義任何HTML文本。您可以為圖庫添加Schema.org結(jié)構(gòu)化的數(shù)據(jù)標(biāo)記。
更多關(guān)于圖庫搜索優(yōu)化的內(nèi)容
在桌面上也可以縮放
PhotoSwipe模擬瀏覽器圖像查看器的默認(rèn)行為。
點(diǎn)擊放大圖片
如果圖像小于視區(qū)，PhotoSwipe會(huì)在圖像上頂部工具欄上顯示縮放圖標(biāo)。
支持鼠標(biāo)滾輪和筆記本觸控板
API支持?jǐn)U展該功能。
用戶界面（interface）
UI與腳本核心完全分離。如果你想為畫廊創(chuàng)建一個(gè)自定義的界面，你應(yīng)該重新寫一個(gè)UI界面替換默認(rèn)的UI界面。
默認(rèn)的UI界面針對桌面、平板電腦和移動(dòng)設(shè)備進(jìn)行了響應(yīng)優(yōu)化。
像素完美的矢量圖標(biāo)（Pixel-perfect ventor icons）
SVG精靈用于高dpi屏幕，如視網(wǎng)膜顯示器。png用于常規(guī)（@1x）顯示。
社交分享
默認(rèn)的用戶界面有一個(gè)按鈕，彈出打開一個(gè)窗口與共享鏈接。默認(rèn)的鏈接是Facebook,Twitter和Pinterest。
支持API擴(kuò)展更多第三方社交分享工具。
原生的HTML5全屏
支持全屏查看體驗(yàn)，包括在具有本地全屏支持的移動(dòng)設(shè)備上。
鍵盤訪問（keyboard access）
畫廊可以通過鍵盤箭頭鍵導(dǎo)航，通過Escap關(guān)閉。通過Tab按鈕進(jìn)行控件聚焦。
其他
- 為了吸引更多的注意力到照片上，當(dāng)鼠標(biāo)2秒鐘沒有移動(dòng)或者當(dāng)鼠標(biāo)離開窗口時(shí)，控件就會(huì)隱藏起來。
- Photoswipe 可以通過滾動(dòng)頁面(在非觸摸設(shè)備上)來關(guān)閉，從而避免任何額外的鼠標(biāo)移動(dòng)。
- 背景可以設(shè)置為任何顏色和透明度級別。
- 圖像之間的垂直邊距可以通過 API 控制。
- PhotoSwipe被視為一個(gè)模態(tài)對話框，aria屬性被添加和圖庫獲得焦點(diǎn)時(shí)打開。
PhotoSwipe解決的問題
圖像以其可能的最大尺寸顯示，并且不受列包裝器的寬度限制。每張圖片都與其他內(nèi)容隔離開來，并且適合垂直視區(qū)。
如果一個(gè)圖像大于視口，它可以自動(dòng)縮放（大多數(shù)畫廊無法做到這一點(diǎn)）
像素細(xì)節(jié)被保存在響應(yīng)式的圖片中
假設(shè)用戶手機(jī)上的視口寬度為500像素，未壓縮的圖像寬度為1200像素。
你肯定不想在手機(jī)上顯示這么大的圖片，所以你可以把它調(diào)整到500像素。
但是，如果圖像有重要的細(xì)節(jié)，并且用戶將其放大，它將看起來像素化。
使用 PhotoSwipe，當(dāng)用戶點(diǎn)擊小圖像(500像素)時(shí)，大圖像將加載(1200像素) ，從而保留所有細(xì)節(jié)。
與內(nèi)聯(lián)水平j(luò)avascript庫相比
PhotoSwipe不會(huì)減慢頁面的加載速度，因?yàn)槟憧梢酝七t加載畫廊的javascript文件，甚至在用戶點(diǎn)擊“打開畫廊”按鈕后打開。
與加載一系列的圖片相比
PhotoSwipe節(jié)省了用戶帶寬（bandwidth）,因?yàn)樗粫?huì)一次加載所有的圖片，只是根據(jù)用戶的移動(dòng)方向加載臨近的圖片。
此外，它占用頁面空間較少，你可以直接引用在線圖片鏈接。
以下情況，不推薦PhotoSwipe
情況1
你的圖片很小或質(zhì)量很差，或者沒有必要縮放或者隔離它們。
使用一個(gè)簡單的圖像列表或水平滾動(dòng)替代。
情況2
你的圖像非常大，存儲的信息量多（圖片上有大量文字），不應(yīng)該被縮放。
簡單的鏈接到圖像文件，或者創(chuàng)建單獨(dú)的HTM頁面。
情況3
圖片標(biāo)題要比圖片本身更長或更重要。
考慮使用一個(gè)簡單的圖片列表，下面或旁邊有標(biāo)題。
當(dāng)用戶點(diǎn)擊一張可以放大的圖片時(shí)，你可以打開PhotoSwipe，
不需要標(biāo)題，來吸引用戶對圖片本身的注意。
情況4
你的網(wǎng)站布局不夠流暢。
在一個(gè)小屏幕上無響應(yīng)式的網(wǎng)站，PhotoSwipe的控件看起來很小，因?yàn)轫撁鏁?huì)被放大。
可以考慮使用彈出窗口。
技術(shù)規(guī)格(Technical specifications)
PhotoSwipe是為了滿足性能（performance）和產(chǎn)品需求而設(shè)計(jì)的。
模塊和插件大小
PhotoSwipe被分解成多個(gè)模塊。除了控制器、事件和手勢以及框架粘合劑（Framework Bridge）之外，
其他的都可以排除在項(xiàng)目構(gòu)建之外，以減少大小。你可以根據(jù)自己的需要自由的編輯這些內(nèi)容。
由Grunt構(gòu)建，與JSHint連接。
核心（core）模塊（3.6KB）
比如切換項(xiàng)目或縮放。
用戶界面(3.2KB)
所有按鈕及其操作、標(biāo)題等（接口是專門使用公共方法構(gòu)建的ーー這是 API 可以做什么的一個(gè)例子）
事件和手勢（2.6KB）
touch, pointer, mouse events and gestures（手勢）
控制器（1.9KB）
管理畫廊項(xiàng)目：向畫廊添加內(nèi)容，返回圖像的大小。
框架粘合劑
通用（generic）函數(shù)，像addClass 和 addEventListener
功能檢測（feature detection）
瀏覽器歷史
改變URL的hash后綴，讓瀏覽器的“后退”按鈕關(guān)閉畫廊。
桌面縮放
clicking to zoom;
panning with trackpad(觸控板) or mouse wheel.
trackpad(觸控板) or mouse wheel.
輕觸（tap）
輕觸和雙擊事件
動(dòng)畫
- 盡可能使用 RequestAnimationFrame
- 只使用 transform 和 opacity 做動(dòng)畫，動(dòng)畫過程不用繪制，使過渡盡可能自然。
- 幀每秒(FPS)的速率很大程度上取決于圖像和設(shè)備本身的大小
例如，在運(yùn)行 iOS 8的 iPhone 4s 上，1000像素寬、以縱向模式顯示的面向景觀的圖像將以60 FPS 的速度平滑動(dòng)畫。 如果圖像的寬度是1400像素，那么 FPS 的速度會(huì)明顯下降
內(nèi)存
- PhotoSwipe一次只在 DOM 中保留三個(gè)圖像，因?yàn)槊總€(gè)“slide”是一個(gè)復(fù)合層。這會(huì)消耗大量內(nèi)存。
- 在畫廊首次開放之前，不會(huì)消耗內(nèi)存
- 該腳本已經(jīng)過內(nèi)存泄露的測試。來回導(dǎo)航圖像和創(chuàng)建或刪除圖庫不會(huì)在內(nèi)存中留下任何痕跡。
支持的瀏覽器和設(shè)備
該插件的基本功能在任何設(shè)備都可以運(yùn)行。
- desktop Chrome, Firefox, Safari, Opera and IE 8 and above
- Android 2.3.7+ (2.1 not tested yet): default browser, Chrome, Firefox (latest), Dolphin (latest)
- iOS 5+
- Windows Phone 7+: default browser (touch gestures are supported from 8+)
- BlackBerry OS 10+: default browser (older versions not tested yet)
- devices with multiple input methods (Surface, Chromebook Pixel, etc.)
如何檢測鼠標(biāo)是否被使用
如果同時(shí)檢測到觸摸和鼠標(biāo)輸入方法，腳本將等待兩個(gè)連續(xù)的 mousemove 事件發(fā)生，然后才應(yīng)用只有鼠標(biāo)的特性(例如左 / 右箭頭按鈕)。
縮放動(dòng)畫如何應(yīng)用于正在打開圖像
圖片能被搜索引擎抓取嗎？
PhotoSwipe 不會(huì)強(qiáng)制任何HTML標(biāo)記進(jìn)入圖庫中（你擁有完全的控制權(quán)）。
如果你有指向大圖片或圖片本身的鏈接列表，那么圖片將可以被抓取。
總結(jié)
以上是生活随笔為你收集整理的PhotoSwipe介绍（1）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LMD0 (ospid: 8664):
- 下一篇： SiKi学院 Unity中常用api学习