八月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號

寫到這裡,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來處理,使用起來效果還不錯,所以也把野兔會客室加進來,好用就好了^^



利用E-mail訂閱野兔最新的文章
輸入你的電子郵件地址: 發送者為 FeedBurner
本篇文章引用網址:

引用列表 (0)

目前有 89 個迴響 (訪客:49 篇, 格主:40 篇)

  1. 1
     Windows XP Firefox 3.0.12 says:

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

  2. 2
    豬小妞 Windows XP Internet Explorer 6.0 says:

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

  3. 3
    小笠 Windows other version Firefox 3.5.1 says:

    好帥,我有空也來裝一下

  4. 4
    高妹 Windows XP Internet Explorer 6.0 says:

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

  5. 5
    LKK Windows other version Google Chrome 2.0.172.37 says:

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

  6. 6
    xD~碳 Windows XP Firefox 3.5.1 says:

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

  7. 7
    Arno Ruan Windows XP Firefox 3.5.1 says:

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

  8. 8
    blueseas55 Windows Vista Internet Explorer 8.0 says:

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

  9. 9
    拆組達人 Windows XP Google Chrome 2.0.172.39 says:

    我是個懶人,所以用外掛!:p

  10. 10
    bb100 Windows XP Firefox 3.0.13 says:

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

  11. 11
    dino Windows XP Firefox 3.5.2 says:

    好難啊

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

  12. 12
    dllee Windows XP Firefox 3.5.2 says:

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

  13. 13
    Marty Windows XP Google Chrome 2.0.172.39 says:

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

  14. 14
    J.Wen Windows XP Firefox 3.5.2 says:

    這個好帥 來裝一下 XD”

  15. 15
    willin Windows XP Firefox 3.0.13 says:

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

  16. 16
    魏風 Windows Vista Safari 4.0.3 says:

    好方便呀!

  17. 17
    Rainbow Windows XP Internet Explorer 7.0 says:

    殘念~這個芝麻不能用 😥

  18. 18
    acedia0915 Windows XP Firefox 3.5.3 says:

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

  19. 19
    索尼斯 Windows XP Firefox 3.5.3 says:

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

  20. 20
    ram Windows XP Internet Explorer 8.0 says:

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

  21. 21
    kate Windows XP Internet Explorer 8.0 says:

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

  22. 22
    Marty Windows XP Google Chrome 4.1.249.1036 says:

    野兔兄,我現在可以用了,因為我把SHUTTERLOAD外掛關了,但出現一個問題,就是照片的結束會多出”/>”,請問是什麼原因?可以幫我看一下嗎?如下:
    http://blog.martylan.com/?p=1385

  23. 23
    聽。風 Windows Vista Google Chrome 4.1.249.1064 says:

    圖片的部分有點麻煩@@
    美功能力很差XD

  24. 24
    Lay Windows other version Google Chrome 5.0.375.125 says:

    版大~
    Iframe網頁失連嚕 😀

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

    感謝喔 🙄

  25. 25
    Sharon Windows XP Internet Explorer 7.0 says:

    因為你的解說,讓我獲益良多,謝謝!
    但請教一下,我要做圖片展示,但點圖放大的注解(就是下方的圖片文字)
    為何都會抓一樣的呢?可幫我看看哪邊需修改嗎?謝謝
    以下是連結
    http://www.paiho.com/show/show_%202010AsiaOutdoor/show_2010Asia%20Outdoor.html

  26. 26
    Sharon Windows XP Internet Explorer 7.0 says:

    💡 多謝您喔

  27. 27
    小豬 Windows other version Internet Explorer 8.0 says:

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

  28. 28
     Windows XP Internet Explorer 8.0 says:

    😯 不知道痞客邦是否可以用這種語法?? 有其他方法拜託告訴我 🙄

  29. 29
    aLien raBbit Windows other version Google Chrome 8.0.552.224 says:

    您好~我照著你的教學把JS和語法個別放到了公告欄和側欄,
    但是效果出不來… ><
    能幫我看看嗎?
    我下載的版本是最新的版本。

  30. 30
    aLien raBbit Windows other version Google Chrome 8.0.552.224 says:

    您好~
    我換了空間,現在可以了~ XDD

  31. 31
    Alan Windows other version Google Chrome 8.0.552.237 says:

    野兔您好~
    我按照您的步驟做了~
    圖片有顯示出來
    但是為什麼不能點呢?
    可否請野兔幫我看一下
    感恩~謝謝 ^_^
    http://blog.guitar.com.tw

    • 野兔 Windows other version Google Chrome 8.0.552.224 says:

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

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

      • Alan Windows other version Google Chrome 8.0.552.237 says:

        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>

  32. 32
    Jack Windows other version Google Chrome 10.0.648.204 says:

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

    谢谢

  33. 33
    小連 Windows XP Internet Explorer 8.0 says:

    請問這套軟體可在dreamweaver裡編輯嗎?
    要如何使用

  34. 34
    JU Windows XP Google Chrome 25.0.1364.172 says:

    野兔你好,不好意思,
    我想請問一下..
    有辦法讓它點選的視窗,出現在網頁的正中央嗎?

  35. 35
    AKIER Windows other version Google Chrome 45.0.2454.85 says:

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

  36. 36
    AKIER Windows other version Google Chrome 45.0.2454.85 says:

    訂正一下:是廣場鳥瞰那張的文字檔、實在 :xd:

  37. 37
    AKIER Windows other version Google Chrome 45.0.2454.85 says:

    3Q我試試!

  38. 38
    elle Windows other version Google Chrome 49.0.2623.87 says:

    您好
    想請問一下,
    二的部分”圖片 Highslide 效果語法”,
    在使用PHP重複區域的時候出現了與javascript衝突
    請問我該修改哪個部份呢?

留下迴響

放心, 您留下的電子郵件不會被公開或散佈。


野兔村 支援 Gravatar 大頭貼,您可於「Gravatar官方網站」免費取得專屬大頭貼。


使用Facebook來留言
blank

无觅相关文章插件,快速提升流量