圖像瀏覽器(Lightgallery.js)

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

軟件功能：

使用Electron構建。

LightGallery使用HTML、CSS和JavaScript與Chromium和Node.js來構建應用程序。

跨平臺。

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

20多種動畫

LightGallery自帶了大量精美的內置動畫。

動畫縮略圖

您還可以在設置中選擇啟用動畫縮略圖。

縮放和全屏

您可以雙擊圖像，查看其實際尺寸�？梢允褂梅糯蠛涂s小控件來改變圖像的縮放值。

鼠標拖動和鍵盤導航

LightGallery允許用戶通過鼠標拖動和鍵盤箭頭在幻燈片之間進行導航。

尋呼機

自動幻燈片

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

高度可定制化使用方法：

使用方法：

在頁面中引入lightgallery.css和lightgallery.min.js文件。如果你需要某項功能可以單獨引入相關文件，如全屏功能引入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結構

建議使用下面的HTML結構來構建一個圖片畫廊。

<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結構的使用方法。

 初始化插件

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

<script>

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

</script>