There are 3 previous versions of this script.
// ==UserScript==
// @name Digg.com Larger Images on Mouseover
// @namespace http://amzn1995.googlepages.com
// @description Makes the images on digg.com larger when you hover over them. No need to click to see the full images. digg it?!
// @include http://digg.com/*
// @include http://www.digg.com/*
// ==/UserScript==
// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js';
GM_JQ.type = 'text/javascript';
var imageTag = "img";
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// Check if jQuery's loaded
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();
// All your GM code must be inside this function
function letsJQuery() {
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:150,timeout:100};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=$.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})($);
// code to run when hover is activated
var hoverInFunction = function (e) {
var hoveredElement = this;
if ($(this).data){
$(hoveredElement).css('cursor','wait');
}
// remove any leftover popovers
$('div.largeImagePopover').remove();
$('div#largeImagePopover').remove();
// get the large image url
var src = $(this).attr('src');
var alt = $(this).attr('alt');
var href = $(this).attr('href');
if (href && /\.(jpg|png|gif)/.test(href)){
src = href;
}
if (!src){
src = $(this).css('background-image');
src = src.replace(/url\(/,'');
src = src.replace(/\)/,'');
}
var link = $(this).parent().attr('href');
if (!link){
link = $(this).parents('a').attr('href');
}
src = src.replace(/\/[tpams]\./,"/l.");
if (!link || /javascript/.test(link)){
link = location.href;
}
// create the popover
var popImage = document.createElement("img");
popImage.src = src;
popImage.border = 0;
if($(popImage).data){
$(popImage).data('hoveredElement',hoveredElement);
}
// attach events to new image
$(popImage).mousemove( function() { $(this).remove(); });
// attach image loaded event
$(popImage).load( function() {
// if the popover image is too small, remove the
// popover and prevent it from happening again
if(popImage.width < 48 && $(this).data){
$($(this).data('hoveredElement')).css('cursor','pointer');
$($(this).data('hoveredElement')).hoverIntent(function(){},function(){});
return;
}
// these assignments may differ per browser
var pageXOffset = window.pageXOffset;
var pageYOffset = window.pageYOffset;
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;
var mouseX = e.pageX;
var mouseY = e.pageY;
// shrink image if wider than screen
popImage.width = Math.min(popImage.width,innerWidth);
// center image on mouse cursor
var x = mouseX - parseInt(popImage.width/2);
var y = mouseY - parseInt(popImage.height/2);
// move image down and right if off screen to the left or top
x = Math.max(x,pageXOffset);
y = Math.max(y,pageYOffset);
// move image up or left if off screen to the right or bottom
x = Math.min(x, pageXOffset + innerWidth - popImage.width);
y = Math.min(y, pageYOffset + innerHeight - popImage.height);
// move image down and right if off screen to the left or top
x = Math.max(x,pageXOffset);
y = Math.max(y,pageYOffset);
$(popImage.parentNode.parentNode).css('left',x);
$(popImage.parentNode.parentNode).css('top',y);
$(popImage.parentNode.parentNode).fadeIn('slow');
if($(this).data){
$($(this).data('hoveredElement')).css('cursor','crosshair');
}
});
var popLink = document.createElement("a");
popLink.href = link;
var popDiv = document.createElement("div");
popDiv.id= 'largeImagePopover';
popDiv.class = 'largeImagePopover';
$(popDiv).css('position','absolute');
$(popDiv).css('z-index','400000000');
popLink.appendChild(popImage);
popDiv.appendChild(popLink);
$(popDiv).hide();
// add to document
$('body').append($(popDiv));
}
$("img").each(function(i) {
var imgsrc = $(this).attr("src");
if (/\/[stmpa]\.(jpg|png|gif)/.test(imgsrc)){
$(this).css('cursor','crosshair');
$(this).hoverIntent( hoverInFunction, function(){} );
}
});
$("em").each(function(i) {
var image = $(this).css('background-image');
if (/\/[stmpa]\.(jpg|png|gif)/.test(image)){
$(this).css('cursor','crosshair');
$(this).hoverIntent( hoverInFunction, function(){} );
}
});
$("a.offsite").each(function(i) {
var image = $(this).attr('href');
if (/\.(jpg|png|gif)/.test(image) && !/\?.*\.(jpg|png|gif)/.test(image)){
$(this).css('cursor','crosshair');
$(this).hoverIntent( hoverInFunction, function(){} );
}else{
image = $(this).find('span').css('background-image');
if (/\.(jpg|png|gif)/.test(image) && !/\?.*\.(jpg|png|gif)/.test(image)){
$(this).find('span').css('cursor','crosshair');
$(this).find('span').hoverIntent( hoverInFunction, function(){} );
}
}
});
}
