Lightbox JS 是一個簡單而又謙恭的用來把圖片覆蓋在當前頁面上的腳本，就是一個頁面上的彈出式對話框的組件，它能被快速安裝并且運作于所有流行的瀏覽器。

引入文件：
<link type="text/css" rel="stylesheet" href="http://phply.blog.163.com/blog/css/jquery.lightbox.css" />
<script type="text/javascript" src="http://phply.blog.163.com/blog/js/jquery.min.js"></script>
<script type="text/javascript" src="http://phply.blog.163.com/blog/js/jquery.lightbox.js"></script>

JS代碼：
$(document).ready(function(){
??? $('a.lightbox').lightBox({
??????? imageBtnPrev:'plugins/lightbox/images/lightbox-btn-prev.gif',
??????? imageBtnNext:'plugins/lightbox/images/lightbox-btn-next.gif',
??????? imageBtnClose:'plugins/lightbox/images/lightbox-btn-close.gif',
??????? imageBlank:'plugins/lightbox/images/lightbox-blank.gif',
??????? imageLoading:'plugins/lightbox/images/lightbox-ico-loading.gif'
??? });
});

HTML代碼：
<a href="http://phply.blog.163.com/blog/test.jpg" class="lightbox" title="圖片標題"><img src="http://phply.blog.163.com/blog/test.jpg" alt="測試圖片" width="200" height="200" /></a>

別忘記images文件下的圖片。

lightbox 圖片路徑，lightbox的image默認是找根目錄，當然你用的是模板生成靜態的程序那以上代碼你可能會用到，所有修改路徑像上述修改。

相關參考：http://lokeshdhakar.com/projects/lightbox/

總結

以上是生活随笔為你收集整理的jQuery lightbox插件(相册全屏效果)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。