• Scripts
• Forums
• Blog
• People

FlickrZoom

By eoftedal — Last update Nov 23, 2008 — Installed 1,551 times.

• About
• Source Code
• Reviews 0
• Discussions 8
• Fans 13
• Share

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;
}