15 個響應式的 Lightbox 燈箱插件

0
13741

運用現代網路技術,可以讓網路瀏覽變得越來越輕巧。就像 Lightbox(燈箱),在顯示任何具有聚焦界面的 HTML 內容方面非常實用,而且提供許多非常棒的框架。因此,我們蒐集了一些響應式 jQuery 燈箱函式庫和腳本,用來幫助開發人員快速建立及設計漂亮的網站。你可以立即下載並將下面的腳本輕鬆地添加到您的網站,用來增強照片收藏的展示。

1.Photoswipe

photoswipePhotoSwipe 是一個基於 HTML/CSS/JavaScript 的圖片函數庫,專門針對移動設備設計。它的靈感來自 iOS 照片查看功能和 Google 行動版照片圖庫。PhotoSwipe 為訪問者提供了一個熟悉和直覺的界面,允許它們在你的移動網站上進行圖片互動。支持所有基本手勢:像滑動到下一張或上一張圖片、展開放大、平移拖動、捏合縮小或關閉、點擊切換和雙按縮放等。

2.Swipebox

swipeboxSwipebox 是一個可觸碰的 jQuery 燈箱。一種可用於桌面,移動和平板電腦的 jQuery lightbox 插件。它支持行動設備滑動手勢、桌面鍵盤導航、CSS 過渡、jQuery 回退以及對 UI 圖標視網膜的支援和簡易 CSS 定制。它通過了 Chrome、Safari、Firefox、Opera、IE8+、IOS4+、Android、Windows Phone 的測試。 也是在 MIT 許可下發布的。

3.Superbox

superboxSuperBox 是一個 jQuery 插件,透過使用 HTML5 data-* 屬性,使整個 image 和 lightbox 進一步減少對 JavaScript 和圖片加載的依賴。SuperBox 神奇的將照片轉變為靜態圖像庫,可以透過點擊來顯示完整版本的圖像。響應式設計允許你在任何設備上使用它。媒體查詢也是基本功能,所以你可以構建和擴展,以適應您的項目。

4.iLightbox

iLightBoxiLightBox 讓你可以輕鬆建立一個使用 jQuery JavaScript 函式庫做成相當漂亮的響應式疊加窗口。透過將對多種媒體的支持與華麗的外觀,加上用戶友好的 API 相結合。iLightBox 旨在盡可能推廣燈箱概念。為了讓項目更加完善,iLightBox 配備全螢幕、視網膜的支援,且支持滑動事件、Youtube 和 Vimeo 整合的 HTML5 影片、強大的 Javascript API 和終身免費支援及更新。

5.Image Lightbox

image lightboxImage Lightbox 是一種輕巧、簡約、可擴展、可配置、響應和觸摸友好 iOS、Android 和 Windows Phone 兼容的燈箱插件。會自動預載下一張圖片,使用 CSS 變換和轉換與鍵盤交互效果。

6.Magnific Popup

magnific-popup-jquery-pluginMagnific Popup 是一個免費的響應式 jQuery 燈箱插件,專注於性能,並為用戶提供任何設備的最佳體驗。lightbox 大部分需要你透過 JS 選項定義它的大小。你可以使用相對單位,比如 em 或 CSS 媒體查詢的幫助下調整燈箱。

7.Nivo Lightbox

nivo lightboxNivo Lightbox 是一個靈活的燈箱插件。插件有很多選項,用以改變外觀。如更改主題、過渡效果和切換導航。

8.Lightcase

lightcasejsLightcase 是一個使用 jQuery 創造出的靈活、響應和可擴展的燈箱插件。它適用於所有常見的瀏覽器,如Internet Explorer 7+、Firefox、Opera、Webkit 等。它支援照片、影片,HTML5 視頻、iframe、swf 和ajax 調用。

9.Lightlayer.js

lightlayerLightLayer 是一個響應式燈箱及對話框腳本,適合螢幕上的任何項目。它的操作簡單為用戶提供了優良的體驗。 LightLayer 可以控制多種設定,如背景顏色、背景透明度、對話框位置、開關過渡效果以及不一樣的關閉功能。

10.Strip.js

stripStrip 是一種僅部分覆蓋網頁的燈箱。這使它較少對原本的設計產生影響,並且留下許多螢幕空間與頁面的互動,同時為小型移動設備帶來經典的燈箱體驗。Strip 使用 jQuery 並支持所有主流瀏覽器。

11.Fluidbox

fluidboxFluidbox 是一個 jQuery 插件。它使用一種無干擾的流體燈箱,並對其進行改進,使它可以鏈接到較大分辨率的圖像。它的工作原理讓它可以在移動設備和插件中處理高解析度的照片。而且,僅當用戶點擊縮圖時才載入它們。

12.Featherlight

featherlightFeatherlight 具高度輕量化。僅 400 行 JavaScript 代碼和 100 行 CSS,檔案小於 6kB。它非常聰明、響應式、支持圖像、ajax 和 iframes 隨時可適應你的需要。 Featherlight 適用於 IE8+ 及所有現代瀏覽器和移動平台。

13.Yalb

yalbYalb 的完整意思為 Yet Another Lightbox — Yalb 附帶了一些 API,包括自定義事件,這允許你識別燈箱狀態,例如當它活動和關閉。

14.LightGallery

JQuery lightGalleryjQuery lightGallery 是一個用於顯示圖片和視訊庫的輕量級 jQuery lightbox 庫。它有無數的功能,如響應式佈局、移動設備的觸摸支援、滑動和褪色效果、圖片標題和說明等等。

15.Veno Lightbox

venoboxVenoBox 是一個響應式 jQuery lightbox 插件,適合圖片、內嵌內容、iFrames、Google 地圖、Ajax 請求、Vimeo 和 YouTube 影片。和許多其他模態窗口插件相比,最大的差異是如果高於窗口 VenoBox 會計算顯示圖片的最大寬度,並維持其高度(因此在小型設備,你可以向下滾動內容,避免垂直微觀調整圖片大小) 。