原文地址，點擊直達，閱讀效果更佳

介紹

純js畫廊 （gallery），沒有依賴性（dependencies），側重移動端。

• API文檔
• Github地址
• Twitter主頁

畫廊風格

所有控件（All controls）

標題（caption）、分享（facebook,tweet）、點擊切換控制

極簡主義

沒有標題、透明（transparent）背景、點擊關閉。

觸控手勢（gestures）

支持所有基本手勢：左右滑動圖像切換；雙指張開圖片放大（spread to zoom）；雙指內聚（捏：Pinch）縮小或關閉圖片；
點擊切換控制；雙擊縮放；

雙指張開圖片放大

PhotoSwipe聲稱是第一個支持基于javascript的圖像縮放的開源庫。即使瀏覽器的本地縮放功能被禁用，該插件仍然可以支持圖像縮放。

手指動作如下圖：

雙指內聚（捏：Pinch）縮小或關閉圖片

畫廊的背景會隨著圖片的縮小而逐漸淡出，當手勢完成后，畫廊將關閉。

手指動作如下圖：

垂直猛擊關閉畫廊

因為單手持移動設備的時候，關閉按鈕在右上角，很難被點擊到，所以添加此手勢。

手指動作如下圖：

水平(Horizontal)滑動切換圖片

即使放大當前圖片，也可以水平滑動切換圖片。PhotoSwipe在過渡期間不會阻止滑動。

手指動作如下圖：

自定義手勢

你可以指定自己的點擊和雙擊手勢動作。

瀏覽器歷史API

PhotoSwipe操作瀏覽器的歷史紀錄，以便用戶可以鏈接到每個圖庫項，可以通過瀏覽器的“后退”按鈕關閉圖庫。關閉圖庫時，將還原初始URL。
這個特性以模塊的形式出現。你可以將其完全排除在構建之外，或者根據產品URL結構的要求將其分離出來。

“后退”按鈕關閉畫廊

當畫廊打開時，PhotoSwipe會向瀏覽器添加一個歷史記錄，用戶可以通過瀏覽器的“后退”按鈕關閉它。

每一個畫廊項（圖片）都有一個唯一的URL

用戶可以分享和鏈接到每個圖片。哈希后綴獲得兩個額外參數：
gid：畫廊索引
pid：圖片索引

加載和顯示圖片

創建快速加載的錯覺（illusion）。圖片隨著數據的到來逐漸顯示（類似圖片懶加載）
照片在被完全載入之前顯示。此功能在觸摸設備上禁用，因為它可能導致滑動轉換延遲。

低分辨率圖像即時顯示，然后拉伸到全尺寸。

將縮略圖的源代碼傳遞給PhotoSwipe,它將立即顯示縮略圖，并在頂部加載全尺寸圖像。

智能加載提示器

使用拉伸的縮略圖或灰色占位符逐步將完整圖像加載到頂部。

縮放動畫

打開畫廊的過渡動畫不僅僅是為了一個奇特的效果而添加的。
圖像在動畫開始之前開始加載，所以，快速鏈接的用戶可能不會注意到有什么東西正在加載。

旋轉進度指示器

如果至少有一小部分圖像在一秒鐘內沒有加載，或者瀏覽器不支持逐步加載，旋轉進度指示器就會平滑地淡入。
添加延遲是為了避免在緩存圖像或用戶有一個快速連接的情況下閃爍。

智能延遲加載

根據用戶的移動方向，PhotoSwipe加載臨近的圖片。您可以通過API控制圖片預加載的數量。

支持響應式圖像

因為圖庫中的圖像是動態（dynamically）加載的，所以可以傳遞適合用戶窗口大小和DPI的源代碼。

有語義且對SEO友好

PhotoSwipe允許為圖庫定義任何HTML文本。您可以為圖庫添加Schema.org結構化的數據標記。
更多關于圖庫搜索優化的內容

在桌面上也可以縮放

PhotoSwipe模擬瀏覽器圖像查看器的默認行為。

點擊放大圖片

如果圖像小于視區，PhotoSwipe會在圖像上頂部工具欄上顯示縮放圖標。

支持鼠標滾輪和筆記本觸控板

API支持擴展該功能。

用戶界面（interface）

UI與腳本核心完全分離。如果你想為畫廊創建一個自定義的界面，你應該重新寫一個UI界面替換默認的UI界面。
默認的UI界面針對桌面、平板電腦和移動設備進行了響應優化。

像素完美的矢量圖標（Pixel-perfect ventor icons）

SVG精靈用于高dpi屏幕，如視網膜顯示器。png用于常規（@1x）顯示。

社交分享

默認的用戶界面有一個按鈕，彈出打開一個窗口與共享鏈接。默認的鏈接是Facebook,Twitter和Pinterest。
支持API擴展更多第三方社交分享工具。

原生的HTML5全屏

支持全屏查看體驗，包括在具有本地全屏支持的移動設備上。

鍵盤訪問（keyboard access）

畫廊可以通過鍵盤箭頭鍵導航，通過Escap關閉。通過Tab按鈕進行控件聚焦。

其他

• 為了吸引更多的注意力到照片上，當鼠標2秒鐘沒有移動或者當鼠標離開窗口時，控件就會隱藏起來。
• Photoswipe 可以通過滾動頁面(在非觸摸設備上)來關閉，從而避免任何額外的鼠標移動。
• 背景可以設置為任何顏色和透明度級別。
• 圖像之間的垂直邊距可以通過 API 控制。
• PhotoSwipe被視為一個模態對話框，aria屬性被添加和圖庫獲得焦點時打開。

PhotoSwipe解決的問題

圖像以其可能的最大尺寸顯示，并且不受列包裝器的寬度限制。每張圖片都與其他內容隔離開來，并且適合垂直視區。
如果一個圖像大于視口，它可以自動縮放（大多數畫廊無法做到這一點）

像素細節被保存在響應式的圖片中

假設用戶手機上的視口寬度為500像素，未壓縮的圖像寬度為1200像素。
你肯定不想在手機上顯示這么大的圖片，所以你可以把它調整到500像素。
但是，如果圖像有重要的細節，并且用戶將其放大，它將看起來像素化。
使用 PhotoSwipe，當用戶點擊小圖像(500像素)時，大圖像將加載(1200像素) ，從而保留所有細節。

與內聯水平javascript庫相比

PhotoSwipe不會減慢頁面的加載速度，因為你可以推遲加載畫廊的javascript文件，甚至在用戶點擊“打開畫廊”按鈕后打開。

與加載一系列的圖片相比

PhotoSwipe節省了用戶帶寬（bandwidth）,因為它不會一次加載所有的圖片，只是根據用戶的移動方向加載臨近的圖片。
此外，它占用頁面空間較少，你可以直接引用在線圖片鏈接。

以下情況，不推薦PhotoSwipe

情況1

你的圖片很小或質量很差，或者沒有必要縮放或者隔離它們。
使用一個簡單的圖像列表或水平滾動替代。

情況2

你的圖像非常大，存儲的信息量多（圖片上有大量文字），不應該被縮放。
簡單的鏈接到圖像文件，或者創建單獨的HTM頁面。

情況3

圖片標題要比圖片本身更長或更重要。
考慮使用一個簡單的圖片列表，下面或旁邊有標題。
當用戶點擊一張可以放大的圖片時，你可以打開PhotoSwipe，
不需要標題，來吸引用戶對圖片本身的注意。

情況4

你的網站布局不夠流暢。
在一個小屏幕上無響應式的網站，PhotoSwipe的控件看起來很小，因為頁面會被放大。
可以考慮使用彈出窗口。

技術規格(Technical specifications)

PhotoSwipe是為了滿足性能（performance）和產品需求而設計的。

模塊和插件大小

PhotoSwipe被分解成多個模塊。除了控制器、事件和手勢以及框架粘合劑（Framework Bridge）之外，
其他的都可以排除在項目構建之外，以減少大小。你可以根據自己的需要自由的編輯這些內容。
由Grunt構建，與JSHint連接。

核心（core）模塊（3.6KB）

比如切換項目或縮放。

用戶界面(3.2KB)

所有按鈕及其操作、標題等（接口是專門使用公共方法構建的ーー這是 API 可以做什么的一個例子）

事件和手勢（2.6KB）

touch, pointer, mouse events and gestures（手勢）

控制器（1.9KB）

管理畫廊項目：向畫廊添加內容，返回圖像的大小。

框架粘合劑

通用（generic）函數，像addClass 和 addEventListener
功能檢測（feature detection）

瀏覽器歷史

改變URL的hash后綴，讓瀏覽器的“后退”按鈕關閉畫廊。

桌面縮放

clicking to zoom;
panning with trackpad(觸控板) or mouse wheel.
trackpad(觸控板) or mouse wheel.

輕觸（tap）

輕觸和雙擊事件

動畫

• 盡可能使用 RequestAnimationFrame
• 只使用 transform 和 opacity 做動畫，動畫過程不用繪制，使過渡盡可能自然。
• 幀每秒(FPS)的速率很大程度上取決于圖像和設備本身的大小

例如，在運行 iOS 8的 iPhone 4s 上，1000像素寬、以縱向模式顯示的面向景觀的圖像將以60 FPS 的速度平滑動畫。 如果圖像的寬度是1400像素，那么 FPS 的速度會明顯下降

內存

• PhotoSwipe一次只在 DOM 中保留三個圖像，因為每個“slide”是一個復合層。這會消耗大量內存。
• 在畫廊首次開放之前，不會消耗內存
• 該腳本已經過內存泄露的測試。來回導航圖像和創建或刪除圖庫不會在內存中留下任何痕跡。

支持的瀏覽器和設備

該插件的基本功能在任何設備都可以運行。

• 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.)

如何檢測鼠標是否被使用

如果同時檢測到觸摸和鼠標輸入方法，腳本將等待兩個連續的 mousemove 事件發生，然后才應用只有鼠標的特性(例如左 / 右箭頭按鈕)。

縮放動畫如何應用于正在打開圖像

一旦一個縮略圖被點擊，該縮略圖的大版本立即被加載

與此同時，PhotoSwipe創建了一個固定位置的圖層，其中包括復制的縮略圖、背景、按鈕和標題。背景和控件的透明度設置為opacity:0.001

50毫秒計時器啟動。添加它是為了讓瀏覽器有時間呈現新圖層（背景、控件、圖像）。否則，動畫開始時會有明顯的延遲。TODO：根據瀏覽器/操作系統/設備更改延遲時間。

三個CSS過渡動畫開始:一個尺度圖像(scale和 translate),第二個改變背景的不透明度,第三改變控件的不透明度。 默認情況下,過渡持續333毫秒。背景是一個單獨的元素,因為動畫 opacity 看起來比動畫 RGBa background-color更為順暢。

一旦過渡動畫完成，不管圖片是否完全加載，大圖片就會添加到拉伸的縮略圖上。

為了使滑動過渡平滑，兩個相鄰的幻燈片在視區兩側已準備就緒

如果對兩個以上的相鄰圖像啟用延遲加載，那么現在也將開始加載這些圖像。

圖片能被搜索引擎抓取嗎？

PhotoSwipe 不會強制任何HTML標記進入圖庫中（你擁有完全的控制權）。
如果你有指向大圖片或圖片本身的鏈接列表，那么圖片將可以被抓取。

總結

以上是生活随笔為你收集整理的PhotoSwipe介绍（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。