lightgallery-js

ui-component modal animation

lightgallery-jsは外部依存性がないフル機能のライトボックスギャラリーライブラリです。画像、ビデオ、HTMLコンテンツを美しく表示するための様々な機能を提供します。

Latest Ver 1.4.0

Homepage

Github

5,330

光を捉え、ギャラリーを創造する。

写真やビデオを美しく展示する現代的なギャラリーを体験してください。

lightgallery-jsは画像、ビデオ、HTMLを美しく表示するためのライトボックスギャラリーです。

CDNダウンロード

License: GPLv3

Asset Type :

すべてのバージョンを見る

https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/js/lightgallery.js

https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/js/lightgallery.min.js

https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lg-fb-comment-box.css

https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lg-fb-comment-box.min.css

https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lg-transitions.css

https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lg-transitions.min.css

https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.css

https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.min.css

https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lg-fb-comment-box.css.map

https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lg-transitions.css.map

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

📄 HTML
<div id="lightgallery"><a href="path-to-image.jpg"><img src="thumbnail-image.jpg"/></a></div><script src="https://cdn.jsdelivr.net/npm/lightgallery.js"></script><script>lightGallery(document.getElementById('lightgallery'));</script>

🎨 External CSS
<link href="https://cdn.jsdelivr.net/npm/lightgallery.js/dist/css/lightgallery.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdn.jsdelivr.net/npm/lightgallery.js"></script>

⚙️ JavaScript
lightGallery(document.getElementById('lightgallery'));