There are 12 previous versions of this script.
// ==UserScript==
// @name FlickrZoom
// @namespace http://erlend.oftedal.no
// @include http://*flickr.com/*
// @include http://*.photosight.*/*
// @include http://*photosig.com/*
// @include http://*onexposure.net/*
// @include http://1x.com/*
// @version 0.0.25
// @author Erlend Oftedal
// @description Get preview of thumbnailed images on flickr, photosight, photosig and onexposure
// ==/UserScript==
var fz_sc;
var jQuery = null;
var fz_zoomBox;
var fz_activeThumb;
var fz_hoverThumb;
var fz_grayPanel;
var fz_loader;
var fz_endings = /_[stm].jpg$/;
var fz_buttonBar;
var fz_openButton;
var fz_closeButton;
var fz_linkButtonStyle = {color: "#aaa", fontSize: "75%", marginLeft: "5px"};
var fz_favButton;
var fz_OESelect;
var fz_OEOptions;
var fz_OESelectButton;
var fz_titleBar;
var fz_isPS = false;
var fz_isOE = false;
var fz_isPsig = false;
var fz_isFlickr = false;
var fz_colorBar;
function init() {
jQuery = this.jQuery;
if (jQuery == null) {
if (fz_sc == null) {
fz_sc = document.createElement("script");
fz_sc.src = "http://code.jquery.com/jquery-latest.js";
document.getElementsByTagName("head")[0].appendChild(fz_sc);
}
setTimeout(init, 500);
} else {
eval("jQuery.noConflict()");
goNext();
}
}
init();
function goNext() {
fz_isPS = contains(document.location.href, "photosight.");
fz_isOE = contains(document.location.href, "onexposure.net") || contains(document.location.href, "/1x.com");
fz_isPsig = contains(document.location.href, "photosig.com");
fz_isFlickr = !(fz_isPS || fz_isOE || fz_isPsig);
inject();
fz_zoomBox = document.createElement("div");
fz_zoomBox.innerHTML = "<img src=\"http://erlend.oftedal.no/photo/icon-zoom.gif\" />";
jQuery(fz_zoomBox).css({zIndex:100, position:"absolute", cursor:"pointer"}).appendTo(jQuery("body")).hide();
fz_loader = document.createElement("img");
fz_loader.src = "http://erlend.oftedal.no/photo/ajaxloader.gif";
jQuery(fz_loader).css({position: "absolute", zIndex:50000}).appendTo(jQuery("body")).hide();
fz_zoomBox.addEventListener('mouseover', function() { jQuery(fz_zoomBox).show(); }, true);
fz_zoomBox.addEventListener('mouseout', function() { jQuery(fz_zoomBox).hide(); }, true);
fz_zoomBox.addEventListener('click', function() { zoomMe(fz_hoverThumb) }, true);
fz_grayPanel = document.createElement("div");
jQuery(fz_grayPanel).css({top: 0, left:0, position:"absolute", background:"#000000", opacity:0})
.appendTo(jQuery("body")).hide();
fz_buttonBar = document.createElement("div");
jQuery(fz_buttonBar).css(
{position:"absolute", zIndex: 9999, background:"#000", padding: "3px 0px 5px 0px", textAlign: "left"}
).appendTo(jQuery("body")).hide();
fz_titleBar = document.createElement("div");
jQuery(fz_titleBar).css({textAlign:"center", fontWeight:"bold", color:"#aaa", fontSize: "95%"}).appendTo(jQuery(fz_buttonBar));
fz_closeButton = document.createElement("a");
jQuery(fz_closeButton).html("Close").css(fz_linkButtonStyle).css({float:"right", marginRight:"5px"}).appendTo(jQuery(fz_buttonBar));
fz_openButton = document.createElement("a");
jQuery(fz_openButton).html("Open image page").css(fz_linkButtonStyle).appendTo(jQuery(fz_buttonBar));
fz_favButton = document.createElement("a");
fz_OESelect = document.createElement("span");
if (fz_isOE) {
fz_OESelectButton = document.createElement("a");
jQuery(fz_OESelect).appendTo(jQuery(fz_buttonBar)).css("margin-left", 10);
jQuery(fz_OESelectButton).bind('click', function() { OEAddToAlbum(); return false; })
.appendTo(jQuery(fz_buttonBar)).html("Add to album").css(fz_linkButtonStyle);
jQuery(fz_favButton).css("padding-left", "20px");
fz_OESelectButton.href = "javascript:";
}
jQuery(fz_favButton).html("Add to faves").css(fz_linkButtonStyle).appendTo(jQuery(fz_buttonBar));
fz_closeButton.href = "javascript:";
fz_favButton.href = "javascript:";
fz_colorBar = document.createElement("div");
jQuery(fz_colorBar).css({position:"absolute"}).appendTo(jQuery(fz_grayPanel)).width(15).height(512);
var i = 0;
for (i = 0; i < 255; i++) {
var dd = document.createElement("div");
var cc = i.toString(16).toUpperCase();
if (i < 16) cc = "0" + cc;
cc = "#" + cc + cc + cc;
jQuery(dd).height(2).width(15).css({background: cc}).appendTo(jQuery(fz_colorBar));
jQuery(dd).bind('mouseover', setBgLayer);
}
}
function setBgLayer() {
jQuery(fz_grayPanel).css({opacity: 1, background: this.style.backgroundColor});
}
function inject() {
jQuery("img").each(
function(i) {
if (!this.fz_evaluated) {
this.fz_evaluated = true;
if (isPreview(this)) {
this.onmouseover = showZoom;
this.onmouseout = hideZoom;
}
}
});
setTimeout(inject, 1000);
}
function isPreview(img) {
var url = img.src;
if (fz_isPS) {
return contains(url, "pv_") || contains(url, "fp_") || contains(url, "_icon");
} else if (fz_isOE) {
return contains(url, "-thumb") || contains(url, "/tiny/") || contains(url, "-square");
} else if (fz_isPsig) {
return contains(url, "-thumb") || contains(url, "-blur");
} else {
return url.search(fz_endings) != -1 && !contains(img.parentNode.href, "/collections/") &&
!contains(img.parentNode.href, "/sets/");
}
}
function contains(haystack, needle) {
return haystack.indexOf(needle) != -1;
}
function showZoom() {
var thumb = jQuery(this);
jQuery(fz_zoomBox).css("top", thumb.offset().top + thumb.height() - 21).css("left", thumb.offset().left + thumb.width() - 21)
.css("z-index", 20000).show();
fz_hoverThumb = this;
}
function hideZoom() {
jQuery(fz_zoomBox).hide();
}
function zoomMe(tmb) {
fz_activeThumb = tmb;
try {
if (tmb.fullImg == null) {
var thumb = jQuery(tmb);
showLoader(thumb);
if (fz_isPsig) {
jQuery.get(tmb.parentNode.href, null, function (data) { extractData(tmb, data); });
} else {
buildFull(tmb);
}
} else {
zoomMeBegin(tmb);
}
}catch(e) {
alert(e);
}
return false;
}
function showLoader(jqElm) {
var loader = jQuery(fz_loader);
loader.css("top", jqElm.offset().top + (jqElm.height() - loader.height()) /2)
.css("left", jqElm.offset().left + (jqElm.width() - loader.width()) /2)
.show();
}
function hideLoader() {
jQuery(fz_loader).hide();
}
function extractData(tmb, data) {
var re = /<img src=.([^ ]+). .*? class=.outlined./;
var ar = re.exec(data);
tmb.psig_url = ar[1];
buildFull(tmb);
}
function buildFull(tmb) {
tmb.fullImg = document.createElement("img");
tmb.fullImg.thumb = this;
var img = tmb;
tmb.fullImg.addEventListener('load', function () { jQuery(fz_loader).hide();zoomMeBegin(img); }, true);
var url = getUrl(tmb);
tmb.fullImg.src = url;
jQuery(tmb.fullImg).css({display:"none", position:"absolute", zIndex:10000});
jQuery("body").append(tmb.fullImg);
tmb.fullImg.addEventListener('click', function() { zoomMeOut(img); } , true);
}
function getUrl(tmb) {
var url;
if (fz_isPS) {
if (document.location.href.indexOf("photosight.us") != -1) {
var re = /.*\/([0-9]+)\/([0-9]+)\/([0-9]+)\/(pv_|fp_)([0-9]+).jpg/;
var ar = re.exec(tmb.src);
url = "http://photosight.us/showimg.php?y=" + ar[1] + "&m=" + ar[2] + "&d=" + ar[3] + "&image=" + ar[5] + ".jpg";
} else {
url = tmb.src.replace("pv_", "").replace("fp_", "").replace("/tup/", "/up/").replace("prv-", "img-")
.replace("_icon", "_large");
}
} else if(fz_isPsig) {
url = tmb.psig_url;
} else if(fz_isOE) {
if (tmb.src.indexOf("/tiny/") != -1) {
url = tmb.src.replace("/tiny/" , "/").replace(".jpg", "-fullsize.jpg");
} else {
url = tmb.src.replace("pictures", "OEfullSize").replace("-thumb", "-fullsize").replace("-square", "-fullsize");
}
} else {
url = tmb.src.replace(fz_endings, ".jpg");
}
return url;
}
function zoomMeBegin(tmb) {
if (fz_activeThumb != tmb) return;
var thumb = jQuery(tmb);
var full = jQuery(tmb.fullImg);
if (tmb.fullImg.originalHeight == null) {
tmb.fullImg.originalHeight = tmb.fullImg.height;
tmb.fullImg.originalWidth = tmb.fullImg.width;
}
full.width(thumb.width()).height(thumb.height())
.css("top",thumb.offset().top).css("left", thumb.offset().left)
.show();
var dims = clientCoords();
jQuery(fz_grayPanel).width(jQuery("body").width()).height(jQuery("body").height()).show().css("opacity", 0);
var cby = (dims.height - jQuery(fz_colorBar).height()) / 2 + eval("document.body.scrollTop");
if (cby < 0) cby = 0;
fz_colorBar.style.top = cby;
var x = (dims.width - tmb.fullImg.originalWidth) / 2;
var y = (dims.height - tmb.fullImg.originalHeight) / 2 + eval("document.body.scrollTop");
var maxY = jQuery("body").height() - 40 - tmb.fullImg.originalHeight;
if (fz_isOE) {
maxY = jQuery("div#full").height() - 40 - tmb.fullImg.originalHeight;
}
if (y > maxY) y = maxY;
if (y < 5) y = 5;
full.css("opacity", 0).css("border", "1px solid #000");
full.animate({
top: y, left: x, opacity: 1,
width: tmb.fullImg.originalWidth, height: tmb.fullImg.originalHeight
}, 500, null, function() { zoomDone(tmb); });
}
function zoomDone(tmb) {
if (fz_activeThumb != tmb) { zoomMeOut(tmb); return; }
fz_openButton.href = tmb.parentNode.href;
var buttons = jQuery(fz_buttonBar);
if (fz_isPS) {
if (!contains(tmb.src, "photosight.ru")) {
var re = /.*(pv_|fp_)([0-9]+).jpg$/;
var ar = re.exec(tmb.src);
fz_favButton.p_id = ar[2];
jQuery(fz_favButton).unbind("click").bind("click",
function() { jQuery.get("add_my.php?photoid=" + fz_favButton.p_id, null, function(data) { hideLoader(); }); return false; });
} else {
jQuery(fz_favButton).hide();
}
} else if(fz_isOE) {
var re = /.*\/([0-9]+)(-[^\/]*)?.jpg$/;
var ar = re.exec(tmb.src);
fz_favButton.p_id = ar[1];
jQuery(fz_favButton).unbind("click").bind("click",
function() { jQuery.post("/oeincludes/inc_favstate.php?id=" + fz_favButton.p_id, {"change": true}, function(data) { hideLoader(); }); return false; });
jQuery(fz_OESelect).hide();
jQuery(fz_OESelectButton).hide();
jQuery.get(fz_openButton.href, null, function(data) { OEExtract(tmb, data); });
buttons.css("border", "1px solid #111").css("border-top", "none");
} else if(fz_isPsig){
jQuery(fz_favButton).hide();
} else {
fz_titleBar.innerHTML = tmb.parentNode.title;
var re = /.*\/([0-9]+)\/.*/;
var ar = re.exec(tmb.parentNode.href);
fz_favButton.p_id = ar[1];
jQuery(fz_favButton).unbind("click").bind("click",
function() { unsafeWindow.F.API.callMethod("flickr.favorites.add", {photo_id:fz_favButton.p_id}, fz_favButton); return false; });
}
jQuery(fz_closeButton).one("click", function() { zoomMeOut(tmb); return false; });
jQuery(fz_grayPanel).css({zIndex: 5000, opacity:0})
.animate({opacity: 0.5}, 300);
var full = jQuery(tmb.fullImg);
buttons.width(full.width()).css("top", full.offset().top + full.height() -40).css("left", full.offset().left);
full.one("mouseover", function() {
buttons.show();
buttons.animate({top: full.offset().top + full.height()}, 200);
});
}
function OEExtract(tmb, data) {
if (fz_activeThumb != tmb) return;
var form = data.substring(data.indexOf('<form id="album"'));
form = form.substring(0, data.indexOf("</form>") + 7);
var d = document.createElement("div");
d.innerHTML = form;
var select = jQuery(d).find("select").css("font-size", "75%").get(0);
fz_OEOptions = new Array();
jQuery(d).find("input").each( function() { fz_OEOptions[this.name] = this.value; });
jQuery(fz_OESelect).html(select).show();
jQuery(fz_OESelectButton).show().html("Add to album");
}
function OEAddToAlbum() {
showLoader(jQuery(fz_activeThumb.fullImg));
var select = jQuery(fz_OESelect).children().get(0);
if (select.value != "") {
fz_OEOptions["add_to_album"] = select.value;
jQuery.post("http://www.onexposure.net/?photos=latest-additions&photo=" + fz_OEOptions["id"], fz_OEOptions,
function(data) { hideLoader(); }
);
}
}
function zoomMeOut(tmb) {
jQuery(fz_buttonBar).hide();
jQuery(fz_grayPanel).animate({opacity: 0}, 200, null, function() { jQuery(fz_grayPanel).css("z-index", 15000).hide(); });
var thumb = jQuery(tmb);
if (tmb.fullImg != null) {
var full = jQuery(tmb.fullImg);
full.animate({
top: thumb.offset().top, left: thumb.offset().left, opacity: 0,
width: thumb.width(), height: thumb.height()
}, 500, null, function () { full.hide(); jQuery(fz_buttonBar).hide(); });
}
}
function clientCoords() {
var dimensions = {width: 0, height: 0};
if( typeof( eval("window.innerWidth") ) == 'number' ) {
//Non-IE
dimensions.width = eval("window.innerWidth");
dimensions.height = eval("window.innerHeight");
} else if( eval("document.documentElement")
&& ( eval("document.documentElement.clientWidth")
|| eval("document.documentElement.clientHeight") ) ) {
//IE 6+ in 'standards compliant mode'
dimensions.width = eval("document.documentElement.clientWidth");
dimensions.height= eval("document.documentElement.clientHeight");
} else if( eval("document.body") && ( eval("document.body.clientWidth")
|| eval("document.body.clientHeight") ) ) {
//IE 4 compatible
dimensions.width = eval("document.body.clientWidth");
dimensions.height= eval("document.body.clientHeight");
}
return dimensions;
}
