There are 11 previous versions of this script.
// ==UserScript==
// @name Enlarge facebook profile images
// @namespace MattiasBlom
// @description Shows the full sized profile picture when you hover over profile images, in search results or thumbnails on profiles or walls.
// @include http://*.facebook.com/*
// ==/UserScript==
/*
Almost everything stolen from FB_PIC by Michael Coyne.
Different strategy, attach mouseover to all images at
server "profile.ak.facebook.com", forget links.
FB_PIC = http://userscripts.org/scripts/show/11446
Version: 1.1 - Added hack to get around the asynchronous loading of friendslist.
Click in the "search" textbox in the menubar and hovering should become enabled.
Version; 1.1b - More of the same hack, reset pictures can now be performed by pressing CTRL+ALT+R
version: 1.2 - Adapting to the new facebook layout. (we are borg)
version: 1.21 - Adapt: recalibrate shields.
version: 1.22 - Faster setup when updating for partially loaded content.
version: 1.23 - Additional support for Mac, Ctrl+Meta+R for reloading.
version: 1.24 - Adapting, parentnode can be divs now, pls?
version: 1.25 - Profile images are now stored at the CDN.
*/
function keyHandler(e) {
// If you don't like CTRL+ALT+R, this is where you change it
var keyToReloadFor = 'r';
// You can replace: (e.altKey||e.metaKey) && e.ctrlKey
//
// eg: e.altKey && e.shiftKey => ALT+SHIFT
// or: e.ctrlKey && e.shiftKey && e.altKey => CTRL+ALT+SHIFT
// or: e.altKey =>
//
// etc
// the (e.altKey||e.metaKey)-part is mac-special which results in both CTRL+ALT and META+CTRL working at the same time. oh well.
if(e.which==keyToReloadFor.charCodeAt(0) && (e.altKey||e.metaKey) && e.ctrlKey ){
init();
}
}
function init() {
if (!document.getElementById("FB_PIC_EVO")) {
var pic = document.createElement('div');
pic.setAttribute('id', 'FB_PIC_EVO');
pic.style.position = 'absolute';
pic.style.zIndex = 10000;
pic.style.visibility = 'hidden';
document.body.appendChild(pic);
}
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].src.include('profile.ak.facebook.com') || imgs[i].src.include('profile.ak.fbcdn.net')) {
if (imgs[i].src.substr(imgs[i].src.lastIndexOf('\/')+1,1) != 'n'){
if (!gotEvent(imgs[i])){
/* haxxor for new facebook layout ~ march -09 */
var hookupEventOn;
if(imgs[i].parentNode.nodeName.toLowerCase() == 'span' || imgs[i].parentNode.nodeName.toLowerCase() == 'div')
{
imgs[i].parentNode.setAttribute('hoversrc', imgs[i].src);
hookupEventOn = imgs[i].parentNode;
}
// added for the guest list popup modal dialog stuff @ /event.php
else if(imgs[i].parentNode.parentNode.nodeName.toLowerCase() == 'div' && imgs[i].parentNode.parentNode.className.toLowerCase() == 'uiobjectlisting_pic')
{
imgs[i].parentNode.parentNode.setAttribute('hoversrc', imgs[i].src);
hookupEventOn = imgs[i].parentNode.parentNode;
}
else
{
imgs[i].setAttribute('hoversrc', imgs[i].src);
hookupEventOn = imgs[i];
}
/* end haxxor for new facebook layout ~ march -09 */
hookupEventOn.addEventListener('mouseover', find, true);
hookupEventOn.addEventListener('mousemove', function(ev) {
wait(
function() { return ($('FB_PIC_EVO').clientHeight > 0 && $('FB_PIC_EVO').clientWidth > 0 && ev.clientX > 0); },
function() { show(ev.clientX, ev.clientY, $('FB_PIC_EVO').clientHeight, $('FB_PIC_EVO').clientWidth); }
);
}, true);
hookupEventOn.addEventListener('mouseout', function(){$('FB_PIC_EVO').innerHTML = '';$('FB_PIC_EVO').style.visibility='hidden';}, true);
}
}
}
}
}
function gotEvent(element) {
if(element.hasAttribute('hoversrc'))
return true;
else if(element.parentNode.hasAttribute('hoversrc'))
return true;
else if(element.parentNode.parentNode.hasAttribute('hoversrc'))
return true;
else
return false;
}
function find(ev) {
var srcelem;
if(ev.target.hasAttribute('hoversrc')) // attached hoversrc to img, img catches mouseover
{
srcelem = ev.target;
}
else if(ev.target.parentNode.hasAttribute('hoversrc')) // unknown, for symmetry
{
srcelem = ev.target.parentNode;
}
else if(ev.target.parentNode.parentNode.hasAttribute('hoversrc')) // attached hoversrc to parent-span, sprites-img catches mouseover
{
srcelem = ev.target.parentNode.parentNode;
}
else
{
return; // where am I, return to mommy??
}
var id = srcelem.getAttribute('hoversrc').getIDFromImg();
var pic = srcelem.getAttribute('hoversrc');
if (pic) {
pic = pic.substr(0,pic.indexOf(id)-1)+'n'+pic.substr(pic.indexOf(id));
$('FB_PIC_EVO').innerHTML = '<img src="'+pic+'"/>';
}
}
function show(x, y, h, w) {
$('FB_PIC_EVO').style.top = window.scrollY+y-(.5*h)+'px';
while (parseInt($('FB_PIC_EVO').style.top,10)+h >= window.innerHeight+window.scrollY)
$('FB_PIC_EVO').style.top = parseInt($('FB_PIC_EVO').style.top,10)-30+'px';
while (parseInt($('FB_PIC_EVO').style.top,10) <= window.scrollY)
$('FB_PIC_EVO').style.top = 30+parseInt($('FB_PIC_EVO').style.top,10)+'px';
if (window.innerWidth-15 <= window.scrollX+x+w+25)
$('FB_PIC_EVO').style.left = x-w-25+window.scrollX+'px';
else
$('FB_PIC_EVO').style.left = (window.scrollX+x+25)+'px';
$('FB_PIC_EVO').style.visibility = 'visible';
}
// *********************
//
// Utility Functions
//
// *********************
function wait(c,f){ if (c()) f(); else window.setTimeout(function (){wait(c,f)},300,false);}
function $(e) { return document.getElementById(e); }
String.prototype.getIDFromImg = function(){return parseInt(this.substr(this.lastIndexOf('\/')+2,this.indexOf('_')-2-this.lastIndexOf('\/')),10);}
String.prototype.include = function(pattern){ return this.indexOf(pattern) > -1 }
init();
if(document.getElementById("q")){
document.getElementById("q").addEventListener("click", init, false);
}
document.addEventListener('keypress', keyHandler, true);
