转自:http://valenliao.blogspot.com/2010/02/ie-compatible-for-gallery-template.html
也許你和我一樣也擁有與使用 Blogger 所提供的 Blog 空間。從前 Blogger 給網友的印像大概就是它所提供的 Template 太少,也太簡單了,因此也無法獲得一般網友的青睞。事實上在網路上已有許多Blogger Template 的設計者設計了許多令人驚艷的主題式樣本。這似乎也讓一般網友有機會接觸 Blogger 並在 Blogger 所堤供的空間裡經營 Blog。最近有一種 Blogger 主題式樣本 – Gallery 系列 – 蠻受大家喜歡的。這篇文章算是一篇教學文吧!想分享一些有關Gallery 系列主題樣本的資訊與如何修改它,讓它與 MSIE (Microsoft Internet Explorer) 相容。
當你安裝好 Gallery 樣版後,在 Header 下方你會看到一個 Navi-bar 。但如果你是 MSIE 的使用者 (版本早於 8.0.7600),你會發現那個 Navi-bar 對 Mouse 指標沒有反應。你需要修改的部份如下:
在 HTML 程式碼的的最上方,找到 Conditional Comment Code “[if IE]”。
刪掉以下的 Conditiional Comments:
[if IE]
[endif]
或者,如果你想對 MSIE CSS 提供更好的支援的話,把刪掉的 Conditional Comments 改成如下的 Conditional Comments:
存檔後,試看看重新執行 Galler,Mouse 對 Navi-bar 應該已經有反應了。
關於第二項需要修改的部份,如果你是MSIE的使用者,你會發現一個程式碼錯誤的警告,如右圖左下角所示。這項錯誤是有關於 Browser 解釋 div 物件 innerHTML 的問題。在這一點上,MSIE 的行為與其它 Browser 的行為不太相同。基本上,div.innerHTML 並非 div 的標準物件,但大部份的 Browser 都支援它就是了。MSIE 基本上在處理 div.innerHTML 時,程式設計師最好是把要塞入 div.innerHTML 的物件包裝成 DIV 的形式比較不會有問題。有興趣的話可以到 MSDN 網站去看看相關的說明。
在 Gallery 樣版中,相關的原始碼如下:
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '';
summ = summary_img;
}
var summary = imgtag + '
‘ + removeHtmlTag(div.innerHTML,summ) + ‘
';
div.innerHTML = summary;
}
除了不與 MSIE 相容之外,在 Gallery 樣版中,createSummaryAndThumb() 函數, 會把相對於縮圖格內 (Photo Thumb) 的圖檔連結位址改成在 Item Mode 的位址,以便瀏覽者在點選縮圖時會開啟獨立顯示圖檔的 “大圖”。但此功能對於直幅相片的支援很爛,會把一張美美的照片弄到變形,就像是變形蟲一樣。因此在修改 createSummaryAndThumb() 函數時,我僅參照縮圖格的高度來改變縮圖的大小,並非原始程式碼中同時參照縮圖格的高度與寬度。 修改後的程式碼如下:
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
var isMSIE = (navigator.appName == 'Microsoft Internet Explorer');
var pic_height = img_thumb_height - 2;
var pic_width = img_thumb_width - 2;
if(img.length>=1)
{
if(isMSIE)
{
imgtag = '';
}
else
{
imgtag = '';
}
summ = summary_img;
}
var rmtag = removeHtmlTag(div.innerHTML,summ);
if (rmtag == "..."){ rmtag = ""; }
var summary = imgtag + '
‘ + rmtag + ‘
' ;
summary = '
‘ + summary + ‘
';
div.innerHTML = summary;
}
最後一個問題是有關於圖檔快取服務的問題。在 Gallery 樣版中會引入一項由 Dropbox 所提供的 Cache Directory Service。關於這個問題,其實也不算是個 Bug,基本上 Gallery 利用這項圖檔快取服務是為了要增加秀圖的速度。因為並非每一個網路相簿空間的提供者 ( 如:Flickr 與 Picasa ) 都提供足夠的速度來支援外連服務。因此,這項服務的引入似乎有其必要性。至於 Dropbox 所提供的 Cache Directory Service,可以參照 Dropbox 官方網站的說明。但我發現引入這項服務有時 (再次強調… 是 “有時候”) 反而會大幅降低秀圖速度。如果你的網路相簿空間的提供者提供高速的圖檔外連服務,基本上你不會需要這項圖檔快取的服務。
Recent Comments