圖像瀏覽器(Lightgallery.js)

Lightgallery是一個(gè)現(xiàn)代的、基于電子和nodejs的圖像瀏覽器，適用于Mac、Windows和Linux，Lightgallery使用Electron構(gòu)建，擁有大量精美的內(nèi)置動(dòng)畫！有需要的小伙伴歡迎來西西下載體驗(yàn)。

軟件功能：

使用Electron構(gòu)建。

LightGallery使用HTML、CSS和JavaScript與Chromium和Node.js來構(gòu)建應(yīng)用程序。

跨平臺(tái)。

LightGallery可以跨操作系統(tǒng)工作。你可以在OS X、Windows或Linux上使用它。

20多種動(dòng)畫

LightGallery自帶了大量精美的內(nèi)置動(dòng)畫。

動(dòng)畫縮略圖

您還可以在設(shè)置中選擇啟用動(dòng)畫縮略圖。

縮放和全屏

您可以雙擊圖像，查看其實(shí)際尺寸。可以使用放大和縮小控件來改變圖像的縮放值。

鼠標(biāo)拖動(dòng)和鍵盤導(dǎo)航

LightGallery允許用戶通過鼠標(biāo)拖動(dòng)和鍵盤箭頭在幻燈片之間進(jìn)行導(dǎo)航。

尋呼機(jī)

自動(dòng)幻燈片

支持各種圖片格式（jpg、png、gif、webp）。

高度可定制化使用方法：

使用方法：

在頁面中引入lightgallery.css和lightgallery.min.js文件。如果你需要某項(xiàng)功能可以單獨(dú)引入相關(guān)文件，如全屏功能引入lg-fullscreen.min.js，縮略圖功能引入lg-thumbnail.min.js等。

<link rel="stylesheet" href="css/lightgallery.css">

<script src="js/lightgallery.min.js"></script>

<script src="js/lg-thumbnail.min.js"></script>

<script src="js/lg-fullscreen.min.js"></script>

...                  

 HTML結(jié)構(gòu)

建議使用下面的HTML結(jié)構(gòu)來構(gòu)建一個(gè)圖片畫廊。

<div id="lightgallery">

    <a href="img/img1.jpg">

        <img src="img/thumb1.jpg">

    </a>

    <a href="img/img2.jpg">

        <img src="img/thumb2.jpg">

    </a>

    ...

</div>        

你可以查看這里來獲取其它HTML結(jié)構(gòu)的使用方法。

 初始化插件

在頁面底部通過下面的方法來初始化該lightbox插件。

<script>

lightGallery(document.getElementById('lightgallery'));

</script>