不知道從什麼時候開始,網頁上開始流行使用這種技術,當時覺得可能是什麼高深的javascript。
好在透過開發者寫好的套件ThickBox,你不需要寫一行javascript也能表現這樣的效果喔。


當初就是因為好奇而深入研究這種作法,才發現原來是有外國高手寫出各種套件,能將這種新的網頁操作方式讓不懂javascript的人也能呈現出來,目前流行的有很多像是GrayBox,ThickBox,LightBox。這次木笛要介紹的是ThickBox3.1。
這類型網頁呈現應用的特點:
1.固定顯示區域於瀏覽器中央,背景壓暗讓瀏覽者觀賞更方便。
2.會隨瀏覽器視窗大小自行調整位置
所以用來取代傳統的跳出瀏覽視窗和圖片導覽是最常看見的應用範圍

目標:透過ThickBox套件建立網頁的圖片導覽。
難度:高級
示範網頁

1.ThickBox要功成必須下載三個檔案分別是thickbox.jsthickbox.cssjQery.js以及載入動畫檔loadingAnimation.gif

2.開一個資料夾叫做thickboxdemo(別太古意,名字隨便你取),把下載的三檔案放入,再於其中開一個images的資料夾,把loadingAnimation.gif放進這裡。

3.開一個新的網頁存在相同的目錄,注意喔!你的文件類型不可以是無喔。這樣ThickBox在對位上會出現一些問題。

4.好接下來我們要把thickbox.js以及jQery檔連到網頁裡。方法就是在表頭裡置入以下兩行程式碼:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>

5.接著我們要把thickbox.css匯入網頁中。

到此為止,我們的準備工作已經完成,接下來就開始時做圖片導覽吧。

6.準備3-5張照片的大圖和小圖放到images的資料夾,並於網頁中插入小圖。


7.然後替每張小圖建立連結,使其連到大圖。並於連結語法後加入class="thickbox"

8.再於連結與法處加入rel="gallery"的語法(名字可以自己取,不過每張圖的rel都要相同喔!)

9.你的ThickBox 圖片導覽已經完成了,快用F12瀏覽看看有多酷吧。


<延伸閱讀>
有興趣的朋友可以瀏覽原文網站ThickBox 3.1,學習更多進階的用法。

fennser 發表在 痞客邦 PIXNET 留言(5) 人氣()


留言列表 (5)

發表留言
  • David
  • 版主大大您好:
    小弟的資質還不太了解您的教學,有幾個問題希望大大能教教小弟,我使用frontpage來編輯網頁,有很多的圖片想使用thickbox來呈現,在您的說明(4.)把thickbox.js以及jQery檔連到網頁裡。(請問怎麼連?)方法就是在表頭裡置入以下兩行程式碼:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="thickbox.js"></script>(請問那裡的表頭?)

    5.接著我們要把thickbox.css匯入網頁中。(請問這是什麼編輯軟體?)

    我第四個說明後就不曉得怎麼做了?
    麻煩指導~感恩

  • 1.所謂的表頭就是指在html的文字檔中的之間的內容,一般css的定義也都是放在這裡

    2.這個軟體是Dreamweaver,是網頁設計界中公認的標準軟設計體,frontpage的操作環境比較像word,所以對初學者而言很適合上手。

    我也是從frontpage開始一路學上來的,但是學了Dreamweaver後frontpage已經沒再碰了,如果有"管道"取得dreamweaver我倒是建議儘早學習,不過不管用什麼軟體,都要試著學習看網頁的原始文字檔,可以加速你學習的速度。其實你可以從我的示範網頁看原始文字檔來學,除了thickbox的部份外其他都是很基本的編輯技巧,加油囉!

    fennser 於 2009/01/10 01:50 回覆

  • Crux
  • 您好
    有些問題想請教您
    1.套用thickbox的效果有出來但是圖片無法顯示請問能提供意見嗎
    2.如果是多張圖片,下面的文字空格(nex 跟 pre的間隔)變成問號請問要修改哪邊呢
    以上,感謝不吝賜教
  • PAIR
  • 大大你好
    我無法下載thickbox.css
    請問這個連結點還在嗎?
    謝謝!
  • 唉呀,感謝你的回覆
    沒想到連結給錯了
    已更正可以正常顯示了

    fennser 於 2010/01/22 18:34 回覆

  • 小瓜
  • 請問一下
    7.然後替每張小圖建立連結,使其連到大圖。並於連結語法後加入class="thickbox"

    8.再於連結與法處加入rel="gallery"的語法(名字可以自己取,不過每張圖的rel都要相同喔!)


    這二句 我不太懂你意思耶...
    怎麼把小圖建立連結 然後可以連到大圖?????
  • 小瓜
  • 請問一下
    7.然後替每張小圖建立連結,使其連到大圖。並於連結語法後加入class="thickbox"

    8.再於連結與法處加入rel="gallery"的語法(名字可以自己取,不過每張圖的rel都要相同喔!)


    這二句 我不太懂你意思耶...
    怎麼把小圖建立連結 然後可以連到大圖?????