Userscripts.org

There are 4 previous versions of this script.

// ==UserScript==
// @name           Finya XL Image Previewer
// @namespace      http://www.martinmunich.com
// @include        http://*.finya.de/*
// @description    Preview Finya userimages without leaving a trace in the "last visited by" section of that user
// @version        2.1.0
// ==/UserScript==

var allIMGs, thisIMG, leftOffset, topOffset;
matchRegEx = /_[0-2].jpg/i;
replaceString = '_4.jpg'
leftOffset = 20; // x-axis
topOffset = 130; // y-axis
viewContainer = 'canvas'; //The positioned object containing  the small preview images
docBase = 'stage'; // location in the DOM where the big preview images will be inserted
toWatch = new Array('pgsidebar','pgcontent'); // Elements which have ajax img content
toWatchClasses = new Array('userimg','setcard-small-userimg'); // Image style classes containing relevant images

Array.prototype.indexOf = function(obj) { // Define lookup function for arrays
  for (var i = 0; i < this.length; i++) {
    if (this[i] == obj)
      return i;
  }
  return -1;
}

// Event functions
function mouseOver(e) {
    targetXL = document.getElementById(this.getAttribute('targetID'));
    //alert(e.pageX);
    targetXL.style.left = e.pageX - document.getElementById(viewContainer).offsetLeft + leftOffset + this.scrollLeft + 'px';
    targetXL.style.top = e.pageY - document.getElementById(viewContainer).offsetTop - targetXL.height - topOffset + this.scrollTop + 'px';

	targetXL.style.display='block';
}

function mouseMove(e) {
    targetXL = document.getElementById(this.getAttribute('targetID'));
    targetXL.style.left = e.pageX - document.getElementById(viewContainer).offsetLeft + leftOffset + this.scrollLeft + 'px';
    targetXL.style.top = e.pageY - document.getElementById(viewContainer).offsetTop - targetXL.height - topOffset + this.scrollTop + 'px';
}

function mouseOut() {
	document.getElementById(this.getAttribute('targetID')).style.display='none';
}

// Add big-sized preview images for all small preview images
function addPrvImg() {
	var allIMGs = document.getElementsByTagName('img');
	var usedIMGs = new Array();
	var imgXL;
	
	// loop all images
	for (var i = 0; i < allIMGs.length; i++) {
		var thisIMG = allIMGs[i];

		// identify small preview images
		if (thisIMG.src.search(matchRegEx)>0 && toWatchClasses.indexOf(thisIMG.className)>-1) {
		//if (thisIMG.src.search(matchRegEx)>0 && (thisIMG.className=='userimg' || thisIMG.className=='setcard-small-userimg')) {
			// get image id from  image source file name
			var imgID = "xlPrvIMG_" + thisIMG.src.substring(thisIMG.src.lastIndexOf("/")+1,thisIMG.src.lastIndexOf("_"));
			usedIMGs.push(imgID);
			
			// only add preview image if it does not already exist
			if (!document.getElementById(imgID)) {
				var xlSrc = thisIMG.src.replace(matchRegEx,replaceString)
				var imgXL = document.createElement('img');
				
				imgXL.setAttribute('style', 'z-index: 101; position:absolute; display:none; border:none;');
				imgXL.setAttribute('id', imgID);
				imgXL.setAttribute('src', xlSrc);
				
				document.getElementById(docBase).insertBefore(imgXL, document.getElementById(docBase).firstChild);
			}
			
			// set "targetID" attribute to the image id. it will be used by the event functions to locate the big preview image
			thisIMG.setAttribute("targetID", imgID);
			
			// activate event listeners for small preview image
			thisIMG.addEventListener('mouseover', mouseOver, false);
			thisIMG.addEventListener('mousemove', mouseMove, false);
			thisIMG.addEventListener('mouseout', mouseOut, false);
		}
	}
	
	// after inserting big preview images, clean up all unused big preview images
	for (var i = 0; i < allIMGs.length; i++) {
		var thisIMG = allIMGs[i];
		var imgID = thisIMG.getAttribute('id');

		if (imgID != null && imgID.indexOf('xlPrvIMG_')>=0) {

			// get image id from  image source file name
			var imgID = 'xlPrvIMG_' + thisIMG.src.substring(thisIMG.src.lastIndexOf("/")+1,thisIMG.src.lastIndexOf("_"));
			
			if (usedIMGs.join().indexOf(imgID)<0) {
				thisIMG.parentNode.removeChild(thisIMG);
			}
		}
	}
}

// initial execution
addPrvImg();

// add event listeners
for (var i = 0; i < toWatch.length; i++) {
	if (thisElem = document.getElementById(toWatch[i])) {
		thisElem.addEventListener('DOMSubtreeModified', addPrvImg, false);
	}
}