lightGallery
輕量、模組化的燈箱畫廊套件。
一、安裝
1. 載入 CSS
我比較懶惰,直接載入包含 lightGallery 和所有插件樣式的 CSS。<link type="text/css" rel="stylesheet" href="css/lightgallery-bundle.css" />
2. 載入 Javascript
載入基本的 lightgallery.min.js,如果要使用其他插件要另外載。<script src="js/lightgallery.min.js"></script> <script src="js/plugins/lg-thumbnail.umd.js"></script> <script src="js/plugins/lg-zoom.umd.js"></script>
二、使用
1. HTML 寫法
<div id="lightgallery"> <a href="img/img1.jpg" data-lg-size="1600-2400"> <img alt="img1" src="img/thumb1.jpg" /> </a> <a href="img/img2.jpg" data-lg-size="1024-800"> <img alt="img2" src="img/thumb2.jpg" /> </a> ... </div>
2. 初始化
lightGallery(document.getElementById('lightgallery'), { plugins: [lgZoom, lgThumbnail], licenseKey: 'your_license_key', speed: 500, // ... other settings });
參考文件
留言
張貼留言