☰

jc_Image_Zoomer_2

Zoom Image

  1. // ==UserScript==
  2. // @name       jc_Image_Zoomer_2
  3. // @namespace  http://jiichen.at.home/
  4. // @description  Zoom Image
  5. // @description  Support domain/Host: wretch.cc , yam.com , qing.weibo.com , facebook(link)
  6. // @require    http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js
  7. // @include    http://www.wretch.cc/album/*
  8. // @include    http://album.blog.yam.com/*
  9. // @include    http://*.weibo.com/*
  10. // @include    http://photo.pchome.com.tw/*
  11. // @include    http://*.pixnet.net/album/set/*
  12. // @include    http://*/thread*
  13. // @include    http://*.4chan.org/*
  14. // @include    http://www.*.com/*viewthread*
  15. // @exclude    http://www.youtube.com/
  16. // @exclude    https://www.facebook.com/
  17. // @exclude    https://app.facebook.com/
  18. // @version    0.1.11
  19. // @modified_date    2014.12.17
  20. // @copyright  2012, jc
  21. // @grant		GM_log
  22. // @grant		GM_addStyle
  23. // ==/UserScript==
  24.  
  25. //GM_addStyle("#jcZoomImgArea {position:fixed; top:0px; left:100px; border:3px solid #66CCFF; background-color:gray; padding:2px; z-index:2147483647;}");
  26. GM_addStyle("#jcZoomImgArea2 {position:fixed; top:0px; left:100px; border:3px solid #66CCFF; background-color:gray; padding:2px; z-index:1000000;}");
  27.  
  28. var globalImageMinWidth = 190; // mouseenter 時圖的最小寬度
  29. var globalImageMinHeight = 150; // mouseenter 時圖的最小高度
  30. var globalMouseStatus = 0; // 0: mouseleave ; 1: mouseenter
  31. var globalGrabUrl = ''; // 正在抓的網址
  32. var globalDivShowing = 0; // Div 是否顯示中
  33. var globalMouseInDiv = 0; // mouse 是否在 Div 內
  34. var globalDivId = 'jcZoomImgArea2';
  35. var globalMouseOverObj = null; // 滑鼠 mouseenter 的物件
  36. var globalHost, globalDomain;
  37. var globalLastEnterObj = null; // 上次 mouse enter 時的物件
  38.  
  39. function doJcGetImageOrHtml(url, x, y) {
  40. 	// 抓圖檔，如果是網頁則繼續抓圖
  41.  
  42. 	globalGrabUrl = url;
  43.  
  44. 	GM_log('** grab url = ' + url);
  45.  
  46. 	$.ajax({
  47. 		type : "GET",
  48. 		url : url,
  49. 		complete : function (xhr, textStatus) {
  50. 			/*
  51. 			if ('success' != textStatus) {
  52. 			alert("complete error status : " + textStatus);
  53. 			}
  54. 			 */
  55. 		},
  56. 		error : function (xhr, textStatus, errorThrown) {
  57. 			/*
  58. 			var errMsg = xhr.status + ' , ' + xhr.responseText + ' , ' + textStatus + ' , ' + errorThrown;
  59. 			alert("ERROR : " + errMsg + ' ; ' + url );
  60. 			 */
  61.  
  62. 			var divObj = $('#' + globalDivId);
  63. 			divObj.append('<img data-src="' + url + '" />');
  64.  
  65. 			divObj.find('img').one('load', function () {
  66.  
  67. 				var win_h = $(window).height();
  68. 				var win_w = $(window).width() - 30;
  69. 				var max_img_w = Math.max(x - 50, parseInt(win_w / 2, 10) - 50);
  70.  
  71. 				var big_img_width = $(this).width();
  72. 				var big_img_height = $(this).height();
  73.  
  74. 				var imgRate = (big_img_height / big_img_width);
  75.  
  76. 				if (big_img_width <= globalImageMinWidth) {
  77. 					$(this).remove();
  78. 				} else if (big_img_height <= globalImageMinHeight) {
  79. 					$(this).remove();
  80. 				} else {
  81.  
  82. 					var adjust_img_width = big_img_width;
  83. 					var adjust_img_height = big_img_height;
  84. 					var adjust_img_width1 = big_img_width;
  85. 					var adjust_img_height1 = big_img_height;
  86. 					var adjust_img_width2 = big_img_width;
  87. 					var adjust_img_height2 = big_img_height;
  88. 					// 依據 img 寬高調整 div 位置
  89.  
  90. 					var space1 = 10; // 預留之空白或邊框寬度
  91. 					if ((big_img_height + space1) > win_h) {
  92. 						adjust_img_height1 = (win_h - space1);
  93. 						//adjust_img_width1  = parseInt(adjust_img_height1 * (big_img_width / big_img_height) , 10);
  94. 						adjust_img_width1 = parseInt(adjust_img_height1 / imgRate, 10);
  95.  
  96. 					}
  97.  
  98. 					if ((big_img_width + space1) > max_img_w) {
  99. 						adjust_img_width2 = max_img_w;
  100. 						//adjust_img_height2 = parseInt(adjust_img_width2 * (big_img_height / big_img_width) , 10);
  101. 						adjust_img_height2 = parseInt(adjust_img_width2 * imgRate, 10);
  102. 					}
  103.  
  104. 					adjust_img_width = Math.min(adjust_img_width1, adjust_img_width2);
  105. 					adjust_img_height = Math.min(adjust_img_height1, adjust_img_height2);
  106.  
  107. 					$(this).width(adjust_img_width)
  108. 					.height(adjust_img_height);
  109.  
  110. 					GM_log("  x = " + x + " , adjust_img_width = " + adjust_img_width + " , win_w = " + win_w);
  111. 					GM_log("  y = " + y + " , adjust_img_height = " + adjust_img_height + " , win_h = " + win_h);
  112.  
  113. 					if ((x + 50 + adjust_img_width) > win_w) {
  114. 						divObj.css('left', (x - adjust_img_width - 50) + 'px');
  115. 					} else {
  116. 						divObj.css('left', (win_w - adjust_img_width - 30) + 'px');
  117. 						//divObj.css('left' , '30px');
  118. 					}
  119. 				}
  120.  
  121. 			});
  122.  
  123. 			divObj.find('img').each(function () {
  124. 				$(this).attr('src', $(this).attr('data-src'));
  125. 			});
  126.  
  127. 		},
  128. 		success : function (response, status, xhr) {
  129.  
  130. 			// 由於抓圖需要時間，如果抓完後發現使用者已經在看其他圖(網址不同)，則返回
  131. 			if (url != globalGrabUrl) {				return false;			}
  132.  
  133. 			var divObj = $('#' + globalDivId);
  134.  
  135. 			divObj.css('left', (x + 50) + 'px');
  136.  
  137. 			var ct = xhr.getResponseHeader("content-type") || "";
  138.  
  139. 			//alert(ct);
  140.  
  141. 			if (ct.indexOf('html') > -1) {
  142. 				// handle html page (如果是 HTML 網頁)
  143. 				$(response).find('img').each(function () {
  144.  
  145. 					divObj.append('<img data-src="' + $(this).attr('src') + '" />');
  146. 					//divObj.append('<div>' + $(this).width() + ' x ' + $(this).height() + '</div>');
  147.  
  148. 				});
  149.  
  150. 			} else if (ct.indexOf('image') > -1) {
  151. 				// handle image here (如果是 image 圖檔)
  152. 				divObj.append('<img data-src="' + url + '" />');
  153. 			}
  154.  
  155. 			divObj.find('img').one('load', function () {
  156. 				var win_h = $(window).height();
  157. 				var win_w = $(window).width() - 30;
  158. 				var max_img_w = Math.max(x - 50, parseInt(win_w / 2, 10) - 50);
  159.  
  160. 				var big_img_width = $(this).width();
  161. 				var big_img_height = $(this).height();
  162.  
  163. 				if (big_img_width <= globalImageMinWidth) {
  164. 					$(this).remove();
  165. 				} else if (big_img_height <= globalImageMinHeight) {
  166. 					$(this).remove();
  167. 				} else {
  168.  
  169. 					var adjust_img_width = big_img_width;
  170. 					var adjust_img_height = big_img_height;
  171. 					// 依據 img 寬高調整 div 位置
  172.  
  173. 					var space1 = 10; // 預留之空白或邊框寬度
  174. 					if ((big_img_height + space1) > win_h) {
  175. 						adjust_img_height = (win_h - space1);
  176. 						adjust_img_width = parseInt(adjust_img_height * (big_img_width / big_img_height), 10);
  177. 					}
  178.  
  179. 					if ((big_img_width + space1) > max_img_w) {
  180. 						adjust_img_width = max_img_w;
  181. 						adjust_img_height = parseInt(adjust_img_width * (big_img_height / big_img_width), 10);
  182. 					}
  183.  
  184. 					$(this).width(adjust_img_width)
  185. 					.height(adjust_img_height);
  186.  
  187. 					//GM_log("  x = " + x + " , adjust_img_width = " + adjust_img_width + " , win_w = " + win_w);
  188.  
  189. 					if ((x + 50 + adjust_img_width) > win_w) {
  190. 						divObj.css('left', (x - adjust_img_width - 50) + 'px');
  191. 					} else {
  192. 						divObj.css('left', (win_w - adjust_img_width - 30) + 'px');
  193. 						//divObj.css('left' , '30px');
  194. 					}
  195. 				}
  196.  
  197. 			});
  198.  
  199. 			divObj.find('img').each(function () {
  200. 				$(this).attr('src', $(this).attr('data-src'));
  201. 			});
  202. 		}
  203. 	});
  204. }
  205. function doJcMouseEnter(url, x, y) {
  206. 	// Mouse Enter
  207. 	// 抓圖&放大圖檔
  208. 	var divObj = $('#' + globalDivId);
  209.  
  210. 	if (divObj.length == 0) {
  211. 		$('body').append('<div id="' + globalDivId + '"></div>');
  212.  
  213. 		$(document).on('mouseenter', '#' + globalDivId, function (e) {
  214. 			globalMouseInDiv = 1;
  215. 		}).on('mouseleave', '#' + globalDivId, function () {
  216. 			globalMouseInDiv = 0;
  217. 		});
  218.  
  219. 	}
  220.  
  221. 	//divObj = $('#' + globalDivId);
  222. 	divObj.show();
  223. 	globalDivShowing = 1;
  224.  
  225. 	doJcGetImageOrHtml(url, x, y);
  226.  
  227. }
  228. function doJcMouseLeave() {
  229. 	// Mouse Leave
  230. 	var divObj = $('#' + globalDivId);
  231.  
  232. 	if (divObj.length > 0) {
  233.  
  234. 		divObj.hide();
  235. 		globalDivShowing = 0;
  236. 		divObj.find('*').remove();
  237.  
  238. 	}
  239. }
  240. function JcMouseEnterEvent(thisObj, e) {
  241.  
  242.   GM_log('  JcMouseEnterEvent() , globalMouseStatus == ' + globalMouseStatus );
  243.   var divObj = $('#' + globalDivId);
  244.   
  245.   if ((0 == globalMouseInDiv) && (thisObj != globalLastEnterObj)) {
  246.     globalMouseStatus = 0;
  247.     if (divObj.length > 0) {
  248.         divObj.find('*').remove();
  249.     }
  250.     GM_log('  JcMouseEnterEvent() , set globalMouseStatus = 0');
  251.   }
  252.   globalLastEnterObj = thisObj;
  253. 	if (0 == globalMouseStatus) {
  254.     globalMouseStatus = 1;
  255. 		globalMouseOverObj = thisObj;
  256. 		var url = "";
  257. 		var parentTag = $(thisObj).parent().prop("tagName");
  258. 		//GM_log("parent TAG == " + parentTag);
  259. 		if ("A" == parentTag) {
  260. 			url = $(thisObj).parent().attr('href');
  261. 		} else {
  262. 			url = $(thisObj).attr('src');
  263.  
  264. 			// http://ww3.sinaimg.cn/square/a01660e0jw1e4enb3e5o0j21kw23u1k3.jpg
  265. 			// http://ww3.sinaimg.cn/bmiddle/a01660e0jw1e4enb3e5o0j21kw23u1k3.jpg
  266. 			var flags = '';
  267. 			var regex = new RegExp('(http://.*?\.sinaimg\.cn/)(square|thumbnail)(/.*?\.jpg|png|gif)', flags);
  268. 			var matches = regex.exec(url);
  269. 			if ((Object.prototype.toString.call(matches) === '[object Array]') && (null != matches) && (undefined != matches)) {
  270. 				url = matches[1] + "bmiddle" + matches[3];
  271. 				GM_log('  M2, url = ' + url);
  272. 			}
  273.  
  274. 		}
  275.  
  276. 		GM_log('  1. url = ' + url);
  277. 		if (-1 != url.indexOf('javascript')) { // 連結有 javascript 字串存在
  278. 			url = $(thisObj).attr('src');
  279. 			GM_log('  2. url = ' + url);
  280. 			if ((-1 != globalHost.indexOf('weibo.com')) && (-1 != location.href.indexOf('/album'))) { // 微博相簿
  281. 				// 小圖 http://ww4.sinaimg.cn/cmw205/730b784bjw1ek6c45rfxvj20hs0hqdi8.jpg
  282.                 // 小圖 http://ww4.sinaimg.cn/cmw218/730b784bjw1ek6c45rfxvj20hs0hqdi8.jpg
  283. 				// 大圖 http://ww4.sinaimg.cn/mw1024/730b784bjw1ek6c45rfxvj20hs0hqdi8.jpg
  284. 				// 小圖 http://ww2.sinaimg.cn/square/800639e2jw1ekx7ewhumgj20q00yo0xs.jpg
  285. 				// 大圖 http://ww2.sinaimg.cn/bmiddle/800639e2jw1ekx7ewhumgj20q00yo0xs.jpg
  286. 				url = url.replace(/\/cmw\d\d\d/, '/mw1024');
  287. 				url = url.replace(/square/, 'bmiddle');
  288. 			}
  289. 		} else if (0 == url.indexOf('//')) { // url 最前頭為 //
  290. 			url = 'http:' + url; // ex: //images.4chan.org/vg/src/1369795889369.jpg
  291. 			GM_log('  3. url = ' + url);
  292. 		} else {
  293. 			url = $(thisObj).attr('src');
  294. 			GM_log('  4. url = ' + url);
  295. 			if ((-1 != globalHost.indexOf('pixnet.net')) && (-1 != location.href.indexOf('/album'))) { //pixnet相簿
  296. 				// 小圖 http://pic.pimg.tw/vonnevonne/4bebc41393acb_s.jpg
  297. 				// 大圖 http://pic.pimg.tw/vonnevonne/4bebc41393acb.jpg
  298. 				url = url.replace(/_s\.jpg/, '.jpg');
  299. 				GM_log('  url 4-2 = ' + url);
  300. 			} else if (-1 != url.indexOf('sinaimg.cn')) {
  301. 				url = url.replace(/\/cmw\d\d\d/, '/mw1024');
  302. 				url = url.replace(/square/, 'bmiddle');
  303. 				GM_log('  4-3. url = ' + url);
  304. 			} else if (-1 != url.indexOf('imgdino.com')) {
  305.                 // http://img11.imgdino.com/images/60831517551122016203_thumb.jpg
  306.                 url = url.replace(/_thumb/, '');
  307. 				GM_log('  4-4. url = ' + url);
  308.             }
  309. 		}
  310.  
  311. 		
  312. 		doJcMouseEnter(url, e.pageX, e.pageY);
  313. 	}
  314. }
  315. function JcMouseLeaveEvent(thisObj) {
  316.     GM_log('  JcMouseLeaveEvent() , globalMouseStatus == ' + globalMouseStatus );
  317. 	if (1 == globalMouseStatus) {
  318. 		if (0 == globalMouseInDiv) {
  319. 			globalMouseStatus = 0;
  320. 			doJcMouseLeave();
  321. 		}
  322. 	}
  323. }
  324. $(document).ready(function () {
  325.  
  326. 	var flags = '';
  327. 	var regex = new RegExp('http(s|)://((.*?)(([^.]*?)\.([^.]*?)))/', flags);
  328. 	//var regex   = new RegExp('http(s|)://((.*?)(([^.]*?)\.([^.]*?)))//' , flags);
  329. 	var matches = regex.exec(location.href);
  330. 	globalHost = matches[2]; // ex: www.wretch.cc
  331. 	globalDomain = matches[4]; // ex: wretch.cc
  332.  
  333. 	GM_log('Host = ' + globalHost + ' , Domain = ' + globalDomain);
  334.  
  335. 	$('body').append('<div id="' + globalDivId + '"></div>');
  336.  
  337. 	$(document).on('mouseenter', '#' + globalDivId, function (e) {
  338. 		globalMouseInDiv = 1;
  339. 	}).on('mouseleave', '#' + globalDivId, function (e) {
  340. 		globalMouseInDiv = 0;
  341. 		window.setTimeout(function () {
  342. 			$('#' + globalDivId).hide();
  343. 		}, 100);
  344. 	});
  345.  
  346. 	var divObj = $('#' + globalDivId);
  347. 	divObj.hide();
  348.  
  349. 	$('a').on('mouseenter', 'img', function (e) {
  350. 		JcMouseEnterEvent(this, e);
  351. 	}).on('mouseleave', 'img', function () {
  352. 		var objThis = this;
  353. 		window.setTimeout(function () {
  354. 			if (globalMouseOverObj == objThis) {
  355. 				JcMouseLeaveEvent(objThis);
  356. 			}
  357. 		}, 100);
  358. 	});
  359.  
  360. 	$('div').on('mouseenter', 'img', function (e) {
  361. 		JcMouseEnterEvent(this, e);
  362. 	}).on('mouseleave', 'img', function () {
  363. 		var objThis = this;
  364. 		window.setTimeout(function () {
  365. 			if (globalMouseOverObj == objThis) {
  366. 				JcMouseLeaveEvent(objThis);
  367. 			}
  368. 		}, 100);
  369. 	});
  370.  
  371. });