Zoom Image
// ==UserScript==
// @name jc_Image_Zoomer_2
// @namespace http://jiichen.at.home/
// @description Zoom Image
// @description Support domain/Host: wretch.cc , yam.com , qing.weibo.com , facebook(link)
// @require http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js
// @include http://www.wretch.cc/album/*
// @include http://album.blog.yam.com/*
// @include http://*.weibo.com/*
// @include http://photo.pchome.com.tw/*
// @include http://*.pixnet.net/album/set/*
// @include http://*/thread*
// @include http://*.4chan.org/*
// @include http://www.*.com/*viewthread*
// @exclude http://www.youtube.com/
// @exclude https://www.facebook.com/
// @exclude https://app.facebook.com/
// @version 0.1.11
// @modified_date 2014.12.17
// @copyright 2012, jc
// @grant GM_log
// @grant GM_addStyle
// ==/UserScript==
//GM_addStyle("#jcZoomImgArea {position:fixed; top:0px; left:100px; border:3px solid #66CCFF; background-color:gray; padding:2px; z-index:2147483647;}");
GM_addStyle("#jcZoomImgArea2 {position:fixed; top:0px; left:100px; border:3px solid #66CCFF; background-color:gray; padding:2px; z-index:1000000;}");
var globalImageMinWidth = 190; // mouseenter 時圖的最小寬度
var globalImageMinHeight = 150; // mouseenter 時圖的最小高度
var globalMouseStatus = 0; // 0: mouseleave ; 1: mouseenter
var globalGrabUrl = ''; // 正在抓的網址
var globalDivShowing = 0; // Div 是否顯示中
var globalMouseInDiv = 0; // mouse 是否在 Div 內
var globalDivId = 'jcZoomImgArea2';
var globalMouseOverObj = null; // 滑鼠 mouseenter 的物件
var globalHost, globalDomain;
var globalLastEnterObj = null; // 上次 mouse enter 時的物件
function doJcGetImageOrHtml(url, x, y) {
// 抓圖檔，如果是網頁則繼續抓圖
globalGrabUrl = url;
GM_log('** grab url = ' + url);
$.ajax({
type : "GET",
url : url,
complete : function (xhr, textStatus) {
/*
if ('success' != textStatus) {
alert("complete error status : " + textStatus);
}
*/
},
error : function (xhr, textStatus, errorThrown) {
/*
var errMsg = xhr.status + ' , ' + xhr.responseText + ' , ' + textStatus + ' , ' + errorThrown;
alert("ERROR : " + errMsg + ' ; ' + url );
*/
var divObj = $('#' + globalDivId);
divObj.append('<img data-src="' + url + '" />');
divObj.find('img').one('load', function () {
var win_h = $(window).height();
var win_w = $(window).width() - 30;
var max_img_w = Math.max(x - 50, parseInt(win_w / 2, 10) - 50);
var big_img_width = $(this).width();
var big_img_height = $(this).height();
var imgRate = (big_img_height / big_img_width);
if (big_img_width <= globalImageMinWidth) {
$(this).remove();
} else if (big_img_height <= globalImageMinHeight) {
$(this).remove();
} else {
var adjust_img_width = big_img_width;
var adjust_img_height = big_img_height;
var adjust_img_width1 = big_img_width;
var adjust_img_height1 = big_img_height;
var adjust_img_width2 = big_img_width;
var adjust_img_height2 = big_img_height;
// 依據 img 寬高調整 div 位置
var space1 = 10; // 預留之空白或邊框寬度
if ((big_img_height + space1) > win_h) {
adjust_img_height1 = (win_h - space1);
//adjust_img_width1 = parseInt(adjust_img_height1 * (big_img_width / big_img_height) , 10);
adjust_img_width1 = parseInt(adjust_img_height1 / imgRate, 10);
}
if ((big_img_width + space1) > max_img_w) {
adjust_img_width2 = max_img_w;
//adjust_img_height2 = parseInt(adjust_img_width2 * (big_img_height / big_img_width) , 10);
adjust_img_height2 = parseInt(adjust_img_width2 * imgRate, 10);
}
adjust_img_width = Math.min(adjust_img_width1, adjust_img_width2);
adjust_img_height = Math.min(adjust_img_height1, adjust_img_height2);
$(this).width(adjust_img_width)
.height(adjust_img_height);
GM_log(" x = " + x + " , adjust_img_width = " + adjust_img_width + " , win_w = " + win_w);
GM_log(" y = " + y + " , adjust_img_height = " + adjust_img_height + " , win_h = " + win_h);
if ((x + 50 + adjust_img_width) > win_w) {
divObj.css('left', (x - adjust_img_width - 50) + 'px');
} else {
divObj.css('left', (win_w - adjust_img_width - 30) + 'px');
//divObj.css('left' , '30px');
}
}
});
divObj.find('img').each(function () {
$(this).attr('src', $(this).attr('data-src'));
});
},
success : function (response, status, xhr) {
// 由於抓圖需要時間，如果抓完後發現使用者已經在看其他圖(網址不同)，則返回
if (url != globalGrabUrl) { return false; }
var divObj = $('#' + globalDivId);
divObj.css('left', (x + 50) + 'px');
var ct = xhr.getResponseHeader("content-type") || "";
//alert(ct);
if (ct.indexOf('html') > -1) {
// handle html page (如果是 HTML 網頁)
$(response).find('img').each(function () {
divObj.append('<img data-src="' + $(this).attr('src') + '" />');
//divObj.append('<div>' + $(this).width() + ' x ' + $(this).height() + '</div>');
});
} else if (ct.indexOf('image') > -1) {
// handle image here (如果是 image 圖檔)
divObj.append('<img data-src="' + url + '" />');
}
divObj.find('img').one('load', function () {
var win_h = $(window).height();
var win_w = $(window).width() - 30;
var max_img_w = Math.max(x - 50, parseInt(win_w / 2, 10) - 50);
var big_img_width = $(this).width();
var big_img_height = $(this).height();
if (big_img_width <= globalImageMinWidth) {
$(this).remove();
} else if (big_img_height <= globalImageMinHeight) {
$(this).remove();
} else {
var adjust_img_width = big_img_width;
var adjust_img_height = big_img_height;
// 依據 img 寬高調整 div 位置
var space1 = 10; // 預留之空白或邊框寬度
if ((big_img_height + space1) > win_h) {
adjust_img_height = (win_h - space1);
adjust_img_width = parseInt(adjust_img_height * (big_img_width / big_img_height), 10);
}
if ((big_img_width + space1) > max_img_w) {
adjust_img_width = max_img_w;
adjust_img_height = parseInt(adjust_img_width * (big_img_height / big_img_width), 10);
}
$(this).width(adjust_img_width)
.height(adjust_img_height);
//GM_log(" x = " + x + " , adjust_img_width = " + adjust_img_width + " , win_w = " + win_w);
if ((x + 50 + adjust_img_width) > win_w) {
divObj.css('left', (x - adjust_img_width - 50) + 'px');
} else {
divObj.css('left', (win_w - adjust_img_width - 30) + 'px');
//divObj.css('left' , '30px');
}
}
});
divObj.find('img').each(function () {
$(this).attr('src', $(this).attr('data-src'));
});
}
});
}
function doJcMouseEnter(url, x, y) {
// Mouse Enter
// 抓圖&放大圖檔
var divObj = $('#' + globalDivId);
if (divObj.length == 0) {
$('body').append('<div id="' + globalDivId + '"></div>');
$(document).on('mouseenter', '#' + globalDivId, function (e) {
globalMouseInDiv = 1;
}).on('mouseleave', '#' + globalDivId, function () {
globalMouseInDiv = 0;
});
}
//divObj = $('#' + globalDivId);
divObj.show();
globalDivShowing = 1;
doJcGetImageOrHtml(url, x, y);
}
function doJcMouseLeave() {
// Mouse Leave
var divObj = $('#' + globalDivId);
if (divObj.length > 0) {
divObj.hide();
globalDivShowing = 0;
divObj.find('*').remove();
}
}
function JcMouseEnterEvent(thisObj, e) {
GM_log(' JcMouseEnterEvent() , globalMouseStatus == ' + globalMouseStatus );
var divObj = $('#' + globalDivId);
if ((0 == globalMouseInDiv) && (thisObj != globalLastEnterObj)) {
globalMouseStatus = 0;
if (divObj.length > 0) {
divObj.find('*').remove();
}
GM_log(' JcMouseEnterEvent() , set globalMouseStatus = 0');
}
globalLastEnterObj = thisObj;
if (0 == globalMouseStatus) {
globalMouseStatus = 1;
globalMouseOverObj = thisObj;
var url = "";
var parentTag = $(thisObj).parent().prop("tagName");
//GM_log("parent TAG == " + parentTag);
if ("A" == parentTag) {
url = $(thisObj).parent().attr('href');
} else {
url = $(thisObj).attr('src');
// http://ww3.sinaimg.cn/square/a01660e0jw1e4enb3e5o0j21kw23u1k3.jpg
// http://ww3.sinaimg.cn/bmiddle/a01660e0jw1e4enb3e5o0j21kw23u1k3.jpg
var flags = '';
var regex = new RegExp('(http://.*?\.sinaimg\.cn/)(square|thumbnail)(/.*?\.jpg|png|gif)', flags);
var matches = regex.exec(url);
if ((Object.prototype.toString.call(matches) === '[object Array]') && (null != matches) && (undefined != matches)) {
url = matches[1] + "bmiddle" + matches[3];
GM_log(' M2, url = ' + url);
}
}
GM_log(' 1. url = ' + url);
if (-1 != url.indexOf('javascript')) { // 連結有 javascript 字串存在
url = $(thisObj).attr('src');
GM_log(' 2. url = ' + url);
if ((-1 != globalHost.indexOf('weibo.com')) && (-1 != location.href.indexOf('/album'))) { // 微博相簿
// 小圖 http://ww4.sinaimg.cn/cmw205/730b784bjw1ek6c45rfxvj20hs0hqdi8.jpg
// 小圖 http://ww4.sinaimg.cn/cmw218/730b784bjw1ek6c45rfxvj20hs0hqdi8.jpg
// 大圖 http://ww4.sinaimg.cn/mw1024/730b784bjw1ek6c45rfxvj20hs0hqdi8.jpg
// 小圖 http://ww2.sinaimg.cn/square/800639e2jw1ekx7ewhumgj20q00yo0xs.jpg
// 大圖 http://ww2.sinaimg.cn/bmiddle/800639e2jw1ekx7ewhumgj20q00yo0xs.jpg
url = url.replace(/\/cmw\d\d\d/, '/mw1024');
url = url.replace(/square/, 'bmiddle');
}
} else if (0 == url.indexOf('//')) { // url 最前頭為 //
url = 'http:' + url; // ex: //images.4chan.org/vg/src/1369795889369.jpg
GM_log(' 3. url = ' + url);
} else {
url = $(thisObj).attr('src');
GM_log(' 4. url = ' + url);
if ((-1 != globalHost.indexOf('pixnet.net')) && (-1 != location.href.indexOf('/album'))) { //pixnet相簿
// 小圖 http://pic.pimg.tw/vonnevonne/4bebc41393acb_s.jpg
// 大圖 http://pic.pimg.tw/vonnevonne/4bebc41393acb.jpg
url = url.replace(/_s\.jpg/, '.jpg');
GM_log(' url 4-2 = ' + url);
} else if (-1 != url.indexOf('sinaimg.cn')) {
url = url.replace(/\/cmw\d\d\d/, '/mw1024');
url = url.replace(/square/, 'bmiddle');
GM_log(' 4-3. url = ' + url);
} else if (-1 != url.indexOf('imgdino.com')) {
// http://img11.imgdino.com/images/60831517551122016203_thumb.jpg
url = url.replace(/_thumb/, '');
GM_log(' 4-4. url = ' + url);
}
}
doJcMouseEnter(url, e.pageX, e.pageY);
}
}
function JcMouseLeaveEvent(thisObj) {
GM_log(' JcMouseLeaveEvent() , globalMouseStatus == ' + globalMouseStatus );
if (1 == globalMouseStatus) {
if (0 == globalMouseInDiv) {
globalMouseStatus = 0;
doJcMouseLeave();
}
}
}
$(document).ready(function () {
var flags = '';
var regex = new RegExp('http(s|)://((.*?)(([^.]*?)\.([^.]*?)))/', flags);
//var regex = new RegExp('http(s|)://((.*?)(([^.]*?)\.([^.]*?)))//' , flags);
var matches = regex.exec(location.href);
globalHost = matches[2]; // ex: www.wretch.cc
globalDomain = matches[4]; // ex: wretch.cc
GM_log('Host = ' + globalHost + ' , Domain = ' + globalDomain);
$('body').append('<div id="' + globalDivId + '"></div>');
$(document).on('mouseenter', '#' + globalDivId, function (e) {
globalMouseInDiv = 1;
}).on('mouseleave', '#' + globalDivId, function (e) {
globalMouseInDiv = 0;
window.setTimeout(function () {
$('#' + globalDivId).hide();
}, 100);
});
var divObj = $('#' + globalDivId);
divObj.hide();
$('a').on('mouseenter', 'img', function (e) {
JcMouseEnterEvent(this, e);
}).on('mouseleave', 'img', function () {
var objThis = this;
window.setTimeout(function () {
if (globalMouseOverObj == objThis) {
JcMouseLeaveEvent(objThis);
}
}, 100);
});
$('div').on('mouseenter', 'img', function (e) {
JcMouseEnterEvent(this, e);
}).on('mouseleave', 'img', function () {
var objThis = this;
window.setTimeout(function () {
if (globalMouseOverObj == objThis) {
JcMouseLeaveEvent(objThis);
}
}, 100);
});
});