> > jQuery lightBox plugin

jQuery lightBox plugin

jQuery lightBox plugin
.使用方式簡單
 不用再像 lightbox 一樣要逐個加 rel="lightbox" 
.載入效果更加流暢

1.請至 jQuery lightBox plugin 網站下載檔案後
 上傳到自己的空間

2.然後在 <head> 跟 </head> 裡插入以下程式碼
 ( Blogger 則是找到 </b:skin> 跟 </head> )

<script type="text/javascript" src="上傳到自己的空間的jquery.js"></script>
<script type="text/javascript" src="上傳到自己的空間的jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="上傳到自己的空間的jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
// 連結圖片若有加 lightbox 的 rel="lightbox" 便會執行
$('a[@rel*=lightbox]').lightBox();
// 執行區塊 id 為 gallery 的連結圖片
$('#gallery a').lightBox();
// 執行樣式為 lightbox 的超連結
$('a.lightbox').lightBox();
// 執行所有超連結(不建議使用 因為 jQuery lightBox plugin 無法顯示網頁)
$('a').lightBox();
});
</script>
3.單張圖片請直接沿用 rel="lightbox"
<a href="大圖片" rel="lightbox"><img src="小圖片" /></a>
多張圖片只要在區塊內直接連結大圖片就可以了
<div class="gallery">
<a href="大圖片1"><img src="小圖片1" /></a>
<a href="大圖片2"><img src="小圖片2" /></a>
<a href="大圖片3"><img src="小圖片3" /></a>
</div>
執行的結果請參見 Reset : memo(artist)
<!--
補充說明一
如果不是把整個 jQuery lightBox plugin 檔案按照原先路徑上傳時
jquery.lightbox-0.5.js 的圖片路徑要記得作修改
imageLoading: 'i上傳到自己的空間的lightbox-ico-loading.gif',
imageBtnPrev: '上傳到自己的空間的lightbox-btn-prev.gif',
imageBtnNext: '上傳到自己的空間的lightbox-btn-next.gif',
imageBtnClose: '上傳到自己的空間的lightbox-btn-close.gif',
imageBlank: '上傳到自己的空間的lightbox-blank.gif',
-->
<!--
補充說明二
原本使用 lightbox rel="lightbox" 語法的人
也不需再做修改
只要有加入上述 JavaScript 的一小段判斷
便可直接使用
// 圖片若有加 lightbox 的 rel="lightbox" 便會執行
$('a[@rel*=lightbox]').lightBox();
-->
<!--
補充說明三
預設為 #gallery
可依需求修改
預設為id    $('#gallery a').lightBox();
改為class    $('.gallery a').lightBox();
-->