【JS】lightbox2燈箱效果

優化瀏覽圖片插件

 發表於 2023-04-22  |  1 分鐘  |  57 個字

【JS】lightbox2燈箱效果

優化瀏覽圖片插件

 發表於 2023-04-22  |  1 分鐘  |  57 個字

lightbox2使用前準備

  1. 下載lightbox2

圖片

  1. 解壓縮後，將/examples內的檔案拉到自己的資料夾內

圖片

.js檔、.css檔、圖片檔都要拉

  1. 將.css和.js引入
    • 在<head>加入<link href="css/lightbox.min.css" rel="stylesheet"/>
    • 在<body>加入<script src="js/lightbox-plus-jquery.min.js"></script>

圖片

  1. 接著將圖片放入images資料夾

圖片

  1. 到index.html開始撰寫

圖片

  1. data-title圖片左下角標題

圖片

  1. 進階修改樣式到.js檔裡的最下方開始撰寫

圖片

將圖片群組化

1
2
3

<a href="images/image-1.jpg" data-lightbox="group1">Image1</a>
<a href="images/image-2.jpg" data-lightbox="group1">Image2</a>
<a href="images/image-3.jpg" data-lightbox="group1">Image3</a>

將data-lightbox名稱命名相同

其他參數設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

lightbox.option({
    'alwaysShowNavOnTouchDevices': true,//在手機裝置上出現箭頭
    'disableScrolling': true,//圖片超出視窗不會出現滾輪
    'fitImagesInViewport': true,//圖片完整顯示在視窗
    'maxWidth': 300,//圖片最大寬度px
    'maxHeight': 300,//圖片最大高度px
    'positionFromTop': 50,//圖片距離頂部px
    'resizeDuration': 700,//圖片出現速度
    'wrapAround': true//圖片到最後一張時會在從第一張開始
});
javaScript 

其他相關