最近好多人詢問 這個 點圖放大縮小的圖片特效，
所以我把教學原文轉過來了。
這玩意兒其實不算太難，但是貼圖的時候有一丁點麻煩就是了，
實用性還好，不過效果超cool的我很喜歡^__^
本教學轉自 生活的生活｡
原作的教學真的很清楚也很用心，
喜歡這教學或是有帶回家用的朋友們，
別忘了到 這 給辛苦的作者一點鼓勵喔^^
以下教學轉自 生活的生活｡
最近發現另一個有別於lightbox的圖片特效
雖然沒有lightbox那麼花俏
不過使用上也是挺方便的
而且開出來的圖還可以移動
按鍵盤左右鍵可以跳上一張、下一張
這是個可以讓你網頁或部落格上的圖片
點下去會有個彈出視窗的小Plugin
可以讓閱讀者方便的瀏覽圖片
目前測試了IE6和Firefox都可以用
不過IE7就不一定行了(雖然作者說他可以...可能是我測試的機台的問題吧)
大家可以先從這篇來看看使用的效果如何
<步驟一>
highslide官方網站
從官網的Download點下去就會跑出這張圖：
上面是個人用，下面是公家機關使用
看大家的需求點選，不過下面的是要付費的
下載下來後解壓縮
將裡面"highslide"的這個資料夾上傳到網路空間
必須是能直接存取且能放一般的檔案的網空
像我就是傳到Hinet的空間
所以放檔案的網址就會是http:XXX.myweb.hinet.net/
<步驟二>
再來就回到自己的部落格啦
這裡我以Pixnet的部落格為例：
到後台的《版面管理》→
《版面設定》裡《新增一個自定欄位》
將以下的程式碼貼上
<步驟三> 再來就是貼圖啦 當你要貼圖時就使用以下語法
highslide還可以貼其他的東西 像html、swf之類的 至於使用方法....我還沒研究成功~ 不過你可以到資料夾中看看"index.htm" 裡面是所有的預覽 然後再到個別的example html檔用記事本打開 裡面就會有我上面貼的那些東西啦(不過是原文的 要慢慢看) 後來發現在網頁未讀取完畢時 highslide有時候會失效 推測是Pixnet網頁的問題 看看有沒有其他網友也會有這個問題 呼~第一次寫教學文 不知道有沒有表達完全 如果有閱讀的問題或使用上的問題 那就請大家留言啦
上面是個人用，下面是公家機關使用
看大家的需求點選，不過下面的是要付費的
下載下來後解壓縮
將裡面"highslide"的這個資料夾上傳到網路空間
必須是能直接存取且能放一般的檔案的網空
像我就是傳到Hinet的空間
所以放檔案的網址就會是http:XXX.myweb.hinet.net/
<步驟二>
再來就回到自己的部落格啦
這裡我以Pixnet的部落格為例：
到後台的《版面管理》→
《版面設定》裡《新增一個自定欄位》
將以下的程式碼貼上
<script type="text/javascript" src="你放檔案的網空的網址/highslide/highslide.js"></script>
<script type="text/javascript">
// remove the registerOverlay call to disable the controlbar
hs.registerOverlay(
{
thumbnailId: null,
overlayId: 'controlbar',
position: 'top right',
hideOnMouseOut: true
}
);
hs.graphicsDir = '你放檔案的網空的網址/highslide/graphics/';
hs.outlineType = 'rounded-white';
</script>
<!--下面的CSS可以依需要修改-->
<style type="text/css">
.highslide {
cursor: url(你放檔案的網空的網址/highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 1px solid #AAA;
}
.highslide:hover img {
border: 1px solid #555;
}
.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
/*
padding-left: 22px;
background-image: url(你放檔案的網空的網址/graphics/loader.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;
}
.highslide-move {
cursor: move;
}
.highslide-overlay {
display: none;
}
.controlbar {
background: url(你放檔案的網空的網址/highslide/graphics/controlbar4.gif);
width: 167px;
height: 34px;
}
.controlbar a {
display: block;
float: left;
/*margin: 0px 0 0 4px;*/
height: 27px;
}
.controlbar a:hover {
background-image: url(你放檔案的網空的網址/highslide/graphics/controlbar4-hover.gif);
}
.controlbar .previous {
width: 50px;
}
.controlbar .next {
width: 40px;
background-position: -50px 0;
}
.controlbar .highslide-move {
width: 40px;
background-position: -90px 0;
}
.controlbar .close {
width: 36px;
background-position: -130px 0;
}
/* Necessary for functionality */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>
<!--圖片的控制列，看需要，可貼可不貼-->
<div id="controlbar" class="highslide-overlay controlbar">
<a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
<a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
</div>
<步驟三> 再來就是貼圖啦 當你要貼圖時就使用以下語法
<a id="thumb1" href="圖片網址" class="highslide" onclick="return hs.expand(this, { captionId: 'caption1' } )"><img src="圖片網址" alt="Highslide JS" title="點擊圖片放大" width="490" height="392"/></a>
你也可以為圖片加上註解(可加可不加)
<div class='highslide-caption' id='caption1'>
你想加的註解
</div>
上面的註解部份就貼到圖的語法下面(其實貼哪都可以啦 看個人習慣)
記得caption1裡的數字必須跟thumb1裡的一樣它才會顯示在圖下面
如果還要再貼下一張就把數字改一改
<a id="thumb2" href="圖片網址" class="highslide" onclick="return hs.expand(this, { captionId: 'caption2' } )"><img src="圖片網址" alt="Highslide JS" title="Click to enlarge" width="490" height="392"/></a>
<div class='highslide-caption' id='caption2'>
你想加的註解
</div>
以此類推...
highslide還可以貼其他的東西 像html、swf之類的 至於使用方法....我還沒研究成功~ 不過你可以到資料夾中看看"index.htm" 裡面是所有的預覽 然後再到個別的example html檔用記事本打開 裡面就會有我上面貼的那些東西啦(不過是原文的 要慢慢看) 後來發現在網頁未讀取完畢時 highslide有時候會失效 推測是Pixnet網頁的問題 看看有沒有其他網友也會有這個問題 呼~第一次寫教學文 不知道有沒有表達完全 如果有閱讀的問題或使用上的問題 那就請大家留言啦
沒有音樂多寂寞 (2)