[筆記][jQuery] jquery.ajax在 ie6上的問題

引述自 該死的JQUERY AJAX函數 - AJAX - web - JavaEye論壇:

"1. IE6在本地非服務器環境下不能提供XML文件的查看功能,所以在非服務器環境下不能將
dataType 設置為xml , 但是可以設置成 json和text html之類的格式..

2. 在服務器環境下使用Jquery獲取XML時,不僅僅是XML,還有JSON,如果格式有問題,將不返回結果和任何錯誤提示.. 如果數據正確, 但是採用XPath來查找元素時 XPATH路徑寫
錯了,不會獲取任何結果,也不會報任何錯誤提示..."

今天遇到 jquery.ajax(...)裡面參數dataType用xml時，在firefox 3.5下正常走success callback，可是ie6卻跑error callback，然後上google查到了前人的經驗… 必要的話，或許還是得架個local server來測試。

jQuery Tip : 取得select tag中option

jQuery Tip - Getting Select List Values: jQuery, Tutorial

取得<select id="s1">中選取的<option>方法：

1. $("select#s1").val();
2. $("select#s1 :selected").text();

[Bookmarklets] PhotoViewer 快速瀏覽網路相簿的工具

說明:

將滑鼠游標移至圖片上，會自動秀出將該圖片連結的原始的圖片。

支援相簿或網站:

PCHome、無名小站、Pixnet、巴哈姆特的GNN、PicasaWeb

可使用瀏覽器(目前僅測試windows平台):

IE 6, 7, 8
Firefox 3, 3.1 beta 3

使用方法:

開啟要支援的網路相簿頁面後，點這個Bookmarklet，啟可開啟快速瀏覽功能，如果沒效果可以再重按一次。每換一頁要即用這個效果，要重點一次。
搭配Firefox的AutoPager，等所有頁面都載進來後使用，效果更好，可一次看所有頁面的照片。
Bookmarklet: (加到最愛或或拉到書籤列，Bookmarklets是什麼可參考此篇使用說明):

• PhotoViewer

擷圖:

Firefox 3-

IE7- 

Firefox 3.1b3-

IE8-

原本我是使用Greasemonkey的Splash album viewer來看照片，但搭配AutoPager會沒法運作在新的頁面，想說順便分享給其他非Firefox的朋友使用，所以我試寫了一個bookmarklets，讓IE,Firefox可以在免安裝外掛(or Extension)下快速瀏覽網路相簿。

測試了一下，目前Safari跟Chrome還沒法運用，連jQuery掛上去都怪怪的…功力不夠。用Firefox及IE瀏覽器的人可以試試。
當然，如果是Firefox愛用者，直接使用Greasemonkey+Splash album viewer會方便許多。

Changelog:

2009.03.25

新增測試Firefox 3.1b3, IE 8的環境能正常運作。
支援網站加入PicasaWeb 及無名blog的大頭圖(包含個人資料、誰來我家、回應)。

2009.03.23

修改無名相簿的部份，現在支援相簿首頁及相簿列表了。

[Blogger] 免手動修改圖片連結，讓lightbox也能正常運作的方法

有用lightbox的人，也許會遇到這個問題。

本文的效果為：當網頁載入而未完畢前，點圖片連結會另開新(分)頁來顯示圖片，而javascript載入完成後，lightbox可以正常運作。

原本我以為是Windows Live Writer的問題，當文章內的圖片上傳到blogger後(picasa的相簿內)後，無法讓有使用lightbox的<a>標籤正常使用lightbox來開啟影像(會變成讀取不到圖片)。

當初我自己測試是，把影像連結內的/s1600-h 或是/s800這段文字給刪除掉，lightbox即可正常運作。

但是每次發表完文章，還要上draft.blogger.com去修改文章原始碼，實在耗時費力！當初靈機一動，何不用jQuery直接把href也改成能正常使用的字串呢?

這個東西去年就想弄了，至少拖了有半年以上，之間有讀到Abin一篇相關的文章: Blogger 和 Picasa 的圖片上傳和外連限制，我才知道原來是Google Picasa的做的小詭計，加個"-h"就可避免讓圖片被外連。原來我之前一直錯怪WLW了。

雖然有想法，但是我拖到剛剛才來試寫這個script，沒想到幾分鐘就完成了…

這邊跟大家分享一下我的作法。

函式原始碼:

//用來避免lightbox無法正常連結圖片
//做法是將s1600-h，改為s1600
function ReplaceImageLink()
{
    lightboxLinks = $('a.lightbox');
    for(i=0; i<lightboxLinks.length; i++)
    {
      if (lightboxLinks[i].href.match(/s1600-h/))
        lightboxLinks[i].href = lightboxLinks[i].href.replace(/s1600-h/g, 's1600');
    }
}

因為我的blogger有掛上jQuery，於是我在document.ready裡面，lightbox函式執行之前，加上了ReplaceImageLink()這個函式，內容就變成下面這樣：

<script type='text/javascript'>
$(function(){

//修改符合a.lightbox的href
ReplaceImageLink();

$('.lightbox').lightBox();
});
</script>

這樣就算完成啦。當lightbox執行之前，圖片中有s1600-h的，都會被改成s1600，然後lightbox就可以正常執行。

另外，也可以改成把/s1600-h給整個去掉，一樣是可以正常運作。

 

在Blog顯示圖片的工具 – jQuery.Lightbox

以前在逛網頁的時候，有印象看過這類的顯示方式，昨天心血來潮，查到了這個工具的名稱: Lightbox，並且下載來套用在自己的blog，讓它可以更痴肥一點。

這邊我前後試了兩種Lightbox:

1. 一種是原始的Lightbox，目前到第2版。
2. 一種是使用jQuery實作的Lightbox，目前到0.5版。

原先我是先裝了第一種，全都設定好之後發現好像無法work，看一下原始碼跟開了jash來debug才發現，跟我原本已經掛上的jQuery好像有衝突，它的prototype.js用到了$這個名稱。

於是我又上網找，就發現了第二種這個jQuery-lightbox，而這個版本所需script檔更少更小(第一種版本光script檔就要5個，加一加是200kb；而第二種版本只要一個script檔，而且只要10kb，當然前提是要先掛好jQuery)。

下載點

jQuery Lightbox最新版

安裝方法

將壓縮檔內的相關檔案(jquery.lightbox.min.js, images, css)都上傳到你自己的網頁空間(如Google Pages)後，在你的blog的html範本檔中header內加入:

<script type="text/javascript" src="jquery.js"></script>
<script type=”text/javascript” src=”lightbox.js”></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

上面檔案的位置請改為對應存放的網址。

然後，在你的script最後加上:

//for jQuery.lightbox 
$(function() {
    $(".lightbox").lightbox({fitToScreen: true});
});

使用方法

單張圖片: 在a 標籤裡加上 class="lightbox"，如 :

<a ref="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbAwMcucNkiTyHapMS30WA2TKaz3kDjMYQxP1MS7Pk6o9JblFRHGJIWbs5LShPgEp4Ck1xZNSU2u5kDG6YR2YfgbQgTY2KsPHRZYj4QX5Ggcz7sYbnGs-AnK8CLontU8h_HW0H_7ugnqxD/s800/20080803234.jpg">My Photo</a>

範例: My Photo

一組圖片: 除了class="lightbox"外，在要顯示的a 標籤裡加上rel="groupname" ，groupname為這組要顯示的圖片組名。注意! 是rel 不是ref 哦…(謎之聲:誰會跟你一樣笨啊!!…囧rz)

<a href="photo1.jpg" class="lightbox" rel="2008112701"><img src="photo1.jpg"/></a> 
<a href="photo2.jpg" class="lightbox" rel="2008112701"><img src="photo2.jpg"/></a> 
<a href="photo3.jpg" class="lightbox" rel="2008112701"><img src="photo3.jpg"/></a>

範例: | |

另外可以用title這個屬性來決定相片的標題。

使用Greasemonkey + jQuery

這兩天讀了一些jQuery的使用方法，跟我去年認識的jQuery有點出入，不過它確實是很好用，如同它宣稱的:「write less, do more.」

我除了使用Javascript Shell來練習外，也想讓Greasemonkey可以直接套用自訂的jQuery script，於是找到了這個東西：

在Greasemonkey裡面加入jQuery的方法

Greasemonkey程式碼:

// Add jQuery
   var GM_JQ = document.createElement('script');
   GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
   GM_JQ.type = 'text/javascript';
   document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
   function GM_wait() {
       if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
   else { $ = unsafeWindow.jQuery; letsJQuery(); }
   }
   GM_wait();

// All your GM code must be inside this function
   function letsJQuery() {
       alert($); // check if the dollar (jquery) function works
   }

安裝下載點:

Download as a userscript. (需要安裝 greasemonkey )

因為作者允許MIT License，所以我就直接複製貼上了XD

ps. 如果不想要每次載入都出現那個alert()，就自己//掉需要的地方吧XD ;