部落札記

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

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

Highslide JS 資訊
官網：https://highslide.com/
範例：https://highslide.com/#examples
程式下載頁面：https://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="https://您的網頁空間/highslide/highslide.packed.js"></script>
<script type="text/javascript" src="https://您的網頁空間/highslide/highslide-with-html.packed.js"></script>
<link rel="stylesheet" type="text/css" href="https://您的網頁空間/highslide/highslide.css" />
<script type="text/javascript"> hs.graphicsDir = 'https://您的網頁空間/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號


檢視較大的地圖

寫到這裡，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> 加入背景圖片
範例：

野兔的會客室

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

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

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

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

更多野兔的文章推薦：

89 Comments

      1. 再請教,這個應用是否要在自己的BLOG空間中放一個縮小的圖呢?可以是自己的圖床嗎?因為我看到下面這段說明-“hs.graphicsDir 是顯示用的圖片檔位址”及程式碼-“hs.graphicsDir = ‘http://網頁空間網址/highslide/graphics/’;”..

        Marty Windows XP Google Chrome 2.0.172.39
        Reply

      1. 我文章的內文中的放大CODE沒有” br />”在耶!要怎麼去找啊?還有,我點了小圖變大圖後,再點一下就沒再變回小圖了耶!WHY?
        另外,我在想,在後台編輯時,因為程式碼太長了所以會自動換行,剛好它就斷在放大碼及後面的”“,有方法解決嗎?

        Marty Windows XP Google Chrome 4.1.249.1036
        Reply

  24. 版大～
    Iframe網頁失連嚕 😀

    還有你的回應上方圖片的外掛名稱是….?
    還有連結的時候會有提示(灰色)框,有教學嗎??
    還有你的分頁按鈕那個跑來跑去的白色框有教學嗎??

    感謝喔 🙄

    Lay Windows other version Google Chrome 5.0.375.125
    Reply

  27. 請問一下喔…如果我要套用別的款式，就是別的範例所呈現的，是要改哪邊阿???
    highslide.js 是主要的JS檔
    highslide-with-html.js 則是應用在呈現網頁上使用的JS檔
    highslide.css 顯示用的樣式表
    這三個哪一個?

    小豬 Windows other version Internet Explorer 8.0
    Reply

    1. 你可以參考文章內””野兔村的社群連結則是html的修改版本””這一段，將代碼直接全COPY去用，看能不能出現
      如果成功，再來修改成您要的內容

      p.s 剛在您的網頁中我利用FIREBUG修改後，試了一下可以成功！

      野兔 Windows other version Google Chrome 8.0.552.224
      Reply

      1. TO:野兔
        我試過了~
        還是會出現一樣的問題耶 >_<
        我把代碼複製貼上給你看看喔 ^_^

        <div style="margin:3px 0; border: 1px solid #000; text-align:center; background: url(http://farm5.static.flickr.com/4090/5188063688_392f766947_t.jpg) no-repeat; width:56px; height:56px;">

        <a href="#" onclick="return hs.htmlExpand(this, { contentId: ‘highslide-html02’ } )" class="highslide" style="width:56px; height:56px; isplay:block;"></a>

        <div class="highslide-html-content" id="highslide-html02"><br /> <div class="highslide-header"><span>Facebook</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>

        Alan Windows other version Google Chrome 8.0.552.237
        Reply

  32. 野兔您好，我要在wordpress中实现跳出小視窗的顯示內容，就是您的社群链接这个效果；我也根据您的方法把插件上传了，但是“將下列語法加入網頁原始檔裡的 之間”是指什么文件呢？

    谢谢

    Jack Windows other version Google Chrome 10.0.648.204
    Reply

  35. 野兔老師原諒一個白痴，請有空copy上面那個點小圖變大圖的（地圖）完整代碼，只要放進去網頁編輯器就能用，請註明小圖、大圖的位置、能抽空寄給白痴嗎？謝謝！akier_tw@yahoo.com.tw

    AKIER Windows other version Google Chrome 45.0.2454.85
    Reply

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *