所謂的 Modal Window 是一種顯示子視窗的方式（如下圖），在此不探討此種介面的特性，有興趣可以到 Wikipedia 查閱。回到主題，在撰寫此效果時，第一個考慮的是裝置這個功能的便利度，如果每次發表文章都要額外添加許多 Code，那就不是我要的結果，再來就是對於不支援的瀏覽器或是 JavaScript 錯誤或關閉時，是否會造成照片無法顯示的問題，所以在這個版本，於發表文章時只需要增加一個 class 的屬性，而當發生不支援情況時，則會以原本的另開視窗來顯示大圖，而不會造成錯誤。
- 名稱：Masaru Photo Modal Window Hack
- 版本：0.51
- BSP：Google Blogger（其它 BSP 亦可安裝）
- 相簿平台：僅支援 Google PicasaWeb 網路相簿，並自動處理寬度 144、288、320 或 400 pixels 的縮圖（大圖則為 800 pixels）
- 支援瀏覽器：Microsoft Internet Explorer 6, 7, 8、Mozilla Firefox、Google Chrome、Apple Safari
★ 小提醒：masaru 不保證此程式碼能完全正確執行，亦不負安裝後造成異常的責任；另外，在修改範本前請先做好完整備份的工作。
安裝步驟
開啟 Blogger 管理網誌介面，進入「版面配置」→「修改 HTML」，修改前先點選「下載完整範本」備份你的範本。接著點選「展開小裝置範本」的 Check Box 開啟完整的範本，依下列順序分別裝載 CSS、JavaScript 與 HTML 即可。
1. CSS:
將 CSS 複製到 ]]></b:skin> 這行字元的下一行，或是貼在 <head> 與 </head> 之間即可。
<style type='text/css'>
.photoPanel
{
position: absolute;
width: 770px;
height: 600px;
z-index: 99999;
text-align: center;
display: none;
}
.photoPanel .photo
{
padding: 10px;
border: solid 1px #666666;
background-color: #ffffff;
}
.photoBackground
{
position: absolute;
top: 0px;
left: 0px;
z-index: 99998;
background-color: #000000;
cursor: not-allowed;
filter: alpha(opacity=60);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-moz-opacity: 0.6;
opacity: 0.6;
display: none;
}
.largePhoto
{
}
</style>
2. JavaScript:
將下列 JavaScript 放置於 CSS 之後。而其中紅色字樣的 URL 為載入照片時會顯示的 Loading 圖示，請自行改用自己的 Loading 圖示網址。
若你不想自行設計，可以下載這張圖後，再上傳至你的網路空間，並更新紅色字樣的 URL。（請勿使用我提供的網址）
<script type='text/javascript'>
// masaru's vision photo viewer version 0.5
var masaruPhotoViewer = {
loading: "http://lh3.ggpht.com/...../s288/loading.gif.jpg",
start: function() {
document.getElementById("photoImage").src = this.loading;
var ns = (navigator.appName == "Netscape");
if (ns) document.captureEvents(Event.CLICK);
document.onclick = function(e) {
if (!e) {
e = window.event;
}
var pass = true;
var regex = new RegExp("/s(144|288|320|400)/", "g");
var t = ns ? e.target.className : e.srcElement.className;
if (t == "largePhoto") {
pass = masaruPhotoViewer.initPhoto((ns ? e.target.src : e.srcElement.src).replace(regex, "/s800/"));
}
else if (t == "photo") {
pass = false;
}
return pass;
}
},
initPhoto: function(photo) {
var pass = navigator.userAgent.indexOf("MSIE 6") > 0 ||
navigator.userAgent.indexOf("MSIE 7") > 0 ||
navigator.userAgent.indexOf("MSIE 8") > 0 ||
navigator.userAgent.indexOf("Firefox") > 0 ||
navigator.userAgent.indexOf("Chrome") > 0 ||
navigator.userAgent.indexOf("Safari") > 0;
if (pass) {
var p = document.getElementById("photoPanel");
var b = document.getElementById("photoBackground");
var w = document.documentElement.clientWidth;
var h = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
var st = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
var t = (document.documentElement.clientHeight / 2) - (600 / 2);
if (t < 0) {
t = 0;
}
p.style.top = t + st + "px";
p.style.left = (w / 2) - (770 / 2) + "px";
b.style.width = w + "px";
b.style.height = h + "px";
p.style.display = b.style.display = 'block';
document.getElementById("photoImage").src = photo;
}
return !pass;
},
closePhoto: function() {
var p = document.getElementById("photoPanel");
var b = document.getElementById("photoBackground");
p.style.display = b.style.display = 'none';
document.getElementById("photoImage").src = this.loading;
return false;
}
};
</script>
3. HTML:
HTML 部分則放於 <body> 與 </body> 之間的任意位置即可。（建議放前面一些）
<div class='photoPanel' id='photoPanel'><a href='#' onclick='return masaruPhotoViewer.closePhoto();' title='點一下關閉'><img id='photoImage' class='photo' /></a></div>
<div class='photoBackground' id='photoBackground'> </div>
<script type='text/javascript'>
masaruPhotoViewer.start();
</script>
使用方式
在撰寫 Blog 文章時加入了照片，會產生如下列的 HTML 碼，只要在 <img> 中加入 class="largePhoto" 這個屬性（紅色字串）即可讓你的 Blog 擁有以 Modal Window 顯示照片大圖的功能。
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPvqHfTDk_N7y1wAmt31bhLBgytIKB0ZnFj_45p_cAxbZN3oLFpykuhdEni78zrzHu1cB_53DilGIDU2y6pHc92yv9q0DS1F7mxMIrkx9-G4-SETgZcjcWc8rh0M6hZA6VEHr1a30a3gTF/s1600-h/P1081595.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPvqHfTDk_N7y1wAmt31bhLBgytIKB0ZnFj_45p_cAxbZN3oLFpykuhdEni78zrzHu1cB_53DilGIDU2y6pHc92yv9q0DS1F7mxMIrkx9-G4-SETgZcjcWc8rh0M6hZA6VEHr1a30a3gTF/s400/P1081595.jpg" border="0" class="largePhoto" alt=""id="BLOGGER_PHOTO_ID_5288933330058924642" /></a>
效果展示
點選下列照片來體驗 Photo Modal Window。
若有任何問題，歡迎留下你的意見。
Masaru
就是要看大張的才過癮!
回覆刪除To Orange，
回覆刪除沒錯，大張才過癮，所以才想弄這個比較好用的介面。
同意同意!!
回覆刪除同意樓上的說法 :D
不好意思.我不太懂HTML所以請不要介意.關於放在CSS後面←這是指放在那裏呀？
回覆刪除另外我最看不懂的地方,
2. JavaScript: 紅色字樣的 URL(紅色字樣的 URL←這個意思是隨便放入一個圖片的連結網址或是放入您提供的圖片也可以？放進去了.不就會在BLOGGER 多了一張照片嗎？
最後的意思應該是我只要成功修改了這三個程式碼，日後每次寫文章只要入 class="largePhoto" 這個屬性就可以有放大效果的意思對吧？
不好意思，造成困擾，多多包含.
To 辰星龍王-皞天，
回覆刪除首先放在 CSS 後面的意思，就是放在第一項（1. CSS:）這個的後面，也就是 </style> 的下一行。
紅色的 URL 是載入時會顯示的圖，你可以依照自己的喜好設計，當然也可以用我提供的，不過你要自己上傳到 PicasaWeb。
基本上只要是使用 Blogger 平台 + PicasaWeb 相簿的話，應該都會有放大的特效喔。
囧，我怎麼弄都弄不好.....
回覆刪除一直跟我說XML 錯誤訊息： The content of elements must consist of well-formed character data or markup.
真不知道該怎麼辦ˊˋ
To 不許人佔有，
回覆刪除這個訊息表示你的 XML 沒有滿足 well-formed，可以檢查一下是否標籤沒有對稱（有開始也有結束標籤），是否漏掉了 < 或 > ，或是 & 開始沒有用 ; 結束等等問題。
不好意思
回覆刪除試過之後都是JavaScript那段語法有問題
一直顯示XML錯誤 請問要怎解決呢?
To crass79，
回覆刪除請先將 Javascrit 中的 < 改成 < 後存檔，若還是有錯誤，則將 Javascript 中所有的雙引號都改成 " 再將所有單引號都改成 ' 後再存檔。
（可用取代的方式置換）
謝謝您，成功了，感謝。
回覆刪除您好，不好意思打擾
回覆刪除想請教一下能否讀到圖檔的"高度"?
因為在CSS處的
p.style.top = t + st + "px";
似乎st是以目前捲軸位置，而t是以視窗高度作為計算方式
對於橫幅照片會恰好置中沒錯，但對於直幅就會有位置偏下的問題
因此想要讓所有照片都能自動置中，似乎知道圖片高度是最快的方式?
謝謝您!!
To Foxly，
回覆刪除因為考量照片高度可能會超過畫面的高度，所以當初沒有特別去考量高度問題，此部分你可以自行調整。