jQuery燈箱外掛lightBox使用方法

yinghualeihenmei發表於2024-03-30
jQuery

原文連結：https://blog.csdn.net/ououou123456789/article/details/6015122

https://jingyan.baidu.com/article/9c69d48f992b1b13c9024e3d.html

“Lightbox”是一個別致且易用的圖片顯示效果，它可以使圖片直接呈現在當前頁面之上而不用轉到新的視窗。類似於WinXP作業系統的登出/關機對話方塊，除去螢幕中心位置的對話方塊，其他的區域都以淡出的效果逐漸變為銀灰色以增加對比度，此時除了對話方塊內的表單控制元件，沒有其他區域可以獲取焦點。

　　　　$(function() {
　　　　　　　　$('#gallery a').lightBox({fixedNavigation:true});
　　　　});

使用方法：

1、在百度搜尋中搜尋關鍵詞" Lightbox JS",

2、訪問 Lightbox官方網站，Download the latest version（下載 Lightbox最新版本），如下圖所示。

3、在頁面頭部包含 lightbox.js 檔案並載入 lightbox.css 樣式表檔案

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

4、

<a href="image-1.jpg" data-lightbox="image-1" data-title="文字說明">Image #1</a>
 <!-- 如果是一組相關的圖片，可以對該組圖片設定 data-lightbox 屬性為相同的值。-->
<a href="img/image-2.jpg" data-lightbox="group">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="group">Image #3</a> 
<a href="img/image-4.jpg" data-lightbox="group">Image #4</a>

以上內容設定好即可，會自動呼叫 Lightbox。

5、使用說明，如下圖所示。

引數說明

注意：目前除了修改原始碼，不能在呼叫的時候修改引數（因為是自動呼叫的，並且引數沒有暴露到外部），期待以後的更新能完善該功能。

  • 使用lightbox.min.js，確信JQuery庫已經引入並被載入
  • 如果使用的是lightbox-plus-jquery.min.js，則可以不引入JQuery庫

相關文章