由於 masaru's vision 版面配置的原因，我的照片都是以縮圖的方式發表，當點選縮圖後才以另開視窗的方式開啟大圖，最近趁著閒暇時間研究如何提供更好的使用經驗與感受，於是開始著手撰寫利用 Modal Window 形式來展示大圖，這個效果已經上線一段時間了，似乎沒太大的問題，所以將這段程式碼分享給大家。
所謂的 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
