什麼是 Lightbox 特效? 試試點擊下面的圖片便能明白。
Lightbox 是一套用來展示網頁圖片的 Javascript 程式碼，可以很簡單地添加在網頁上。只要你的網頁連結到 Lightbox 的 Stylesheet 及Javascript 程式檔，然後在網頁圖片上的超連結加上適當的語法，便能令網頁展示大圖時產生 Lightbox 特效。
Lightbox 最初由 Lokesh Dhakar 開發，當這個好玩的意念開始在網上流傳之後，許多程式設計師便紛紛仿效改良，製作其獨特的版本並將功能鄺充，現在如果以 Lightbox 這關鍵字於搜尋器上搜尋，不難找到其他如 ThickBox，SlimBox 等不同的 Lightbox 版本。
因為不同版本的 Lightbox 可能會支援不同的圖檔超連結語法，如果為部落格中的圖檔超連結添加了某個語法，經過一段時間之後發現更加正點但不能支援現有語法的 Lightbox 版本，到時便要煩惱如何修改大量添加了舊有語法的超連結了。因此建議在部落格添加這個特效前最好先行測試各個版本的功能，選定最合心意的版本後才為部落格進行裝修工程。
你現正瀏覽的這個部落格所採用的是一個名為 Lightbox Plus 的版本。這個版本添加了原祖 Lightbox 2 版本所沒有的自動跟視窗放大縮小的功能，支援原祖版本的超連結語法，界面亦算簡單易明，如果你對這個版本有興趣，可到 http://serennz.sakura.ne.jp/toybox/lightbox/ 下載測試。
當找到合適的 Lightbox 版本後，第一件事先要找一個網上空間寄存 Lightbox 的程式檔。不同版本的 Lightbox 所需上傳的檔案各有不同。就以現在我所用的 Lightbox Plus 版本為例，當我下載及解壓檔案後，我只需上傳 sample 資料夾內的 resource 資料夾及資料夾內的所有內容到我的網上空間便可以；因為我想日後容易辨認我所上傳資料夾的內容，所以我將 resource 資料夾在我的網上空間改名為 lightboxplus。
接着登入 blogger，到版面配置 => 修改 HTML，在 "修改範本" 視窗中搜尋 <head> tag，在 <head> tag 下添加以下指向網上空間中 lightbox.css 及 lightbox_plus.js 的語法 (只加插紅色部份)。
如果你懶得自己再找網上寄存空間，可以直接使用以上語法借用寄存在我的網上空間內的程式檔。
因為現今很多免費的網上寄存空間都不能支援遠端圖檔存取，如果你是使用自己的寄存空間，特別是一些免費的寄存空間，很大機會你要另覓途徑儲存 Lightbox 程式所需的圖檔。以這個部落格所用的 Lightbox plus 為例，因為 Blogger 可以存取 Picasa 上的圖檔，所以我先將 resource 資料夾內的所有圖檔上傳到一個 Picasa 的 Album 內，並記下每個圖檔在 Picasa Album 內的超連結位置。
之後在 Windows 內用記事本 (notepad) 打開 resource 資料夾內的 lightbox_plus.js 檔案，在檔案最尾段可以找到以下 function 的語法，將語法內原本指向 resource 資料夾內各 gif 圖檔的超連結改成 Picasa Album 內的超連結，如下 :
完成後再將 lightbox_plus.js 檔上傳到網上空間。
以上準備功夫完成後便可在部落格文章內為各圖片超連結添加 Lightbox 語法。最常用的圖片超連結語法有兩個；第一個是為單一圖片添加 Lightbox 特效；方法是在 <a ref ...> tag 中加上 rel="lightbox" 語法，例子如下 :
另一個常用的語法是為一組圖片添加 Lightbox 特效；方法是在 <a ref ...> tag 中加上 rel="lightbox[group]" 語法，即所有同組的圖檔連結以相同的 group 名稱命名，這樣當游標滑入放大了的影像範圍時，影像便會顯示 "下一張" 或 "上一張" 相片的圖示，例子如下 :
其他的語法通常會在各個 Lightbox 版本的下載網站中詳列。看到這裏，有沒有興趣跟我一樣，為自己的部落格加上這個好玩的特效呢 ~
~。
Lightbox 是一套用來展示網頁圖片的 Javascript 程式碼，可以很簡單地添加在網頁上。只要你的網頁連結到 Lightbox 的 Stylesheet 及Javascript 程式檔，然後在網頁圖片上的超連結加上適當的語法，便能令網頁展示大圖時產生 Lightbox 特效。
Lightbox 最初由 Lokesh Dhakar 開發，當這個好玩的意念開始在網上流傳之後，許多程式設計師便紛紛仿效改良，製作其獨特的版本並將功能鄺充，現在如果以 Lightbox 這關鍵字於搜尋器上搜尋，不難找到其他如 ThickBox，SlimBox 等不同的 Lightbox 版本。
因為不同版本的 Lightbox 可能會支援不同的圖檔超連結語法，如果為部落格中的圖檔超連結添加了某個語法，經過一段時間之後發現更加正點但不能支援現有語法的 Lightbox 版本，到時便要煩惱如何修改大量添加了舊有語法的超連結了。因此建議在部落格添加這個特效前最好先行測試各個版本的功能，選定最合心意的版本後才為部落格進行裝修工程。
你現正瀏覽的這個部落格所採用的是一個名為 Lightbox Plus 的版本。這個版本添加了原祖 Lightbox 2 版本所沒有的自動跟視窗放大縮小的功能，支援原祖版本的超連結語法，界面亦算簡單易明，如果你對這個版本有興趣，可到 http://serennz.sakura.ne.jp/toybox/lightbox/ 下載測試。
當找到合適的 Lightbox 版本後，第一件事先要找一個網上空間寄存 Lightbox 的程式檔。不同版本的 Lightbox 所需上傳的檔案各有不同。就以現在我所用的 Lightbox Plus 版本為例，當我下載及解壓檔案後，我只需上傳 sample 資料夾內的 resource 資料夾及資料夾內的所有內容到我的網上空間便可以；因為我想日後容易辨認我所上傳資料夾的內容，所以我將 resource 資料夾在我的網上空間改名為 lightboxplus。
接着登入 blogger，到版面配置 => 修改 HTML，在 "修改範本" 視窗中搜尋 <head> tag，在 <head> tag 下添加以下指向網上空間中 lightbox.css 及 lightbox_plus.js 的語法 (只加插紅色部份)。
... <head>
<!--lightboxadd-on START-->
<link href='http://chiwawah.web.fc2.com/lightboxplus/lightbox.css' media='screen,tv' rel='stylesheet' type='text/css'/>
<script charset='UTF-8' src='http://chiwawah.web.fc2.com/lightboxplus/lightbox_plus.js' type='text/javascript'/>
<!--lightboxadd-on END-->
<b:include data='blog' name='all-head-content'/>...
<!--lightboxadd-on START-->
<link href='http://chiwawah.web.fc2.com/lightboxplus/lightbox.css' media='screen,tv' rel='stylesheet' type='text/css'/>
<script charset='UTF-8' src='http://chiwawah.web.fc2.com/lightboxplus/lightbox_plus.js' type='text/javascript'/>
<!--lightboxadd-on END-->
<b:include data='blog' name='all-head-content'/>...
如果你懶得自己再找網上寄存空間，可以直接使用以上語法借用寄存在我的網上空間內的程式檔。
因為現今很多免費的網上寄存空間都不能支援遠端圖檔存取，如果你是使用自己的寄存空間，特別是一些免費的寄存空間，很大機會你要另覓途徑儲存 Lightbox 程式所需的圖檔。以這個部落格所用的 Lightbox plus 為例，因為 Blogger 可以存取 Picasa 上的圖檔，所以我先將 resource 資料夾內的所有圖檔上傳到一個 Picasa 的 Album 內，並記下每個圖檔在 Picasa Album 內的超連結位置。
之後在 Windows 內用記事本 (notepad) 打開 resource 資料夾內的 lightbox_plus.js 檔案，在檔案最尾段可以找到以下 function 的語法，將語法內原本指向 resource 資料夾內各 gif 圖檔的超連結改成 Picasa Album 內的超連結，如下 :
Spica.Event.run(function() {
var lightbox = new Lightbox({
loadingimg:'resource/loading.gif',
loadingimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzBL9LYvnVo8Dfw67tEAirjNMtEDeB2y4tG0f42XTHapGSo7CCbWe6eQ-nJXLu-tbjeo8kWe_XdSqW6Qt7I11uwwUynso6wYB78_C1lo-ACv2Lzx8ax-Lk4C_44CN-_F9ntaJiL9oj6I0/',
expandimg:'resource/expand.gif',
expandimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Bhm_NjQorzcWB2zDolz-ttJAT0bQ_5AV6euhJKVxkquImThPyiM60vc9xjyjINiStpPR9vBmIvi1AS2HyZpX0cYHrmb9BzV2H71R3J4XMZzCMh7RP526RYLIgCvBOwqFNpvkMNKke-Y/',
shrinkimg:'resource/shrink.gif',
shrinkimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_ZVTVWX1AoaFSWkdQacBEP8ipDfbLzZi19lrj3FdOfgH2tqnYPNTCYkCfR0NxeeOuvfJ2wK_fhpgMUWlkeGscmvQzspPdxZcddk20W-jquSxCP0hIUQFD40RXsSJxWflLJ3JMLN4Vjg/',
blankimg:'resource/blank.gif',
blankimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmQHxtPGJaDjnzAujqqDlo5JW3k9ZIEY4j4vJbG8r3QqrEudpM87SCQ50cYXxHvcodYEHxGdcZBdtSUihl2-tQ6WUjncB5q_cHCaf3AdhnfEkW5snDI0OxEHVLuXlmqMyR6CpWcSUung/',
previmg:'resource/prev.gif',
previmg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk0ms_b3Uj_ei_-4xPMxTHZWUAhw58Y8HQITkYtHrF7ikmsNTjGFeFL3by5QP1WSbGCKgkOTlL831_sEDR3kBF1GhD136BOLJzxtno5Ju7DIKjYnxe5byBJJ807fQa-975SEzeJi2k6Vc/',
nextimg:'resource/next.gif',
nextimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQSlxzwoc8T6qXz6J2N8aGKtMgvEYaCqR3RsKfgMuY3MOX7SJ8_O3-qknK3bW0SDEcXSTTGHPCCly7XO_50GH0aA7TRuUtu89_LRUS27U1k3N864q0iYf-Qvz8yQIU0DJNTKHFYyLEdcg/',
closeimg:'resource/close.gif',
closeimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqs-T-xJA8Yk042GC0lHh2vP2HBcGrAPIhx0MpEtL7N5IWhyLoPYep6esMYYyqRw3OkkJ_V7PM_Q5IiSmjpL2Kj0tu_fp5q9SzfQtDy68vXl-T46zwd5fDneDx1JWPpS6Vh7ycg9OLKI/',
effectimg:'resource/zzoop.gif',
effectimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijnEYpiehg7-J5f72-R5MDldkdtaDmFQrnqsprwDwsR0H5eOR3rQkTHMS7drfZ0ISESt0D_beY-SJrKKN4DpsNSCGgt1YuSaGz2di8hnrvbTolypFAOOio6AAaXP_5RyjbWJwakXGB8k8/',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
resizable:true,
animation:true
});
});
var lightbox = new Lightbox({
loadingimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzBL9LYvnVo8Dfw67tEAirjNMtEDeB2y4tG0f42XTHapGSo7CCbWe6eQ-nJXLu-tbjeo8kWe_XdSqW6Qt7I11uwwUynso6wYB78_C1lo-ACv2Lzx8ax-Lk4C_44CN-_F9ntaJiL9oj6I0/',
expandimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Bhm_NjQorzcWB2zDolz-ttJAT0bQ_5AV6euhJKVxkquImThPyiM60vc9xjyjINiStpPR9vBmIvi1AS2HyZpX0cYHrmb9BzV2H71R3J4XMZzCMh7RP526RYLIgCvBOwqFNpvkMNKke-Y/',
shrinkimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_ZVTVWX1AoaFSWkdQacBEP8ipDfbLzZi19lrj3FdOfgH2tqnYPNTCYkCfR0NxeeOuvfJ2wK_fhpgMUWlkeGscmvQzspPdxZcddk20W-jquSxCP0hIUQFD40RXsSJxWflLJ3JMLN4Vjg/',
blankimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmQHxtPGJaDjnzAujqqDlo5JW3k9ZIEY4j4vJbG8r3QqrEudpM87SCQ50cYXxHvcodYEHxGdcZBdtSUihl2-tQ6WUjncB5q_cHCaf3AdhnfEkW5snDI0OxEHVLuXlmqMyR6CpWcSUung/',
previmg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk0ms_b3Uj_ei_-4xPMxTHZWUAhw58Y8HQITkYtHrF7ikmsNTjGFeFL3by5QP1WSbGCKgkOTlL831_sEDR3kBF1GhD136BOLJzxtno5Ju7DIKjYnxe5byBJJ807fQa-975SEzeJi2k6Vc/',
nextimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQSlxzwoc8T6qXz6J2N8aGKtMgvEYaCqR3RsKfgMuY3MOX7SJ8_O3-qknK3bW0SDEcXSTTGHPCCly7XO_50GH0aA7TRuUtu89_LRUS27U1k3N864q0iYf-Qvz8yQIU0DJNTKHFYyLEdcg/',
closeimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqs-T-xJA8Yk042GC0lHh2vP2HBcGrAPIhx0MpEtL7N5IWhyLoPYep6esMYYyqRw3OkkJ_V7PM_Q5IiSmjpL2Kj0tu_fp5q9SzfQtDy68vXl-T46zwd5fDneDx1JWPpS6Vh7ycg9OLKI/',
effectimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijnEYpiehg7-J5f72-R5MDldkdtaDmFQrnqsprwDwsR0H5eOR3rQkTHMS7drfZ0ISESt0D_beY-SJrKKN4DpsNSCGgt1YuSaGz2di8hnrvbTolypFAOOio6AAaXP_5RyjbWJwakXGB8k8/',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
resizable:true,
animation:true
});
});
完成後再將 lightbox_plus.js 檔上傳到網上空間。
以上準備功夫完成後便可在部落格文章內為各圖片超連結添加 Lightbox 語法。最常用的圖片超連結語法有兩個；第一個是為單一圖片添加 Lightbox 特效；方法是在 <a ref ...> tag 中加上 rel="lightbox" 語法，例子如下 :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoeHrjc9pzVLQgdEd68TnC4LhAgqqREf0e74z8hFfpF1fMVIWKHdtPvlC-2bwNEEz6QBgpac9pcUGyOqecf5YPPVkaPWM5HNClxjxGFoZ330WmPVi0omVAjS_Jq-creYicdeAz96qfFQI/" rel="lightbox">
<img height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoeHrjc9pzVLQgdEd68TnC4LhAgqqREf0e74z8hFfpF1fMVIWKHdtPvlC-2bwNEEz6QBgpac9pcUGyOqecf5YPPVkaPWM5HNClxjxGFoZ330WmPVi0omVAjS_Jq-creYicdeAz96qfFQI/" style="border-width: 1px;" width="390" />
</a>
<img height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoeHrjc9pzVLQgdEd68TnC4LhAgqqREf0e74z8hFfpF1fMVIWKHdtPvlC-2bwNEEz6QBgpac9pcUGyOqecf5YPPVkaPWM5HNClxjxGFoZ330WmPVi0omVAjS_Jq-creYicdeAz96qfFQI/" style="border-width: 1px;" width="390" />
</a>
另一個常用的語法是為一組圖片添加 Lightbox 特效；方法是在 <a ref ...> tag 中加上 rel="lightbox[group]" 語法，即所有同組的圖檔連結以相同的 group 名稱命名，這樣當游標滑入放大了的影像範圍時，影像便會顯示 "下一張" 或 "上一張" 相片的圖示，例子如下 :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWL5wmSEOGLixtIrCqXQFgY6FvvS1tk3TpA49-gAJynXB5hvua2Isgh2ka3pI_6s-oYBzDdiao5ypm2YGb7UEb1OOalhLA0xU_7kyXpW9ptqQ8trZpaS8zUKHZA15-xHKMpoz5HZJJPU/" rel="lightbox[1]">
<img height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWL5wmSEOGLixtIrCqXQFgY6FvvS1tk3TpA49-gAJynXB5hvua2Isgh2ka3pI_6s-oYBzDdiao5ypm2YGb7UEb1OOalhLA0xU_7kyXpW9ptqQ8trZpaS8zUKHZA15-xHKMpoz5HZJJPU/" style="border-width: 1px;" width="390" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPGRsGc7N3Y4hW5ejpetv2DngJSJUCqqPDWabDizHQh4XDSsISCc0wn34-fzZRyBFTDpgTRVTJYkS3gjUzmHRbx4Z6TN6weL_Jqz2VJE5a9pDdvafQmL-C3gerNMjD2RhfAjZspGqtXE/" rel="lightbox[1]">
<img height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPGRsGc7N3Y4hW5ejpetv2DngJSJUCqqPDWabDizHQh4XDSsISCc0wn34-fzZRyBFTDpgTRVTJYkS3gjUzmHRbx4Z6TN6weL_Jqz2VJE5a9pDdvafQmL-C3gerNMjD2RhfAjZspGqtXE/" style="border-width: 1px;" width="390" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRXvJOqlm843nCygbV1M7xnbwK3QbCMQKeLWrQgtn2DZWDzXWwlOkvXxHw-4YHQ1bIb9g0mkleI6VxfuO9xmYhoE9Js_5iFslh4iYUWceDiooHMQeEOZQtzJELeeAksMuxs14uaalvK4/" rel="lightbox[1]">
<img height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRXvJOqlm843nCygbV1M7xnbwK3QbCMQKeLWrQgtn2DZWDzXWwlOkvXxHw-4YHQ1bIb9g0mkleI6VxfuO9xmYhoE9Js_5iFslh4iYUWceDiooHMQeEOZQtzJELeeAksMuxs14uaalvK4/" style="border-width: 1px;" width="390" />
</a>
<img height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWL5wmSEOGLixtIrCqXQFgY6FvvS1tk3TpA49-gAJynXB5hvua2Isgh2ka3pI_6s-oYBzDdiao5ypm2YGb7UEb1OOalhLA0xU_7kyXpW9ptqQ8trZpaS8zUKHZA15-xHKMpoz5HZJJPU/" style="border-width: 1px;" width="390" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPGRsGc7N3Y4hW5ejpetv2DngJSJUCqqPDWabDizHQh4XDSsISCc0wn34-fzZRyBFTDpgTRVTJYkS3gjUzmHRbx4Z6TN6weL_Jqz2VJE5a9pDdvafQmL-C3gerNMjD2RhfAjZspGqtXE/" rel="lightbox[1]">
<img height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPGRsGc7N3Y4hW5ejpetv2DngJSJUCqqPDWabDizHQh4XDSsISCc0wn34-fzZRyBFTDpgTRVTJYkS3gjUzmHRbx4Z6TN6weL_Jqz2VJE5a9pDdvafQmL-C3gerNMjD2RhfAjZspGqtXE/" style="border-width: 1px;" width="390" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRXvJOqlm843nCygbV1M7xnbwK3QbCMQKeLWrQgtn2DZWDzXWwlOkvXxHw-4YHQ1bIb9g0mkleI6VxfuO9xmYhoE9Js_5iFslh4iYUWceDiooHMQeEOZQtzJELeeAksMuxs14uaalvK4/" rel="lightbox[1]">
<img height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRXvJOqlm843nCygbV1M7xnbwK3QbCMQKeLWrQgtn2DZWDzXWwlOkvXxHw-4YHQ1bIb9g0mkleI6VxfuO9xmYhoE9Js_5iFslh4iYUWceDiooHMQeEOZQtzJELeeAksMuxs14uaalvK4/" style="border-width: 1px;" width="390" />
</a>
其他的語法通常會在各個 Lightbox 版本的下載網站中詳列。看到這裏，有沒有興趣跟我一樣，為自己的部落格加上這個好玩的特效呢 ~
~。
您好:
回覆刪除看了您的文章受益很多
我也照您的步驟去做...........
但是有發生一個問題想請問您
我把lightbox的8個gif檔案上傳之後.......變成是jpg檔案
這我應該如何解決呢
麻煩您教教我
謝謝您
使用 Internet Explorer 6 上載圖檔到 Picasa 會出現這樣的情況。你可以試試改用 Firefox 上傳圖檔到 Picasa ;)。
回覆刪除您好:
回覆刪除很高興您的幫忙解答......非常感謝
小弟我現在又有一個問題想要請問您
關於群組照片....如果我想要讓他在部落格上是左右各一張顯示...而不是像您的一張一張往下排......我應該如何做呢
我剛剛一直在是都是不出結果
如果您有方式可以解決麻煩您教我
謝謝您
你的意思是否像 "這篇文章" 最尾段那四張甜品圖片般的排法? 假設你要的是類似的排法，那先看看加上 lightbox effect 之後那四張圖片的 HTML 原始碼:
回覆刪除<a href="http://lh5.ggpht.com/wjKcx4dYn2w/IMG_5517.jpg" rel="lightbox[1]">
<img height="285" width="190" src="http://lh5.ggpht.com/wjKcx4dYn2w/IMG_5517.jpg" style="border-width: 1px;" />
</a>
<a href="http://lh6.ggpht.com/45sktgXP97I/IMG_5520.jpg" rel="lightbox[1]">
<img height="285" width="190" src="http://lh6.ggpht.com/45sktgXP97I/IMG_5520.jpg" style="border-width: 1px;" />
</a>
<br />
<a href="http://lh4.ggpht.com/9I7yrhDG3HA/IMG_5526.jpg" rel="lightbox[1]">
<img height="285" width="190" src="http://lh4.ggpht.com/9I7yrhDG3HA/IMG_5526.jpg" style="border-width: 1px;" />
</a>
<a href="http://lh3.ggpht.com/XsITDKcb9Lw/IMG_5530.jpg" rel="lightbox[1]">
<img height="285" width="190" src="http://lh3.ggpht.com/XsITDKcb9Lw/IMG_5530.jpg" style="border-width: 1px;" />
</a>
<br /><br />
當你輸入 blog 文時要轉到 "修改 HTML" view 才可直接改動文章的 HTML 編碼。
第二張和第三張圖片之間加插了一個 <br/> tag，因此第三張圖片會跳到下一行顯示。兩張圖片之間如果以一個或多個 <br/> tag 分隔，兩張圖片便會分開兩行顯示，之間的 <br/> tag 數量越多，分隔的距離便越遠。
如果兩張圖片之間沒有任何 HTML 碼，即第一組 <a href=...><img height ...></a> 直接連到下一組的 <a href=...><img height ...></a>，那兩張圖片便可在同一行顯示。但因應不同的 blogger template 和瀏覽器，這樣做可能會使兩張圖片黏在一起顯示，因此我會像第一張和第二張圖片般，在兩張圖片之間加上一個或以上的 (空白) 碼，使兩張圖片之間必定有一個或以上的空白分隔。
另外要注意同一行中每個 <img> tag 中 width="XXX" 的參數值。如果同一行中所有圖片的 width 參數值總和大於 template 內文可容納的闊度，右排的圖片便會自動跳到下一行顯示。
本篇借我轉貼:)
回覆刪除感謝!!
http://dsinformationblog.blogspot.com/
准奏 :D
回覆刪除