jPhotoGrid 浮出圖片方便瀏覽

jPhotoGrid 能把放大的圖片直接放在截圖列表上方的一個 jQuery 套件，這個套件可以輸入原始圖片和圖片的介紹文字，並且把介紹文字和放大的圖片放在一個簡單大方的表格之中。所有的外觀設計全部都在 CSS 設計檔之中，主要的就是以絕對定位的方式來做，可以將一張圖片放大供使用者瀏覽，然後再放回原處就像是使用者拿起來看的感覺，主要是利用瀏覽器的圖片縮放的能力作用的是容器的大小。

使用方法：
第一步 載入需要用到的 JavaScript 和 CSS 檔
//jPhotoGrid 的 CSS 樣式檔
<link href="jphotogrid.css" rel="stylesheet" type="text/css" media="screen" />
//IE 版本的修正 CSS 樣式檔
<!--[if IE]>
<link href="jphotogrid.ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//jPhotoGrid 的主程式碼
<script src="jphotogrid.js"></script>


第二步 寫入圖片的列表
<ul id="pg">
<li>
<img src="圖片連結" alt="圖片名稱">
<p>圖片名稱</p>
</li>
<li>
<img src="圖片連結" alt="圖片名稱">
<p>圖片名稱</p>
</li>
<li>
<img src="圖片連結" alt="圖片名稱">
<p>圖片名稱</p>
</li>
<li>
<img src="圖片連結" alt="圖片名稱">
<p>圖片名稱</p>
</li>
<li>
<img src="圖片連結" alt="圖片名稱">
<p>圖片名稱</p>
</li>
‥
    ‥
    ‥
</ul>

第三步 為小圖片的列表寫入 CSS 樣式
#pg { position: relative; height: 585px; background: #000; }
#pg li { position: relative; list-style: none; width: 175px; height: 117px; overflow: hidden; float: left; z-index: 2; opacity: .3; }
#pg li.active { opacity: 1; }
#pg li.selected { opacity: 1; z-index: 99; -moz-box-shadow: 0px 0px 10px #fff; -webkit-box-shadow: 0px 0px 10px #fff; }
#pg li img { display: block; width: 100%; }
#pg li p { color: white; margin: 10px 0; font-size: 12px; }

第四步 寫入啟動 jPhotoGrid 的 JavaScript 程式碼片段
$(function(){
$('#pg').jphotogrid({
baseCSS: {
width: '175px',  // 小圖寬度
height: '117px', // 小圖高度
padding: '0px'   // 小圖框線與內容的距離
},
selectedCSS: {
top: '50px',    // 與上方距離
left: '100px',  // 與左側距離
width: '500px', // 寬度
height: '360px',// 高度
padding: '10px' // 框線與內容的距離
}
});
});

作者網站：http://www.gethifi.com/blog/jphotogrid
檔案大小：4.86 KB(包含範例)
檔案下載：http://files.www.gethifi.com/blog/jphotogrid.zip
檔案備份：下載