Enlarges pictures when you roll over them
// ==UserScript==
// @name Facebookenlarge
// @namespace http://userscripts.org/users/23652
// @description Enlarges pictures when you roll over them
// @include http://*.facebook.com/*
// @include https://*.facebook.com/*
// @include http://facebook.com/*
// @include https://facebook.com/*
// @copyright JoeSimmons
// @version 1.0.7
// @license GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html
// @require https://greasyfork.org/scripts/1885-joesimmons-library/code/JoeSimmons'%20Library.js?version=4838
// @require https://greasyfork.org/scripts/2817-jsl-ajax-plugin/code/JSL%20-%20AJAX%20plugin.js?version=7911
// @grant GM_xmlHttpRequest
// ==/UserScript==
/* CHANGELOG ////////////////////////////////////////
1.0.7 (11/12/2014)
- fixed problem with some images not showing up at all
it was because the script couldn't differentiate between good responses and empty responses
some working images had an HTTP status of 0, and so did empty responses
I've now switched to a GET request and just check if the response text is empty or not
It not only preloads the image, but it can 100% check if the modified (large) image is working
1.0.6 (7/1/2014)
- fixed feature to not show enlarged thumbnail in fullscreen view or on album image hover
- fixed another small error with displaying some images
1.0.58 (6/26/2014)
- fixed an error with displaying some images (removed "v/t1.0-1/" out of url)
- made it not show a popup when the popup url is the same as the hovered url
this prevents a popup when hovering over a photo in full screen viewing mode
- added a small system to check if the enlarged url exists - if not, the user will
be shown the thumbnail in the popup (no enlargement because it's not possible)
instead of a small, empty, black box
1.0.57 (4/6/2014)
- fixed a problem with banners (on shared pages boxes) unable to be enlarged
1.0.56 (3/28/2014)
- fixed a problem with hovering over the "Photos" thumbnail on a page
- fixed a problem with some thumbnails on the "About" page
1.0.55 (3/22/2014)
- fixed an issue where hovering over someone's cover photo wouldn't show it
1.0.54 (3/20/2014)
- allowed enlarging of the banner picture above "Like Page" button
- adapted to the newest JSL
1.0.53 (9/13/2013)
- added more image compatibility
1.0.52 (9/12/2013)
- updated the 'ispic' RegExp
1.0.51
- fixed the 'ispic' RegExp. some pics weren't getting matched
1.0.50
- fixed a bug wherein the preview wouldn't always display in the correct corner
- fixed a bug wherein some pictures would display incorrectly
- updated HQ pic getting methods so that it shows the biggest picture possible (without ajax)
- added a method so that the preview would never overlap the mouse cursor
- now middle & right clicking don't hide the preview, only left-clicking
1.0.49
- fixed a regexp bug that would cause some pictures to not show
- added an anonymous function wrapper
- updated GM_addStyle check/function
*/ //////////////////////////////////////////////////
// By: Ian Williams and edited for Facebook by JoeSimmons
(function () { // anonymous function wrapper
'use strict';
var delay = 400,
coords = {
'x' : 0,
'y' : 0
},
size = /([\d_]{5,})([_\/])[qstna]([_\.])?/i,
ispic = /https?:\/\/((fbcdn-)?(profile|s?(photos|content)-\w|s(photos|content))((-\w+)+)?(\.ak|\.xx)?\.(fbcdn|akamaihd))\.net\/(.*\/)+.*([_\/][qstna]([\._])?)?.*(jpe?g|[tg]iff?|bmp|png)([?&][a-z]+=[a-zA-Z0-9]+)*/i,
rFbexternal = /&(cfs|upscale)(=[^&]+)?/g,
XbyX = /(v\/t[^\/]+\/)?(\w(\d+\.)+\d+\/)?\w\d{2,4}x\d{2,4}\//,
c = /\w(\d+\.)+\d+\//,
app = /www\/app_full_proxy\.php/,
show_d, // timeout holder
docFrag = document.createDocumentFragment();
// Debug by JoeSimmons
function debug() {
var d = document.getElementById('debugT'),
body = document.body,
strings = [], i, arg;
for(i = 0; i < arguments.length; i += 1) {
arg = arguments[i];
if ( (typeof arg === 'string' ? arg.trim() !== '' : arg ) ) {
strings.push(arg);
}
}
if (!d && body) {
d = document.createElement('pre');
d.id = 'debugT';
d.setAttribute('style', 'position: fixed; width: 97%; height: 20%; margin: 0 1% 6px 1%; padding: 5px; color: #000000; background: #E6F4FF; border: 3px double #0099FF; border-top: 0; z-index: 999999; scroll-y: auto; overflow: auto; white-space: pre-wrap;');
d.textContent = '[Debug Window 2.0 - Drag box to read fully - Copyright Joe Simmons \'CC BY-ND 3.0\']\n\n\n\n' + strings.join('\n\n');
d.addEventListener('dblclick', function (e) {e.target.style.display = 'none';}, false);
body.insertBefore(d, document.body.firstChild);
} else {
d.textContent += '\n\n--------------------------------------------------\n\n' + strings.join('\n\n');
}
if (d.style.display === 'none') d.style.display = 'block';
}
function primeThumbs() {
JSL('//a[@data-hovercard]/img/..').removeAttribute('data-hovercard');
}
// record mouse movement for positioning the preview images
function handleMove(event) {
coords.x = event.pageX - pageXOffset;
coords.y = event.pageY - pageYOffset;
event.stopPropagation();
}
function show(src) {
var pop = JSL('#picPop'),
x = coords.x,
y = coords.y,
isTop = y < (window.innerHeight / 2), // is mouse at top?
isLeft = x < ( (window.innerWidth - 15 /* 15 is the scrollbar width, approx. */) / 2), // is mouse at left?
maxWidth = (isLeft ? (window.innerWidth - x) : x) - 25, // keep the image at least 25px away from the cursor
vert, hori;
// make sure the preview doesn't show beyond the browser dimensions or overlap the mouse cursor
// this alone only limits the max-width, but coupled with the 4-corner system, it works
pop.css('max-width', maxWidth + 'px');
// set the preview's source url
pop.attribute('src', src);
// determine where the preview should display according to hovered image's position
// ideally, as far away from the hovered image as possible
vert = isTop ? 'bottom' : 'top'; // should the preview be on the top or bottom?
hori = isLeft ? 'right' : 'left'; // should the preview be on the left or right?
// reset the position of the hover box
pop.css('top', 'auto').css('right', 'auto').css('bottom', 'auto').css('left', 'auto');
// set the corner it will appear in
pop.css(vert, '0').css(hori, '0');
// show the preview
pop.show('block');
}
function handleMouseover(event) {
var t = event.target,
tag = t.tagName.toLowerCase(),
style = t.getAttribute('style'),
_class = t.className,
src = style && style.match(ispic) ? t.getAttribute('style') : unescape(t.src),
imgExist = JSL('./img | ./i | ./div/img | ./span/img', t),
odd = JSL('./../img | ./../i | ./../../div[@class="detail"]/i[@class="photo" and contains(@style, "background-image")]', t),
ohoe = JSL('./ancestor::a[( contains(@href, "oh=") and contains(@href, "oe=") ) or ( contains(@href, "oh%3D") and contains(@href, "oe%3D") )]', t),
snowlift = JSL('#photos_snowlift'),
goThroughWithShow, hqImg;
// checks if enlarged thumbnail's url exists before showing it
function checkSource(res) {
if (res.responseText === '') {
// if the enlarged thumbnail url has a problem, show the original thumbnail instead
hidePicPop();
show_d = window.setTimeout(show, 200, this);
}
}
// sometimes the hovered element can be a parent element of the actual thumbnail element
if (imgExist.exists) {
t = imgExist[0];
src = unescape(t.src);
tag = t.tagName.toLowerCase();
if ( src.indexOf('fbexternal') !== -1 && src.match(ispic) ) {
src = src.match(ispic)[0].replace(rFbexternal, '');
}
}
if (ohoe.exists) {
src = decodeURIComponent( ohoe.attribute('href') ).split('&src=')[1].split('&smallsrc=')[0];
}
// support for elements that when hovered over, aren't the image itself
// or it's an element where it displays the image by css' background-image
if ( tag === 'div' && (['coverBorder', 'mat'].indexOf(_class) !== -1) ) {
if (odd.exists) {
t = odd[0];
tag = t.tagName.toLowerCase();
style = t.getAttribute('style');
if (tag === 'i' && typeof style === 'string' && style.indexOf('background-image') !== -1) {
src = style.match(ispic)[0];
} else {
src = unescape(t.src);
}
}
}
if ( ['img', 'i'].indexOf(tag) !== -1 && src.match(ispic) ) {
if ( tag === 'img' && src.match(app) ) {
src = src.match(ispic)[0];
}
hqImg = ohoe.exists ? src.replace(XbyX, '') : hq(t, tag, src);
goThroughWithShow = true;
// debug( src.match(ispic) != null ? 'src is recognized\norig url: ' + src + '\nhq url: ' + hqImg : 'src is NOT recognized' );
} else if ( tag === 'div' && t.className == 'UIMediaItem_PhotoFrame' && t.parentNode.parentNode.parentNode.getAttribute('style').match(ispic) ) {
hqImg = hq(t, tag);
goThroughWithShow = true;
}
// make sure we don't show enlarged thumbnails for album or fullscreen view images
if (t.className.indexOf('spotlight') !== -1 || JSL(t).parent('#imagestage').exists) {
goThroughWithShow = false;
}
// if we chose to show the image, let's go through that process
if (goThroughWithShow === true) {
// show the image if it's indeed a facebook thumbnail
// and the enlarged url is not the same as the thumbnail url
show_d = window.setTimeout(show, delay, hqImg);
// let's send a quick request to see if this is a valid image
// if not, we just show the original thumbnail
// ps: this not only preloads the image, but it's a sure-fire way
// of knowing if it's a false positive or not (e.g., status==0 but image displays fine)
JSL.ajax(hqImg, {
context : src,
method : 'GET',
onload : checkSource,
onerror : checkSource
});
}
event.stopPropagation();
}
function hidePicPop(event) {
var picPop = JSL('#picPop');
// don't hide the enlarged picture if a middle or right click happens
if (typeof event !== 'undefined' && typeof event.which === 'number' && event.which > 1) { return; }
window.clearTimeout(show_d);
picPop.hide();
picPop.removeAttribute('src');
if (typeof event !== 'undefined') {
event.stopPropagation();
}
}
function hq(e, tag, src) {
var r = '', style = e.getAttribute('style');
switch (tag) {
case 'div': {
r = e.parentNode.parentNode.parentNode.getAttribute('style').match(ispic)[0];
break;
}
case 'img': case 'i': {
if ( typeof style === 'string' && style.match(ispic) ) {
r = style.match(ispic)[0];
} else if (typeof src === 'string') {
r = src;
} else {
r = e.src;
}
break;
}
}
return r.replace(XbyX, '').replace(c, '').replace(size, '$1$2n$3');
}
function info(i) {
var info = JSL('#infoBox');
i = (i + '').replace(/[\n\r]/g, '\n<br />\n');
info.show('block').prop('innerHTML', i);
}
// Make sure the page is not in a frame
if (window.self !== window.top) { return; }
JSL.addStyle('' +
'#picPop { ' +
'z-index: 99999; ' +
'position: fixed; ' +
'background: #000000; '+
'overflow: hidden; ' +
'border: 2px solid #000000; ' +
'outline: 2px solid #FFFFFF; ' +
'max-height: 98%; ' +
'}\n\n' +
'.HovercardOverlay, ._5uek, ._7m4, ._8xh, ._3aml, #fbProfileCover .coverBorder { ' +
'display: none !important; ' +
'}' +
'');
// add the info box
docFrag.appendChild( JSL.create('span', {id: 'infoBox', style: 'border: 1px solid #666666; border-radius: 6px; position: fixed; top: 4px; left: 45%; font-size: 10pt; font-family: sans-serif, arial; background: #EEEEEE; color: #000000; padding: 10px; z-index: 999999; overflow: auto; display: none;'}) );
// add the hovering bigger image holder
docFrag.appendChild( JSL.create('img', {id: 'picPop', style: 'display: none;', 'class':'hover_img_thumb'}) );
document.body.appendChild(docFrag);
// keep tabs on where the mouse is so we never problems with the positioning of the preview
window.addEventListener('mousemove', handleMove, false);
// hover over a thumbnail
window.addEventListener('mouseover', handleMouseover, false);
// hide the preview when moving the mouse off a thumbnail
window.addEventListener('mouseout', hidePicPop, false);
// hide the preview when left-clicking
window.addEventListener('click', hidePicPop, false);
primeThumbs();
JSL.setInterval(primeThumbs, 1000);
}());