[部落] 縮放自如的Highslide JS

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號

寫到這裡,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 則迴響

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

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

  1. 版大~
    Iframe網頁失連嚕 😀

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

    感謝喔 🙄

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

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

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

      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>

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

    谢谢

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

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *