2011年9月20日星期二

Userscript - 自家製Google Image Search Preview

這類Google Image的Userscript有很多,但在userscripts.org上,做同樣功能的script,很多都沒有更新。



Google卻有時會更新頁面HTML碼導致Userscript失效,當然Firefox都有活躍的Extension如Thumbnail Zoom做到。

但既然如此,不如我自己寫一個出來,反正不是什麼深奧技術。
想使用的人,可以Select All然後Copy&Paste另傳一個txt文件,rename做js檔,拉去Firefox就可以安裝。

// ==UserScript==
// @name           Google Image Search Preview
// @version      18/09/2011
// @namespace      達MiNG
// @description    Mouse over and preview the image on Google images search result. This userscript will redirect Google Images to basic version. Find me at http://www.netatlantis.com/?p=3115
// @icon       https://lh5.googleusercontent.com/-Sookp-flc2I/TnXlDfP-0OI/AAAAAAAABTU/1vNWqGX4kYI/google-icon.png
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// @include        http://www.google.com/search?q=*&tbm=isch*
// ==/UserScript==

function addGlobalStyle(css) {
 var head, style;
 head = document.getElementsByTagName('head')[0];
 if(!head) {
  return;
 }
 style = document.createElement('style');
 style.type = 'text/css';
 style.innerHTML = css;
 head.appendChild(style);
}

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
 var script = document.createElement("script");
 script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js");
 script.addEventListener('load', function() {
  var script = document.createElement("script");
  script.textContent = "(" + callback.toString() + ")();";
  document.body.appendChild(script);
 }, false);
 document.body.appendChild(script);
}

this.imagePreview = function() {
 /* CONFIG */
 xOffset = 10;
 yOffset = 30;

 // these 2 variable determine popup's distance from the cursor
 // you might want to adjust to get the right result

 /* END CONFIG */
 $("a.preview").hover(function(e) {
  this.t = this.title;
  this.title = "";
  var c = (this.t != "") ? "" + this.t : "";

  var src = this.href;
  if(src.indexOf('imgurl=') != -1) {
   var vars = [], hash;
   var hashes = src.slice(window.location.href.indexOf('?') + 1).split('&');
   for(var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
   }
   src = vars["imgurl"];
  }

  $("body").append("

" + c + "

"); $("#preview").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast"); }, function() { this.title = this.t; $("#preview").remove(); }); $("a.preview").mousemove(function(e) { $("#preview").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px"); }); }; // starting the script on page load $(document).ready(function() { var standardUrl = window.location.href; if(standardUrl.indexOf('sout=1') == -1) { var addToUrl = '&sout=1'; var basicUrl = standardUrl + addToUrl; window.location.replace(basicUrl); } else { addGlobalStyle('#preview{ position:absolute; border:1px solid #ccc; padding:0px; display:none;width:37px;height:37px;background-image:url(https://lh4.googleusercontent.com/-Nv-RqxGFQUg/TnXlCyUr_uI/AAAAAAAABTQ/hSiOpUTdufA/20088258937578778044.gif) }'); $('#imgtb a').addClass('preview'); // load jQuery and execute the main function addJQuery(imagePreview); } });

1 則留言:

  1. 可用 GM_addStyle (http://wiki.greasespot.net/GM_addStyle) 和 @Require (http://wiki.greasespot.net/Third-Party_Libraries)

    回覆刪除