文章

修改使用 Snap Preview

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

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

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

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


 <script defer="defer" id="snap_preview_anywhere" type="text/javascript"
 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 來做,代碼如下:


$(document).ready(function(){
	$("div.post").each(function(){
		var hasTag = false;
		$(this).find("span[@id^=tags] > a").each(function(){
			if(this.innerHTML=='bookmark')	hasTag=true;
		}).end();
		if(hasTag){
			$(this).find("div.entry a").not(".snap_preview").each(function(){
				var preview_link = document.createElement("a");
				$(preview_link)
					.href(this.href)
					.addClass("snap_preview")
					.css({"font-size":"0.7em","padding-left":"0.5em"})
					.html("[預覽]")
					.mouseover(function() {    
						$('#snap_preview_anywhere_main').hide();    
					 })
					.click(function() {    
						$('#snap_preview_anywhere_main').show();    
						return false;    
					 })
					.insertAfter(this);
			});
		}
	});	
 });

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

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

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

回應

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

  2. 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.

*