八月03

[部落] 縮放自如的Highslide JS

2009年 08月03日 , 19:26

Highslide JS是個非常好用的Java Script，應用的範圍相當地廣，重點是Highslide JS is an open source，個人使用是免費的，在開放源碼之下，許多進階的應用也變得五花八門
野兔村也加入這項功能，讓網頁呈現上變得多元一點

下面會介紹野兔曾使用過的Highslide JS功能，過程有點複雜，如果您會一點html學起來會快一點

Highslide JS 資訊
官網：http://highslide.com/
範例：http://highslide.com/#examples
程式下載頁面：http://highslide.com/download.php
(直接點選Download now! ，選擇Free來下載)

看到官網上的範例，有沒有覺得很優呀！瀏覽器的支援也很廣，除了IE6在顯示上不是很完美，所以請大家快換掉IE6吧！
不僅可以應用在圖片上，也可應用在HTML上，而且參數的設定簡單，那跟著野兔學下去吧！

在側邊欄位可以看到【社群連結】，下面的圖片連結就是應用了Highslide JS，大家可以去按按看

圖片也可以利用Highslide JS來做到小圖放大的效果，好處是這樣就不用跳換頁，在原來的網頁視窗內可以看到原圖的大小，而且在圖片上按著左鍵不放就可以移動圖片，範例如下

要怎麼做呢？

一、Highslide JS前置作業

首先把Highslide JS的檔案下載回來，將檔案裡的highslide資料夾全部上傳至網頁空間裡，接著就可以在自己的網頁上加入語法

將下列語法加入網頁原始檔裡的 <head> </head>之間

<!— 圖片放特效 —>
<script type="text/javascript" src="http://您的網頁空間/highslide/highslide.packed.js"></script>
<script type="text/javascript" src="http://您的網頁空間/highslide/highslide-with-html.packed.js"></script>
<link rel="stylesheet" type="text/css" href="http://您的網頁空間/highslide/highslide.css" />
<script type="text/javascript"> hs.graphicsDir = 'http://您的網頁空間/highslide/graphics/'; hs.showCredits = false; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; </script>
<!— 圖片放特效結束 —>

這邊稍微解釋一下上面的意義
highslide.js 是主要的JS檔
highslide-with-html.js 則是應用在呈現網頁上使用的JS檔
highslide.css 顯示用的樣式表

hs.graphicsDir 是顯示用的圖片檔位址
hs.wrapperClassName 是邊框的樣式，這邊我選擇使用 borderless

基本上不用更改原來的檔案，原來的就很好用了
好了，這個前置作業處理好後就可以實作顯示的效果了

二、圖片 Highslide 效果語法

先說明圖片的效果語法

<a id="thumb1" href="大圖片網址" class="highslide" onclick="return hs.expand(this, { captionId: 'caption1', align: 'center' } )">
<img src="小圖片網址" title="點擊圖片放大" width="圖片的寬度" height="圖片的高度"/> </a>
<div class='highslide-caption' id='caption1'>想加的註解</div>

其中 id 可以按自己的需求更改
如果需要加入註解的話要注意 <a> 裡 captionID 的值，需要跟 <div> id 的值一樣才會正確顯示註解內容

範例：

我是註解

三、html 的 Highslide 效果語法

在漫步安平一文裡，野兔就使用許多Highslide的語法來內嵌google地圖，這邊教各位使用

><div> <a href="#" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html01' } )" class="highslide">網頁文字</a>
<div class="highslide-html-content" id="highslide-html01"> <div class="highslide-header"><span>標題文字</span>
<ul><li class="highslide-move"><a href="#" onclick="return false">Move</a></li><li class="highslide-close">
<a href="#" onclick="return hs.close(this)">Close</a></li></ul></div> <div class="highslide-body">跳出小視窗的顯示內容
</div></div></div>

網頁文字：是還未點入時，在網頁上呈現的文字連結，可隨意更改
標題文字：可隨意更改
跳出小視窗的顯示內容：要在跳出的視窗顯示的內容，就是寫在這裡

注意：
在 <a> 裡找到 contentID: 'highslide-html01'，其中highslide-html01可以隨意更改
下一行的 <div> 裡，找到
id="highslide-html01"，其中highslide-html01就是要跟上面的contentID的值一樣才可以正確顯示內容

範例：

觀看地圖

億載金城　地址：台南市安平區光州路3號

Move
Close

檢視較大的地圖

寫到這裡，Highslide JS 的主要功能都寫完了，其它不同的地方就只差在顯示效果而已，大家可以參考下載回來的檔案，裡頭有個資料夾examples，全部的範例都在裡面，有興趣的朋友可以自行修改來玩玩

野兔村的社群連結則是html的修改版本，有興趣的朋友可以再繼續看下去

<div style="margin:3px 0; border: 1px solid #000; text-align:center; background: url(圖片網址) no-repeat; width:圖片寬度; height:圖片高度;">
<a href="#" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html02' } )" class="highslide" style="width:圖片寬度; height:圖片高度; isplay:block;"></a>
<div class="highslide-html-content" id="highslide-html02"><br /> <div class="highslide-header"><span>標題文字</span>
<ul><li class="highslide-move"><a href="#" onclick="return false">Move</a></li><li class="highslide-close">
<a href="#" onclick="return hs.close(this)">Close</a></li></ul></div><br /> <div class="highslide-body">跳出小視窗的顯示內容
</div></div></div>

修改方法跟前範例是一樣的，只是在第一個 <div> 加入背景圖片
範例：

野兔的會客室

Move
Close

下面是以前幫小犬的國度做的，這個也是用Highslide JS做出來的，大家玩看看囉(點圖，可以看到放大的說明圖)，這我是用iframe掛進來的，所以圖下面的文字就自動略過吧

您的瀏覽器不支援內置框架或目前的設定為不顯示內置框架。

總算都介紹完了，希望大家操作順利

在wordpress裡，有Highslide JS的相關外掛，但野兔不喜歡掛，所以就這樣用囉！

在部落格裡，很多功能都是格主方便自己使用的功能，像野兔村的社群連結，每一個載入的時間都很長，而且大多是野兔自己在用的，所以使用Highslide來處理，使用起來效果還不錯，所以也把野兔會客室加進來，好用就好了^^

隨機文章：

分享書籤：

部落札記 highslide, 語法, 部落
小野兔迴響(25) 人氣(4,145)

(請勿全文轉貼本部落文章)
(歡迎「部份引用」或介紹，引用時請註明 ①網站名稱與 ②文章網址，感謝！ )

▲ back to TOP

本篇文章引用網址：

引用列表 (2)

目前有 52 個迴響 (訪客:25 篇, 格主:25 篇)

犬說道：

2009 年 08 月 03 日 at 20:49

好害羞哦..
總算出教學了!!

回覆
- 野兔說道：
  
  2009 年 08 月 04 日 at 00:17
  
  @犬：
  終於等到有人有興趣了！哈哈
  
  回覆
豬小妞說道：

2009 年 08 月 03 日 at 20:59

雖然這個效果我已經在他網看過教學
不過野兔的教學更加仔細唷^^
所以來幫你推推~~

回覆
- 野兔說道：
  
  2009 年 08 月 04 日 at 00:18
  
  @豬小妞：
  我也是看別人教學來的，只是好像沒看過人寫別的應用，都是單純的圖片放大縮小
  
  回覆
小笠說道：

2009 年 08 月 03 日 at 21:29

好帥，我有空也來裝一下

回覆
- 野兔說道：
  
  2009 年 08 月 04 日 at 00:20
  
  @小笠：
  這HS的效果不錯呢！
  到時如果有問題可以一起來研究看看^^
  
  回覆
高妹說道：

2009 年 08 月 03 日 at 21:34

對於電腦白痴的高妹來說好像有點難，
不過單看野兔這麼有耐性寫得這麼詳細就已經值得一讚啦^^

回覆
- 野兔說道：
  
  2009 年 08 月 04 日 at 00:22
  
  @高妹：
  這個單純是野兔愛炫而已，哈哈
  因為好用，但教應用的文章不多，是說野兔也該貢獻一下了！
  
  回覆
LKK 說道：

2009 年 08 月 03 日 at 23:43

看起來很神奇阿！
找機會來試試看
不知道天空能不能適用呢^^

回覆
- 野兔說道：
  
  2009 年 08 月 04 日 at 00:23
  
  @LKK：
  天空可以裝圖片縮放的，至於html的效果我就沒試過了！
  
  回覆
xD~碳說道：

2009 年 08 月 04 日 at 09:44

不愧是野兔葛葛xD，
碳碳要偷偷拿去用囉！(再說吧xD)
WP外掛裝多了也會影響速度和執行，
用這個應該比外掛好一些吧xD

回覆
- 野兔說道：
  
  2009 年 08 月 04 日 at 21:03
  
  @碳：
  太多外掛其實也麻煩
  
  回覆
Arno Ruan 說道：

2009 年 08 月 04 日 at 16:45

諾發現了個致命的BUG…
只要是SCRIPT的語法，像是MYBLOGLOG粉絲的輸出之類的，會導致IE6~8當機。
一定要用iframe去包才行，對於沒提供的就不能放了。ˊˋ

回覆
- 野兔說道：
  
  2009 年 08 月 04 日 at 21:05
  
  @諾：
  乾脆再發一篇文，不要再用IE了！！
  不過HS的html效果顯示，本來就不是來處理太複雜的JS，應該只能是簡單的html而已
  
  回覆
blueseas55 說道：

2009 年 08 月 04 日 at 20:36

真的太好了
有教學嚕^^
謝謝分享!!

回覆
- 野兔說道：
  
  2009 年 08 月 04 日 at 21:07
  
  @blueseas55：
  有問題歡迎提問！
  
  回覆
拆組達人說道：

2009 年 08 月 05 日 at 10:23

我是個懶人，所以用外掛！:p

回覆
- 野兔說道：
  
  2009 年 08 月 05 日 at 23:12
  
  @拆組達人：
  呵，用外掛比較快
  
  回覆
bb100 說道：

2009 年 08 月 05 日 at 13:18

很實用的介紹，bb也在尋找相關的工具來改善bb的網頁^^

回覆
- 野兔說道：
  
  2009 年 08 月 05 日 at 23:13
  
  @bb100：
  有問題到時可以來一起討論
  
  回覆
dino 說道：

2009 年 08 月 09 日 at 18:57

好難啊

幫我看看我的部落格有沒有什麼需要加強的

回覆
- 野兔說道：
  
  2009 年 08 月 10 日 at 16:27
  
  @dino：
  如果用不到，就不要加到網站裡，會拖速度哩
  
  回覆
dllee 說道：

2009 年 08 月 10 日 at 09:20

真的是太棒了，
原來野兔的軌道是這樣玩的呀
找時間, 我也要來裝 ^__^

回覆
- 野兔說道：
  
  2009 年 08 月 10 日 at 16:42
  
  @dllee：
  呵，套用HS JS的功能，HS 還有很多好玩的特效，我也在想怎麼去加入！
  反正都已經載入JS了，要多加利用！
  
  回覆
Marty 說道：

2009 年 08 月 13 日 at 14:41

這個功能不錯耶!但我有個問題想請教,它和jquery會衝突嗎?

回覆
- 野兔說道：
  
  2009 年 08 月 13 日 at 15:56
  
  @Marty：
  不會的，我的野兔村也有套用jQuery
  
  回覆
  - Marty 說道：
    
    2009 年 08 月 14 日 at 01:16
    
    再請教,這個應用是否要在自己的BLOG空間中放一個縮小的圖呢?可以是自己的圖床嗎?因為我看到下面這段說明-』hs.graphicsDir 是顯示用的圖片檔位址』及程式碼-』hs.graphicsDir = ‘http://網頁空間網址/highslide/graphics/’;』..
    
    回覆
    - 野兔說道：
      
      2009 年 08 月 14 日 at 09:42
      
      @Marty：
      照片檔照舊即可，照片可不縮檔，指定照片長寬也可以
      那個hs.graphicsDir指的是HS特效所需的圖檔，不是放照片的地方
      
      回覆
      - Marty 說道：
        
        2009 年 08 月 15 日 at 12:53
        
        來去試試看效果如何,謝謝分享啦!
        用好了!但跑出來的效果卻不一樣…再來去清一下快取試試看!
J.Wen 說道：

2009 年 08 月 14 日 at 04:00

這個好帥來裝一下 XD』

回覆
- 野兔說道：
  
  2009 年 08 月 14 日 at 09:43
  
  @J.Wen：
  好用的呢！一定要試試
  
  回覆
willin 說道：

2009 年 08 月 15 日 at 14:00

猛然發現你這裡掛了一長串js, 厲害厲害!

回覆
- 野兔說道：
  
  2009 年 08 月 16 日 at 00:15
  
  @willin：
  這個HS JS的特效比較簡單，套用上去就好了
  反而是你的AJAX comments比較厲害，以前弄了好久都內嵌不上去
  
  回覆
魏風說道：

2009 年 08 月 20 日 at 16:16

好方便呀！

回覆
- 野兔說道：
  
  2009 年 08 月 21 日 at 09:28
  
  @魏風：
  是呀！但比起一般的JS，這HS特效看起來比較複雜
  
  回覆
Rainbow 說道：

2009 年 09 月 30 日 at 16:07

殘念～這個芝麻不能用

回覆
- 野兔說道：
  
  2009 年 10 月 01 日 at 19:52
  
  @Rainbow：
  那真的太殘念了
  
  回覆
acedia0915 說道：

2009 年 10 月 07 日 at 14:11

ACE今天心血來潮，使用了highslide圖片的特效，結果原本沒問題的側欄都失效了 /_\ （圖片效果是有出來）趕快過來請教野兔大大，對了ACE用的版本是4.1.7的

回覆
- 野兔說道：
  
  2009 年 10 月 07 日 at 19:58
  
  @acedia0915：
  highslide.js跟highslide-full.js兩支JS，改成highslide-full.packed.js這支JS來執行看看
  我野兔村也改用4.1.7了，你可以看看我的原始檔怎麼寫，你試試看
  
  回覆
  - acedia0915 說道：
    
    2009 年 10 月 08 日 at 00:07
    
    果然是野兔大大，一出手馬上搞定，真是太感動了
    
    回覆
    - 野兔說道：
      
      2009 年 10 月 09 日 at 21:16
      
      @acedia0915：
      呵，應該是版本的關係，4.1.7改了不少
      
      回覆
索尼斯說道：

2009 年 10 月 20 日 at 15:46

我居然現在才看到這篇…
野兔真的太優秀了!

回覆
- 野兔說道：
  
  2009 年 10 月 20 日 at 20:49
  
  @索尼斯：
  這很簡單呢！
  它裡頭有一個highslide-full.packed.js，掛這支就都可以使用了，超方便的
  
  回覆
ram 說道：

2009 年 11 月 19 日 at 14:51

請問野兔大~
如果我的圖片放大後
放大的圖片也要顯示一段文字的超連結方便讓人點選
該怎作呢?謝謝~~

回覆
- 野兔說道：
  
  2009 年 11 月 19 日 at 19:46
  
  @ram：
  你可以在』想加的註解』裡直接加上超連結就可以了
  
  回覆
kate 說道：

2009 年 12 月 01 日 at 11:00

請問如果要做出有比例尺的縮放工具?
像是 http://www.urmap.com/SearchEngine/api/documentation/controls.html
有這方面的範例嗎

回覆
- 野兔說道：
  
  2009 年 12 月 01 日 at 20:13
  
  @kate：
  那是那個urmap地圖的功能，我展示的是google地圖，效果當然不同
  你可以去掛成urmap地圖來用
  
  回覆
野兔說道：

2009 年 08 月 16 日 at 00:13

@Marty：
有問題可以隨時提問，野兔會盡力幫忙

回覆
Marty 說道：

2009 年 08 月 16 日 at 01:23

因為我有裝一個shutter reloaded外掛,用了highslide JS的語法後,出來的效果仍然是shutter reloaded的效果,我用了google chorme及IE 8試都一樣,不知問題在哪裡…

回覆
野兔說道：

2009 年 08 月 17 日 at 13:16

@Marty：
有那個外掛，圖片的HS特效就不能用了！

回覆