Plurk FaceBook Twitter 收進你的MyShare個人書籤 MyShare
  顯示內嵌語法

第三階段【網頁製作系列報導】電子報【各種程式選用】

實用程式彙報

第五篇
超炫的 Lightbox JS 光箱特效程式
適合程度： 初學者 一般程度 進階者 以上均宜
壹、程式來源經過說明：
⊙本程式來源：Lightbox JS 光箱特效是由 Lokesh Dhakae 所開發(目前最新的版本是2.02版)。
⊙原程式範例：當你在載入圖片時，能夠有 Flash 感覺效果，不需另開頁面來展現，可以用來美化你的網站或部落格。
⊙關於作者：Contact：lokesh@huddletogether.com
My name is Lokesh. I'm 24 and I live in Boston, MA where I work as a web developer.
This is just a simple blog. If all goes well I will post once in a while and you can see what I'm up to.
⊙本程式共有兩種秀圖展示方式，單一圖片及群組(接續)圖片展示的功能。
⊙本程式適合當做相片或產品照片展示使用，是個很不錯的免費程式。
⊙來源網站已有詳細說明及介紹，如果您的英文能力不錯，當然可以直接參考研習。
⊙本次電子報也特別針對看不懂英文或不會套用者，提供詳細的修改與套用步驟。
⊙原程式只要兩個套用步驟就可以完成，值得您嘗試看看。
⊙您可自由重製、散布、展示及演出本著作，創作衍生著作，惟需遵照作者或授權人所指定的方式，保留其姓名標示。
⊙依原作者網站宣告，此程式是可使用於商業用途，當然他也希望並感謝您能贊助他。

貳、本程式作者原始修套用說明：(英文)

參、本程式架構及基本檔案如下：
css/lightbox.css： css 樣式表單存放目錄。
images/....：基本圖檔及您要秀圖或產品圖片存放目錄。
js/....：本程式所有 JavaScript 存放目錄。
⊙請至作者網站下載 lightbox2.02.zip 檔案，解壓後有一個 index.html 檔，教您如何使用此特效檔案範例。

肆、程式設定檔修改說明：
js/目錄lightbox.js：(其它不用修改)
在此檔案中找到變數 var resizeSpeed，這是控制特效的速度，預設值是 7 ，你可以自由調整快慢(1 ~ 10)。
如果您想將此程式放到自己的 Blog 裡面，記得將 images/loading.gif 、 images/closelabel.gif 加上你存放此圖所在網址路徑。
css/目錄 lightbox.css：
找到變數 var borderSize = 10 ，假如您需要調整 lightbox.css 檔內的表格邊框(padding)值時，你必需也一同更新此變數值。
同上將此程式放到自己的 Blog 裡面，記得將 images/prevlabel.gif 、 images/nextlabel.gif 替換成圖片的所在網址路徑。
images/目錄：
當然如果您不喜歡 images/ 目錄裡面原始提供的圖示檔，您也可以按其檔名更換自己製作的圖示檔。

伍、初學者套用方式
步驟一、下載原始檔案：
首先請至作者網站下載 lightbox2.02.zip 檔案，解壓後會產生如上所述目錄。

步驟二、插入語法：
在<HEAD>與</HEAD>插入以下四段語法
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

步驟三、單一圖片套用的語法：
原文：<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
解說：<a href="大圖位置" rel="lightbox" title="標題設定"><img src="小圖位置" alt="提示文字" border="0"></a>
備註：如果您沒設定 title="標題設定" ，單一圖片及群組(接續)圖片下方將不會顯示這些文字內容。
範例


陸、進階套用方式
進階一、群組(接續)圖片套用的語法：
只要將展示用圖片設成群組，就可以很方便的接續看上一張或下一張圖片。
在看圖的時候，將滑鼠移到圖片的左半部或右半部，就會自動顯示上一張、下一張提示圖示。
做法：將連結上 rel="lightbox" 改成 rel="lightbox[自定名稱]" ，注意：群組名稱要用中括號包起來。
例如：將三張圖片設定為 tools 的群組，語法如下
<a href="圖片1.jpg" rel="lightbox[tools]">圖片 #1</a>
<a href="圖片2.jpg" rel="lightbox[tools]">圖片 #2</a>
<a href="圖片3.jpg" rel="lightbox[tools]">圖片 #3</a>
範例

進階二、在圖片加入超鏈結語法：

原文：<a href="images/image-4.jpg" rel="lightbox" title="&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;">Image</a>
解說：<a href="大圖位置" rel="lightbox" title="&lt;a href=&quot;要連結的網頁檔名&quot;&gt;標題設定&lt;/a&gt;"><img src="小圖位置" alt="提示文字" border="0"></a>
備註：需要群組(接續)圖時，再加入 rel="lightbox[plants]" 語法即可。
範例

柒、特殊(ThickBox)製作方式：(適合已具備相當 HTML 基礎者)
首先、注意 ThickBox 必須要符合 DTD 規範來製作，並僅支援以下瀏覽器版本：
Windows IE 6.0, Windows IE 7 (7.0.5450.4), Windows FF 1.5.0.5。
Windows Opera 9.0。
Macintosh Safari 1.3.2 & 2.0.3, Macintosh FF 1.5。
第二、請另外下載 thickbox.js 、 ThickBox.css 、 loadingAnimation.gif 三個檔案。
接著、將下列語法貼到<HEAD>與</HEAD>間：
<script type="text/javascript" src="路徑/jquery.js"></script>
<script type="text/javascript" src="路徑/thickbox.js"></script>
<link rel="stylesheet" href="路徑/thickbox.css" type="text/css" media="screen">
css 也可以改成
<style type="text/css" media="all">@import "路徑/thickbox.css";</style>
然後照套我的範例就可以了。
群組(接續)圖片：範例
展示內崁 (inline content)的內容：範例
展示 (iFrame) 的內容：範例
展示 (AJAX) 的內容：範例

捌、其他製作注意事項：
⊙在不影響照片品質下，盡可能將每張照片做好最佳化處理，控制在 100 Kb 左右。
⊙使用單一圖片套用的語法時，此處最主要就是 rel="lightbox" 屬性部分，不要漏掉或套錯。
⊙使用群組(接續)圖片套用的語法處 title 內一定要使用特殊字元語法標籤，不可直接使用符號標籤。
⊙初學者上傳時記得比照原架構目錄，將各次目錄內的檔案一起上傳。
⊙特殊(ThickBox)製作方式時，必需要符合 DTD 規範來製作。
⊙進階者原程式存放目錄及使用圖示等，您可以依自己需求另做安排。
⊙經重新配置修改的程式，也可以配合訂單做立即訂購之用(限索取教材資料者)。
⊙如果是您的瀏覽器 JS 版本衝突，圖片等無法運作，可嘗試在 BODY 內加上以下這段語法：
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

玖、教材資料存放位置說明：
為利網友快速取得本報導相關檔案等資料，歡迎到 網頁研習室 網站進一步取得完整教材。
您也可以加入我們的 教學會員 或 免費索取教材，直接由教材 CD 片內取得更多報導檔案。
本報導所有檔案均存放於 CD:/study/maillist3/pro/05/目錄內，簡單說明如下：
⊙Lightbox 光箱特效程式，存放位置與檔名：/lightbox/lightbox2.02.zip (71 KB)。
⊙ThickBox 特殊製作程式，存放位置與檔名：/thickBox/所有範例檔。
⊙WP lightbox JS WordPress plugin 程式，存放位置與檔名：/wordpress/wp-lightboxJS_latest.zip (10 KB)。
備註：WordPress 可用於 Php 程式，設定更簡單與方便。
⊙本報導所製作的所有 Lightbox 範例檔，存放位置與檔名： CD:/study/maillist3/pro/05/目錄內。
⊙其他類似秀圖，名信片(PostcardViewer)程式存放位置與檔名：CD:/study/maillist3/pro/05/other/postcardviewer.zip (10 KB)。
PostcardViewer 主要特點：(內含範例解說、及另一個 buildgallery_php.zip PHP 檔，限索取教材資料者)
智慧型圖像預載、直覺式圖像瀏覽、檔案小、跨平台、Flash 7 自動偵測、鍵盤瀏覽、免費。
範例
⊙其他類似秀圖，名信片(SimpleViewer)程式存放位置與檔名：CD:/study/maillist3/pro/05/other/simpleviewer.zip (43 KB)。
SimpleViewer 主要特點：(內含範例解說，限索取教材資料者)
Intelligent image pre-loading.
Intuitive image navigation
Lightweight (17k).
Customizable interface - Set text color, frame color and width, navigation position.
Resizable interface - Interface scales to fit browser window.
Cross platform - Windows/Macintosh/Linux (requires Flash 7 or higher).
Flash 7 detection. Users without Flash 7 are messaged to upgrade Flash.
International font support.
Keyboard Navigation (Cursor keys, Home, End, Page Up/Down)
Mousewheel navigation
Optionally right-click to open image in a new window.
Free!
範例
⊕特別聲明：以上檔案之版權均為原創作者所有，請注意版權宣告，並不含於索取教材資料費用內。

拾、結論與建議：
⊕本報每篇報導都花上很多時間搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
⊕本電子報 第三階段 報導資料，將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
⊕強烈建議您【學會 HTML 語法】，她真的簡單易學，懂了她您就能駕馭她，將【所見即所得】軟體當做輔助工具吧。
⊕為因應網友要求，本報自即日起全面改為 索取教材資料 方式 ，繼續提供及服務有此需求網友。
⊕本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的兩套光碟片，則是我們的誠意而已。
⊕本報導內容或資料，因限人力、時間，非 索取教材資料包含線上指導 網友，不接受任何疑惑解答，敬請見諒。
⊕本報導 非會員 可免費訂閱及享用我的電子報報導成果，而 會員 則可以進一步取得所有資料與線上指導。
☆本站所有報導資料，歡迎網友免費加入鏈結，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。

第三階段 96.01.31. 發行第 31 期
更多 精彩報導 文章

© 網頁研習室 網頁製作系列 【電子報】 報導 李文能 主編 ©