Dec 27

转自: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 官方網站的說明。但我發現引入這項服務有時 (再次強調… 是 “有時候”) 反而會大幅降低秀圖速度。如果你的網路相簿空間的提供者提供高速的圖檔外連服務,基本上你不會需要這項圖檔快取的服務。

2 Responses to “Blogger模板Gallery的IE Compatible问题解决办法”

  1. http://aolanswers.com/ Says:

    Thanks , I have recently been looking for info
    approximately this subject for a long time
    and yours is the best I’ve found out till now. However, what about the bottom line? Are you certain about the source?

  2. playtech casino free slot games Says:

    I am really impressed with your writing skills as well as with the
    layout on your blog. Is this a paid theme or did you
    customize it yourself? Either way keep up the nice quality writing, it is rare to
    see a great blog like this one today.

Leave a Reply