Ext-JS Core 3.0--Lightbox

網站連結

最近在玩的Ext-JS推出了3.0版，程式有變瘦，功能有加強，還有號稱的High performance...

裡面有一個新東西叫Lightbox，目前看起來可以讓相本變的很炫..前一頁後一頁、高光、圖片放大縮小。點我看範例。

使用方式也很簡單，先下載ext-core-3.0-beta1.zip

然後解壓縮，把lightbox.js跟ext-core-debug.js放到web service的資料夾

examples.css跟lightbox.css也放進去

然後在你要顯示的那一頁html加進下面這幾行:

<link href="examples.css" rel="stylesheet" />
<link href="lightbox.css" rel="stylesheet" />
<script src="ext-core-debug.js"></script>
<script src="lightbox.js"></script>
<script>
Ext.ux.Lightbox.register('a[rel^=lightbox]');
Ext.ux.Lightbox.register('a.lb-flower', true);
</script>
<style>
.thumbnail {
padding: 4px;
background-color: #e6e6e0;
border: 1px solid #d6d6d0;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
</style>

然後body裡加進

<div class="thumbnail">
<a href="images/image1.jpg" rel="lightbox"><img src="images/thumb1.jpg" alt="Columbine" width="120" height="72"></a></div>

裡面的兩個link分別是你存放縮圖跟大圖的路徑，於是點圖放大的功能就完成了
加進下面的程式

<div class="thumbnail">
<a href="images/image3.jpg" class="lb-flower" title="Click on the right side of an image to move forward."><img src="images/thumb3.jpg" alt="Lily of the Valley" width="120" height="72"></a></div>

則是產生類似畫廊的效果，可以前一頁後一頁一張一張看~
看不懂的話，壓縮檔裡有sample code XD