DSC_1165  

燈箱特效(lightbox)是現在滿熱門的顯示特效XD
Box Window的意思是
在網頁開啟一個視窗(非新視窗的)
視窗會出現在網頁正中央
並暗化周圍區塊將重點強調出來

一開始我是看到虎穴和哈密瓜的使用才想到去找這個
相關的方法有很多多種,個人是使用ThickBox 
這裡有其他光箱特效的外掛介紹,有興趣的話可以看看:) 

ThickBox 3.1介紹01
ThickBox 3.1介紹02

官方網站(不過似乎停止更新了><)

步驟很簡單
1.下載下載JS、CSS與圖檔等檔案並上傳到網頁空間
2.在<head>和</head>之間插入指定語法(記得檔案連結內容要修改成你之前上傳的網頁空間喔)
3.看是要用哪種特校,就套用底下的語法貼圖或是文字就可以了!

由於痞客邦沒有像FC2一樣把網頁原始碼直接列出來給使用者修改
所以一開始可能會找不到<head></head>在哪
拜過google大神後終於讓我發現了XD

如果要將這個外掛套用在痞客邦的部落格上
將必須將步驟2的語法貼到側邊欄位設定頁尾描述的最後面
如此一來也可以輕鬆使用這個方便的外掛功能^^

其實他的應用範圍很廣,不過原本寫得很詳細的教學網站不見了…
以我現在使用的圖片功能為例
簡單介紹一下


一、到官方網站下載必要元件、並上傳到網頁空間
包含thickbox.js
  thickbox.css
  loadingAnimation.gif

將下載回來的檔案放在檔名為thickbox的資料夾裡
然後在裡頭另外開一個images夾資料夾、並將loadingAnimation.gif放進去
之後將整個thickbox的資料夾上傳到你的網頁空間

 

二、 將下面這段語法貼到<head>和</head>、或是痞客邦的側邊欄位設定頁尾描述的最後面

<!--TICK BOX網頁特校-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="你上傳的thickbox.js的連結網址"></script>
<link rel="stylesheet" href="你上傳thickbox.css檔案的連結網址" type="text/css" media="screen" />
<!--TICK BOX網頁特校-->

 

三、貼圖時修改語法
以痞客邦的網誌為例,先用一般方式貼圖(不要讓他連回相簿喔)
之後按編輯器左上角的『切換編輯器』 打開HTML原始碼做修改
<a href="圖片網址" class="thickbox"><img src="圖片網址"></a> 
然後就大功告成啦XD

回到編輯器模式後可自行調整顯示在網誌上的圖片大小

不過自己一般貼生活小圖不太會用到這外掛
加上痞客邦在貼圖+連結&修改HTML的部分不如FC2方便
(FC2是以顯示原始碼讓你編輯為主@@)
所以僅供參考(?) 

 

 

以上!有問題歡迎問我XDDD

創作者介紹
創作者 日津樹伶 的頭像
日津樹伶

✦觀象草圖✦

日津樹伶 發表在 痞客邦 留言(0) 人氣()