Jquery圖片彈出框外掛-jQuery lightBox
阿新 • • 發佈:2019-01-06
外掛資訊
預覽圖
使用步驟
歡迎加我的qq技術群425783133
1、新增對以下js和css檔案的引用
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
2、加入以下js程式碼
$(function() { $('#gallery a').lightBox({}); });
3、在body標籤中加入圖片相關的html程式碼
引數配置<div id="gallery"> <ul> <li> <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();"> <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"> <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"> <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"> <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"> <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> </a> </li> </ul> </div>
引數名 | 引數說明 | 可選值 | 預設值 |
引數名 | 引數說明 | 引數取值 | 預設值 |
verlayBgColor | 定義覆蓋層的顏色 | 顏色值 | 預設值:#000 (black) |
overlayOpacity | 定義覆蓋層的的透明度 | 0-1的小數 | 0.8 |
imageLoading | 設定載入動畫 | 圖片路徑字串 | images/lightbox-ico-loading.gif |
imageBtnClose | 設定關閉彈出框的按鈕圖片路徑 | 圖片路徑字串 | images/lightbox-btn-close.gif |
imageBtnPrev | 設定彈出框上一張圖片導航按鈕圖片路徑 | 圖片路徑字串 | images/lightbox-btn-prev.gif |
imageBtnNext | 設定彈出框下一張圖片導航按鈕圖片路徑 | 圖片路徑字串 | images/lightbox-btn-next.gif |
containerBorderSize | 設定圖片框的邊框大小 | 整數 | 10 |
containerResizeSpeed | 重置圖片容器的速度 | 整數 | 400 |
keyToNext | 顯示下一張幻燈片的快捷鍵 | 鍵字母 | n |
keyToPrev | 顯示上一張幻燈片的快捷鍵 | 鍵字母 | p |
keyToClose | 關閉幻燈片的快捷鍵 | 鍵字母 | c |