使用LightBox的步驟如下:
<script>
標簽將庫文件引入到你的 HTML 文件中,例如:<script src="path/to/lightbox.min.js"></script>
<link rel="stylesheet" href="path/to/lightbox.min.css">
確保路徑正確,并且將上述代碼放置在 <head>
標簽內或者 <body>
標簽內。
<a href="path/to/image.jpg" data-lightbox="image-1">
<img src="path/to/thumbnail.jpg">
</a>
在上述代碼中,href
屬性指向原始圖片的路徑,data-lightbox
屬性為圖片定義一個唯一的標識符,以便 LightBox 根據該標識符來顯示對應的圖片。img
標簽內的 src
屬性則指向縮略圖的路徑。
<script>
標簽內,例如:<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
在上述代碼中,lightbox.option()
方法用于配置 LightBox 的選項。你可以根據需要設置不同的選項,例如設置圖片切換的速度、是否循環顯示圖片等。
以上就是使用 LightBox 的基本步驟。你可以根據需要自定義 LightBox 的樣式和功能,以滿足你的項目需求。