分享五款多功能、實用的響應式燈箱插件

最後更新於 2021 年 9 月 20 日

  最近做網站需要找幾款燈箱來套用所以蒐集了不少插件,發現有幾款插件功能非常齊全而且新穎,因此花了一點時間做測試。那麼今天我會列出這八款燈箱插件並且分享演示效果及使用方式。

LightGallery

官網:https://sachinchoolur.github.io/lightGallery/

一個針對jQuery的可定制,模塊化,響應式燈箱畫廊插件。

DEMO

使用方式

引入CSS及JS檔

CSS

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css" />

JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js
"></scrip>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.12/dist/js/lightgallery.min.js
"></scrip>
<!--滑鼠滾輪切換圖片插件-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js
"></scrip>
<!--縮略圖+全屏插件-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-thumbnail/1.1.0/lg-thumbnail.min.js
"></scrip>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-fullscreen/1.1.0/lg-fullscreen.min.js
"></scrip>

使用JS調用lightgallery

$(document).ready(function() {
  $("#lightgallery").lightGallery();
});

HTML

<div id="lightgallery">
 <a href="https://i.imgur.com/xQ94mYj.jpg">
  <img src="https://i.imgur.com/xQ94mYj.jpg" width="500" height="300" />
 </a>
 <a href="https://i.imgur.com/lji0z7q.jpg">
  <img src="https://i.imgur.com/lji0z7q.jpg" width="500" height="300"/>
 </a>
</div>

更多使用說明請參考:LightGallery Docs

ImageLightBox

DEMO

使用方式

引入CSS與JS

CSS

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/imagelightbox@1.0.2/dist/imagelightbox.min.css" />

JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/imagelightbox@1.0.2/src/imagelightbox.min.js"></script>

HTML

使用包含 data-imagelightbox="a" 屬性的 a 標籤 包裹 img 圖像。

<a href="https://i.imgur.com/xQ94mYj.jpg" data-imagelightbox="a"><img src="https://i.imgur.com/xQ94mYj.jpg" width="500" height="300" alt="Something..."></a>

使用JS調用插件

$( function()
{
  $( 'a' ).imageLightbox();
});

Strip

我非常喜歡的一款燈箱插件,與其它燈箱不同的地方在於,它的燈箱僅覆蓋部分頁面,對移動裝置也特別友好,更重要的一點是:使用方式非常簡單

DEMO

使用方式

引入CSS與JS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@staaky/strip@1.7.0/dist/css/strip.css">
<script src="https://cdn.jsdelivr.net/npm/@staaky/strip@1.7.0/dist/js/strip.pkgd.min.js"></script>

HTML

只需要使用 a 標籤 class 為strip即可。可以使用 data-strip-caption 屬性添加標題。

<a href="https://i.imgur.com/lji0z7q.jpg" class="strip">Show image</a>

若需要定義群組照片則使用 data-strip-group = "mygroup" 屬性來定義群組。

<a href="https://i.imgur.com/lji0z7q.jpg"
class="strip" data-strip-group="mygroup" data-strip-options="maxWidth:500">Image 1</a>
<a href="https://i.imgur.com/lji0z7q.jpg"
class="strip" data-strip-group="mygroup" data-strip-options="maxWidth:500">Image 2</a>

選項

使用 data-strip-options 屬性來自定義Strip

<a href="http://vimeo.com/32071937" class="strip" data-strip-options="side: 'top'">Options</a>
  • 常用選項

最大高度與最大寬度

maxHeight: 500
maxWidth: 500
  • side

包括 top , bottom, left , right

side:top
  • overlap

設置為true時,允許按鈕與內容重疊。

overlap: false 

注意: Vimeo和Youtube默認 overlap:false,因為重疊的按鈕可能會阻止與視頻的交互。

其他選項請參考 Strip docs

VenoBox

也是一款很簡潔的燈箱插件。

DEMO

使用方式

引入CSS與JS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.8.6/venobox.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.8.6/venobox.min.js"></script>

HTML

照片

在a標籤加上 class = "venobox"

<a class="venobox" href="https://i.imgur.com/lji0z7q.jpg"><img src="https://i.imgur.com/lji0z7q.jpg" width="500" height="300" alt="image alt"/></a>

一組照片

使用 data-gall=”myGallery” 屬性來定義同一組照片。

<a class="venobox" data-gall="myGallery" href="https://i.imgur.com/lji0z7q.jpg"><img src="https://i.imgur.com/lji0z7q.jpg" width="500" height="300"/></a>
<a class="venobox" data-gall="myGallery" href="https://i.imgur.com/xQ94mYj.jpg"><img src="https://i.imgur.com/xQ94mYj.jpg" width="500" height="300"/></a>
<a class="venobox" data-gall="myGallery" href="https://i.imgur.com/Vexbu7j.jpg"><img src="https://i.imgur.com/Vexbu7j.jpg" width="500" height="300"/></a>

iframe

使用 data-vbtype="iframe" 屬性。

<a class="venobox_custom" data-vbtype="iframe" href="http://example.com/">打開iFrame </a>

使用JS調用插件

$(document).ready(function(){
    $('.venobox').venobox();
});

自定義設置

定義 titleattr: 'data-title' 就可以使用 data-title="" 標籤為連結加上標題 (預設是使用title="")

$('.venobox').venobox({
    titleattr: 'data-title'
});
<a class="venobox" data-title="Here your description" href="...

使用 data-autoplay="true" 可以設置自動播放Vimeo或Youtube影片。

<a class="venobox" data-autoplay="true" data-vbtype="video" href="...

使用 data-overlay 替燈箱背景添加顏色。

<a class="venobox" data-overlay="rgba(95,164,255,0.8)" href="...">...</a>
<a class="venobox" data-overlay="#ca294b" href="...">...</a>

其他

$('.venobox_custom').venobox({
    framewidth : '400px',                            // default: ''
    frameheight: '300px',                            // default: ''
    border     : '10px',                             // default: '0'
    bgcolor    : '#5dff5e',                          // default: '#fff'
    titleattr  : 'data-title',                       // default: 'title'
    numeratio  : true,                               // default: false
    infinigall : true,                               // default: false
    share      : ['facebook', 'twitter', 'download'] // default: []
});

其他使用方法請看 VenoBox Docs

PhotoSwipe

See the Pen Multiple PhotoSwipe galleries on pagea by Dmitry Semenov (@dimsemenov) on CodePen.

這款功能非常齊全,不過使用方式也並不容易,有興趣可以參考:PhotoSwipe docs

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g 分享五款多功能、實用的響應式燈箱插件
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論