我對美有種偏執。

最近發現另一個有別於lightbox的圖片特效
雖然沒有lightbox那麼花俏
不過使用上也是挺方便的
而且開出來的圖還可以移動
按鍵盤左右鍵可以跳上一張、下一張

這是個可以讓你網頁或部落格上的圖片
點下去會有個彈出視窗的小Plugin
可以讓閱讀者方便的瀏覽圖片

目前測試了IE6和Firefox都可以用
不過IE7就不一定行了(雖然作者說他可以...可能是我測試的機台的問題吧)

以下的圖就是highslide的效果啦，大家可以按左鍵(上鍵)或右鍵(下鍵)來控制上一張、下一張：

     

highslide官方網站

點進去官方網站之後，尋找"Download"按鈕並依照下面圖示依序點選
  

總共有三種版本可以下載，不過我們選擇的是最左邊Free也就是免費的版本
其他兩個要付費的有什麼不同我也不知道(￣▽￣)

下載下來的會是個壓縮檔
例如我目前下載到的最新版本是4.0.6，那麼檔名就會是"highslide-4.0.6.zip"
解壓縮之後，裡面應該會有"highslide"、"images"兩個資料夾跟其他一堆html的範例
目前我們只要highslide這個資料夾
接下來找個可以外連且可以放資料夾的網路空間上傳
例如我用的是中華電信的網路空間，我只要把highslide這個資料夾直接上傳就OK了


接下來就是回到自己的部落格啦，首先必須先做個前置作業
這裡以Pixnet痞克幫為例，到部落格後台之後點選側邊欄位設定
 
點選新增版位之後，把下面的程式碼都給貼上去

剛剛有提到，我是把我的highslide資料夾傳到hinet的空間
所以我的highslide的網址會是http://XXX.myweb.hinet.net/
那以下的highslide的網址請自行帶換成你的網路空間位址

<script type="text/javascript" src="highslide的網址/highslide/highslide.js"></script>
<script type="text/javascript">
    hs.graphicsDir = 'highslide的網址/highslide/graphics/';
</script>

<style type="text/css">
.highslide-wrapper div {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide的網址/highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide-wrapper, .drop-shadow {
    background: white;
}
.highslide img {
    border: 1px solid #aaa;
}
.highslide:hover img {
    border: 1px solid #333;
}
.highslide-wrapper {
    background: white;
}
.highslide-image {
    border: 10px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 5px solid white;
    border-top: none;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(highslide的網址/highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}

a.highslide-full-expand {
    background: url(highslide的網址/highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
</style>

再來是最重要的貼圖的語法了
過程總是會比較麻煩的，但習慣了就還可以接受
而且圖開出來的成果可是很讚的

<a id="thumb1" href="圖片網址" class="highslide" onclick="return hs.expand(this, { captionId: 'caption1', align: 'center' } )"><img src="圖片網址" "Highslide JS" "點擊圖片放大" width="圖片的寬度(數字)" height="圖片的高度(數字)"/></a>
你也可以為圖片加上註解(可加可不加)
<div class='highslide-caption' id='caption1'>
想加的註解
</div>
上面的註解部份就貼到圖的語法下面(其實貼哪都可以啦 看個人習慣)
記得caption1裡的數字必須跟thumb1裡的一樣它才會顯示在圖下面

藍色的部份就是
開出來的圖將會置中在螢幕中央
依需要 可加可不加

如果還要再貼下一張就把數字改一改，例如：

<a id="thumb2" href="圖片網址" class="highslide" onclick="return hs.expand(this, { captionId: 'caption2', align: 'center' } )"><img src="圖片網址" "Highslide JS" "Click to enlarge" width="圖片的寬度(數字)" height="圖片的高度(數字)"/></a>
<div class='highslide-caption' id='caption2'>想加的註解</div>

其實上面那些程式碼都是從他資料夾裡的範例裡找出來的
如果你也想研究，那麼你可以用筆記本去開那些html檔
程式都在那裡面，你可以去看看每個範例有什麼不同的效果
像是無邊的啦、縮放啦等等
或是直接點index.htm
它也可以讓你縮放ajax、flash等不是圖片的檔

至於要怎麼樣讓你新增的版位消失
你可以搜尋你部落格的原始碼，找你新增版位的名稱
例如我是取作highslide4.0.6，那麼我就可以在我的原始碼裡找到這段：
<div id="box114335" class="box">
    <h4 class="box-title">highslide4.0.6</h4>
上面的box114335就是這個欄位的標籤啦，數字你找到的應該會跟我不一樣
接下來你只要把這段加到你CSS裡的任何地方
#box114335{
    display:none;
}
你新增的highslide版位應該就不會出現在blog裡啦