« Java SE 6 + Firefox 2 UI 問題
Google Maps 有香港街道了 »

修改使用 Snap Preview

最近看到有一些 Blogger 都加入了 Snap Preview 的功能，就是當滑鼠在連結上時，會自動彈出該網站的抓圖。對此，有些 Blogger 覺得這增加了實用性，有些則覺得彈出來的圖很煩人和阻礙閱讀。

我自己定期有做網摘，所以我覺得這個預覽功能應該能幫助到瀏覽的人吧？至少在點選連結之前可以先預覽網站。不過，這些彈出來的圖也的確會煩人，最好是讓讀者有選擇權。因此有了些修改念頭，目標是：

  1. 只在網摘篇章出現 Snap Preview
  2. 預覽不直接加到連結上，而是後補一個「預覽」連結
  3. 點擊「預覽」才出現預覽，而不是 mouse over

首先，Snap Preview 本身有提供可修改的參數，令到預覽功能只在特定連結上，只要將其參數 ap=1 改成 ap=0 就可以了：

PLAIN TEXT
HTML:
  1. <script defer=“defer” id=“snap_preview_anywhere” type=“text/javascript”
  2.  src=“http://spa.snap.com/snap_preview_anywhere.js?ap=0&key=SAMPLE_KEY&sb=0&domain=www.example.com”></script>

修改這個後，預覽功能只會加於所有 class=“snap_preview” 的連結上。

然後，就是替網摘文章加入預覽連結，因為不想改動文章連結結構，而且反正這個功能只有開啟了 Javascript 才可以用，所以就索性用 Javascript 插入連結好了。這樣的話，在 RSS Reader 也不會見到預覽。我使用了 jQuery 來做，代碼如下：

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.     $(“div.post”).each(function(){
  3.         var hasTag = false;
  4.         $(this).find(“span[@id^=tags]> a”).each(function(){
  5.             if(this.innerHTML==‘bookmark’)  hasTag=true;
  6.         }).end();
  7.         if(hasTag){
  8.             $(this).find(“div.entry a”).not(“.snap_preview”).each(function(){
  9.                 var preview_link = document.createElement(“a”);
  10.                 $(preview_link)
  11.                     .href(this.href)
  12.                     .addClass(“snap_preview”)
  13.                     .css({“font-size”:“0.7em”,“padding-left”:“0.5em”})
  14.                     .html(“[預覽]”)
  15.                     .mouseover(function() {   
  16.                         $(‘#snap_preview_anywhere_main’).hide();   
  17.                      })
  18.                     .click(function() {   
  19.                         $(‘#snap_preview_anywhere_main’).show();   
  20.                         return false;   
  21.                      })
  22.                     .insertAfter(this);
  23.             });
  24.         }
  25.     }); 
  26.  });

代碼做的是：找所有頁面上的文章，如果該文章的 tag 有 ‘bookmark’ 的話，就在該篇的連結後再加一個「預覽」連結，而其 class=“snap_preview“。

至於目標 3，將 attach 在 onmouseover 的 event 變成 onclick，可能要 hack snap preview 的 script，因為不想有 tight coupling，所以還是放棄了。各位如果有可以不用 hack script 的方法，煩請指教。

Update: 使用了 Augus 提議的方法，現在已可達成目標 3 了。不過有時候 Preview 出現的位置會有點怪

  • 發表日期： Wednesday, December 20th, 2006
  • 發表時間： 9:52 AM
  • 分類：電腦
  • 文章 RSS：RSS 2.0
  • 留言：開放留言
  • Trackback：開放
  • Tags: ,

“修改使用 Snap Preview” - 5 個回應

  1. gr waterbee 說:

    我覺得 Snap 可以出個外掛套件給 IE 及 FX，
    讓喜歡這種瀏覽方式的朋友處處可以使用，
    至於 blog owner 就不必費心貼程式碼了。

    發表於 20-Dec-06 12:49 pm | 永久連結

  2. gr Jacky 說:

    有這種套件啊~
    https://addons.mozilla.org/firefox/2207/

    發表於 20-Dec-06 12:56 pm | 永久連結

  3. gr angus 說:

    看看可不可以解決你的問題

    http://angusdev.mysinablog.com/index.php?op=ViewArticle&articleId=375990

    發表於 20-Dec-06 4:36 pm | 永久連結

  4. gr Jacky 說:

    To angus:

    Although there is some coupling (need to know the ID for SPA panel), but overall is working good. I have modified the code in my site as well.

    Also, in your code you can also chain the mouseover().click() so spare some jQuery object.

    發表於 20-Dec-06 4:51 pm | 永久連結

  5. gr sidekick 說:

    不如宣廣一下cooliris 吧~
    那就不用太煩了~ :)

    發表於 20-Dec-06 6:00 pm | 永久連結

回覆

*必需
*必需 (不會公開)