最近好多人詢問 這個 點圖放大縮小的圖片特效,
所以我把教學原文轉過來了。
這玩意兒其實不算太難,但是貼圖的時候有一丁點麻煩就是了,
實用性還好,不過效果超cool的我很喜歡^__^

本教學轉自 生活的生活。
原作的教學真的很清楚也很用心,
喜歡這教學或是有帶回家用的朋友們,
別忘了到 給辛苦的作者一點鼓勵喔^^

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

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

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

大家可以先從這篇來看看使用的效果如何


<步驟一>

highslide官方網站
從官網的Download點下去就會跑出這張圖:
Highslide JS
上面是個人用,下面是公家機關使用
看大家的需求點選,不過下面的是要付費的
下載下來後解壓縮
將裡面"highslide"的這個資料夾上傳到網路空間
必須是能直接存取且能放一般的檔案的網空
像我就是傳到Hinet的空間
所以放檔案的網址就會是http:XXX.myweb.hinet.net/


<步驟二>
這張就是highslide的效果

Highslide JS
再來就回到自己的部落格啦
這裡我以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網頁的問題
看看有沒有其他網友也會有這個問題


呼~第一次寫教學文
不知道有沒有表達完全
如果有閱讀的問題或使用上的問題
那就請大家留言啦





bamcloud 發表在 痞客邦 PIXNET 留言(23) 人氣()


留言列表 (23)

發表留言
  • smilegirl373
  • 看到這篇教學文..好開心呢!!
    謝謝妳的教學呢!!很詳細..
    等不急要馬上開始試試了呢..^^
  • lowtone
  • 我覺得好實用
    謝謝你~~
    寫得很仔細...感恩
  • cafe5417
  • 還是不會用!!

    我用好久唷!!
  • 小米
  • 已經成功了~
    謝謝大大的教學喔!
  • taisuke
  • 先來作筆記XD
    慢點再來實驗,謝謝教學
  • 悄悄話
  • dina33
  • 超級實用啦!!謝謝^=^
  • tmewmeow
  • 學走啦~THX
  • 悄悄話
  • ggp0819
  • 請教一下...

    對不起打擾喲~ 我很喜歡你設計的面版,但是我想要把"我的連結"的分類項目變粗體字這樣比較容易區別,請問我該把font-weight:bold; 加到哪個地方呀??

    因為一直試都找不到,可以麻煩指點一下嗎^_^ 謝謝你~
  • 要多加一個標籤
    如下
    #mylink .box-text h6 {font-weight:bold;}

    bamcloud 於 2007/09/26 21:12 回覆

  • 悄悄話
  • ggp0819
  • 收到!! 謝謝幫忙嘿^__^

    你的創作都好棒♡ 繼續強烈支持♡〃
  • lovearching
  • 謝謝你的教學唷:)
    這個好棒
    改天拿來用啦
  • celeryblue
  • 很喜欢之前那个时尚女孩的模版,只是我的网志图片宽度都是600的,用不了,555~
  • 說到這個我就要哭了
    那個版面本來要分享的
    但我一時手殘忘了備分css了
    所以你不用難過
    要哭的是我才對>.<'

    bamcloud 於 2007/09/30 15:40 回覆

  • jerachuang
  • 請教一下

    請問一下!
    我用了這些語法
    但是按下圖片
    不是像你的那樣 直接跑出來

    我的是跑到下一個視窗
    還要按上一夜才能回到我的網誌

    怎樣才能解決?

    謝謝喔!
  • 恩恩
    那應該是因為存js空間的問題喔
    可能它正在維修或不能外連
    或是你語法放錯都有可能^^

    請問你是存在哪個空間呢

    bamcloud 於 2007/09/30 15:44 回覆

  • jerachuang
  • 我是放在Xuite的網路空間
    這個網路空間可以嗎?
    還是有哪個比較好的?

    我再試試看!
    謝謝 =)
  • 我有看到你在留言版的留言
    晚點在統一回覆喔^^

    bamcloud 於 2007/10/05 18:58 回覆

  • a11113679
  • 想問一下
    是要把highslide那個資料夾一起整個上傳對吧
    哪Google page怎麼辦?
    他好像只能傳一個檔案??
  • SATHA
  • 請問bamcloud是用什麼網路空間上傳資料夾呢?
    因為我的hinet不知道為什麼一直無法登入
    找了好久都找不到能上傳一整個資料夾的空間
    如果妳有好的空間可以告訴我嗎? 超級感謝^^
  • 悄悄話
  • a27772
  • 我想請問一下
    為什麼我的圖片上傳後不會直接顯現出來
    會縮的很小很小變成一個小點
    必須滑鼠移過去才看的到呢
    (有點跟本文沒什麼關係>"<)
  • han951120142
  • 這篇真實用

    謝謝大大的熱心教學Orz
    剛點進去了那下載首頁
    不知道是不是自家的網頁顯示有誤
    沒有東西(泣)
    不過 感覺這東西很棒呢~(遙目)
  • 雪
  • 請問....

    ^^" 我的空間都是用google的, 可是google是要續個檔案上傳的, 不能直接上傳一個資料夾,那可以怎麼辦?? =3= 可以教我一下嗎? 謝.
  • 遊覧の客~
  • 這確實很不錯!!
    可是圖片放出來不是原圖大小...
    如果想在右下加上一個實際大小顯示的標籤要怎麼用?