By Dave Smith
—
Last update
Jan 15, 2006
—
Installed
3,241 times.
// ==UserScript==// @name Lightboxer// @namespace http://dezro.com/userscripts// @description Moves image links to lightboxes. Neat, eh?// @include *// ==/UserScript==//Thanks, diveintogreasemonkey.com!function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style);}var overlayPNG ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABlCAYAAABUfC3PAAAABGdBTUEAAK/INwWK6QAAABl0"+"RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACpSURBVHja7NEBDQAACMOwg39P"+"WMMGCZ2EtZJMdKq2AIqgQBEUKIICRVAEBYqgQBEUKIIiKFAEBYqgQBEUQYEiKFAEBYqgCAoU"+"QYEiKFAERVCgCAoUQYEiKIICRVCgCAoUQREUKIICRVCgCIqgQBEUKIICRVAEBYqgQBEUKIIi"+"KFAEBYqgQBEUQYEiKFAEBYqgQLEAiqBAERQoggJFUAQFiqBAEZTHrQADAOi7AYkbZwBkAAAA"+"AElFTkSuQmCC";addGlobalStyle("#lightbox{ background-color:#eee; padding: 10px; border-bottom: 2px solid #666;" + "border-right: 2px solid #666;} #overlay{ background-image: url("+ overlayPNG +"); }");//-Altered lightbox.js START!// Totally removing all the IE crap./* Lightbox JS: Fullsize Image Overlays by Lokesh Dhakar - http://www.huddletogether.com For more information on this script, visit: http://huddletogether.com/projects/lightbox/ Table of Contents ----------------- Configuration Functions - getPageScroll() - getPageSize() - showLightbox() - hideLightbox() - initLightbox()*/// Configuration// If you would like to use a loading image, point to it in the next line, otherwise leave as-is.var loadingImage = "data:image/gif;base64,R0lGODlhfgAWANUiAFJSUi4uLjAwMElJSVBQUE9PT0xMTEhISCwsLDU1NUFBQUtLSy8vL0VF"+"RUZGRlNTU2pqZy8vLDs7N1paWj09PVNTTkJCPjExMTIyMjY2Njg4ODQ0NDk5OW5ubjo6OkBA"+"QC0tLTMzM////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"+"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBF"+"Mi4wAwEAAAAh+QQFAAAiACwAAAAAfgAWAAAG/8CQcEgsGo/IpHLJbDqfx450Sq1ar9isdsvt"+"er/Th7DzKZvP6LR6zW673/C43Dz+gBB4kH7P7/v/gIGCg4SFhn94CCBkdQgUDQ0OB5MKegqT"+"mAeVIBhGGHqdRZ+cnqClpKKmqahEo6GtqrCsGBcXDAiMIWQIkJIDvwMBAcDEwQEbyMnIwsrK"+"zM3Lx9Abz9DVzdfO0tbb2N0htBe4H42RBwML6QYCAgbu7+7sGfP08/L19Pf4Gfr4/fX/8gnY"+"Z28gwYAFMyRYuAGcuFxkQPhaYKCAxVoWM2aspaGjx44cP3oMKVIDSZEnP6YceaEkyJYuV770"+"qLDhJ4h2JlEsQKAnBv8MPYMG/cmhqNGiRI8aTaqUA1OlT49GXYqhKdKqVqdeNapBoZBF5HTl"+"RMezJwAhANKqTSvEg9u3btvCfSt3roe6c/HC1Us3hN24fv/yBeyBa4KGYOuAOLegLNsQa9cO"+"vhvY7uTLlfNm3ru571/Kn+UW1XA4RGKxi8maPQs58uPQnQkLjg16NuzbtnOPLp04AgQJqRsH"+"Ze36dW7LtDHjRr5c823DiH9HQK2z4lCgQq9bdYq1qVbu27+L7w6VvFTzVLl6NY1TIuOKFy9o"+"1CjTJMyS9fPfR7lfZX+WLtkXIEk1gXPaLuagow478MCDED8G7fPghBH6UyFAFwpEEIQbyrN0"+"UGm0jFNOgsAIU0yJ3WgzDTUpJpONiy1Gs+KLMk5DI4vKOPRQWLs8Yg4llmQCJCtDuHLKK0XG"+"kiSRQhi5CpJNKhklkwbOUsst7SVyyJZcdunll4jkgRMYZJZp5ploahHWA3O06eabcMb5BhR0"+"1mnnnXhCEQQAIfkEBQAAIgAsBAAEABwADgAABnhAxuWCCRkxoqRymVQcnlDFsLipbphY0WDL"+"3RJDm4Q4k2UazugzNZHRuMvLgnwuN7I1nDxcSej7+2AJeHkee0kAiImIgYMehYaKioyEj3uR"+"iZOEhiKXiyF3eRybf39rbW+GdHRfYWObaWlTYFabXV1CX0ebTlBPCkEAIfkEBQAAIgAsDgAE"+"ABwADgAABmlATGhIxIiOyORRcWg6FZuoNKqsigbYLDbD7XKtSoN4LNaYz2ZwssBusznwOFyN"+"JNjvdo9+r6cfAYCBgHx8fiKCgoR7hoiBin1+jYBycoZ4eGhohm5uXl6GZGRTU4ZaWkJEQ0Z+"+"TE5NCkEAIfkEBQAAIgAsGAAEABwADgAABmlATGhIxIiOyORRcWg6FZuoNKqsigbYLDbD7XKt"+"SoN4LNaYz2ZwssBusznwOFyNJNjvdo9+r6cfAYCBgHx8fiKCgoR7hoiBin1+jYBycoZ4eGho"+"hm5uXl6GZGRTU4ZaWkJEQ0Z+TE5NCkEAIfkEBQAAIgAsIgAEABwADgAABmlATGhIxIiOyORR"+"cWg6FZuoNKqsigbYLDbD7XKtSoN4LNaYz2ZwssBusznwOFyNJNjvdo9+r6cfAYCBgHx8fiKC"+"goR7hoiBin1+jYBycoZ4eGhohm5uXl6GZGRTU4ZaWkJEQ0Z+TE5NCkEAIfkEBQAAIgAsLAAE"+"ABwADgAABmlATGhIxIiOyORRcWg6FZuoNKqsigbYLDbD7XKtSoN4LNaYz2ZwssBusznwOFyN"+"JNjvdo9+r6cfAYCBgHx8fiKCgoR7hoiBin1+jYBycoZ4eGhohm5uXl6GZGRTU4ZaWkJEQ0Z+"+"TE5NCkEAIfkEBQAAIgAsNgAEABwADgAABmlATGhIxIiOyORRcWg6FZuoNKqsigbYLDbD7XKt"+"SoN4LNaYz2ZwssBusznwOFyNJNjvdo9+r6cfAYCBgHx8fiKCgoR7hoiBin1+jYBycoZ4eGho"+"hm5uXl6GZGRTU4ZaWkJEQ0Z+TE5NCkEAIfkEBQAAIgAsQAAEABwADgAABmlATGhIxIiOyORR"+"cWg6FZuoNKqsigbYLDbD7XKtSoN4LNaYz2ZwssBusznwOFyNJNjvdo9+r6cfAYCBgHx8fiKC"+"goR7hoiBin1+jYBycoZ4eGhohm5uXl6GZGRTU4ZaWkJEQ0Z+TE5NCkEAIfkEBQAAIgAsSgAE"+"ABwADgAABmlATGhIxIiOyORRcWg6FZuoNKqsigbYLDbD7XKtSoN4LNaYz2ZwssBusznwOFyN"+"JNjvdo9+r6cfAYCBgHx8fiKCgoR7hoiBin1+jYBycoZ4eGhohm5uXl6GZGRTU4ZaWkJEQ0Z+"+"TE5NCkEAIfkEBQAAIgAsVAAEABwADgAABmlATGhIxIiOyORRcWg6FZuoNKqsigbYLDbD7XKt"+"SoN4LNaYz2ZwssBusznwOFyNJNjvdo9+r6cfAYCBgHx8fiKCgoR7hoiBin1+jYBycoZ4eGho"+"hm5uXl6GZGRTU4ZaWkJEQ0Z+TE5NCkEAIfkEBQAAIgAsXgAEABwADgAABnxATGhIxIiOyORR"+"cWg6Gg3KZkqdKq+igXZweDYy4DAYqzQsztynZs1ek5OFuDnNqdvrbyRhXzA3PYCBgHlHAHsE"+"BQtcgoKEIgCGiIoHjIGOkHyTlYOEkZJcd3eOh30LTW1tjnGlaWJijmZoXQ1VVY5baVBCRENG"+"hExOUBRBACH5BAUAACIALAQABAB6AA4AAAavQEqj4TgYFaKkcslsOp/QqHRKFWFC2Cxm+jgM"+"i4PwoEoum8/TjXqtnk684IXcgK7b79GMfq93H+IGBYJ4hIV1GoiJiH5GC4EEkIaSk1IclpeW"+"jAMLBZAEAJShokkepaalmpyQAKCjroanp6mdn62vt3axprOetri/ZbqoUhUWjY+RwMpVmJh+"+"gIIFy9NSiop+RAebc9TdTnx82NliY97mSWxsfkLZR+fnV1lYW1JdQQA7";// getPageScroll()// Returns array with x,y page scroll values.// Core code from - quirksmode.org//function getPageScroll(){ var yScroll; yScroll = self.pageYOffset; arrayPageScroll = new Array('',yScroll) return arrayPageScroll;}//// getPageSize()// Returns array with page width, height and window width, height// Core code from - quirksmode.org//function getPageSize(){ var xScroll, yScroll; xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;// yScroll = document.body.scrollHeight; var windowWidth, windowHeight; windowWidth = self.innerWidth; windowHeight = self.innerHeight; // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize;}//// showLightbox()// Preloads images. Pleaces new image in lightbox then centers and displays.//function showLightbox(objLink){ // prep objects var objOverlay = document.getElementById('overlay'); var objLightbox = document.getElementById('lightbox'); var objImage = document.getElementById('lightboxImage'); var objLoadingImage = document.getElementById('loadingImage'); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); // center loadingImage if it exists if (objLoadingImage) { objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px'); objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px'); objLoadingImage.style.display = 'block'; } // set height of Overlay to take up whole page and show objOverlay.style.height = (arrayPageSize[1] + 'px'); objOverlay.style.display = 'block'; // preload image imgPreload = document.createElement("img"); imgPreload.src = objLink.href; imgPreload.addEventListener('load', function(){ objImage.src = objLink.href;
objLightbox.childNodes[0].href = objLink.href;
var dwidth = imgPreload.width;
var dheight = imgPreload.height;
if (arrayPageSize[2] < arrayPageSize[3]) {
dwidth = Math.min(arrayPageSize[2]-50, dwidth);
dheight = (dwidth/imgPreload.width)*dheight;
}
else {
dheight = Math.min(arrayPageSize[3]-50, dheight);
dwidth = (dheight/imgPreload.height)*dwidth;
}
objImage.width = dwidth;
objImage.height = dheight;
// center lightbox
var dtop = arrayPageScroll[1] + ((arrayPageSize[3] - 25 - dheight) / 2);
var dleft = ((arrayPageSize[0] - 40 - dwidth) / 2);
dtop = Math.max(dtop, arrayPageScroll[1]);
dleft = Math.max(dleft, 0);
objLightbox.style.top = dtop + 'px';
objLightbox.style.left = dleft + 'px'; objLightbox.style.display = 'block'; return false; }, true);}//// hideLightbox()//function hideLightbox(){ // get objects objOverlay = document.getElementById('overlay'); objLightbox = document.getElementById('lightbox'); // hide lightbox and overlay objOverlay.style.display = 'none'; objLightbox.style.display = 'none';}//// initLightbox()// Function runs on window load, going through link tags looking for rel="lightbox".// These links receive onclick events that enable the lightbox display for their targets.// The function also inserts html markup at the top of the page which will be used as a// container for the overlay pattern and the inline image.//function initLightbox(){ var anchors = document.getElementsByTagName("a");
// loop through all anchor tags for (var i=0; i<anchors.length; i++){ var anchor = anchors[i];
if ( anchor.hasAttribute("href") ) {
if ( anchor.getAttribute("rel") == "lightbox" ) break; var href = anchor.getAttribute("href"); var extension = href.substring(href.lastIndexOf('.')+1, href.length).toLowerCase();
if ( (extension == "jpg") || (extension == "jpeg") || extension == "gif" || extension == "png" ) anchor.addEventListener('click', function(event) {
if (event.metaKey || event.shiftKey ||
event.altKey || event.ctrlKey) return true;
showLightbox(this);
event.stopPropagation();
event.preventDefault();
return false;
}, true);
} }
// this code inserts html at the top of the page that looks like this: // // <div id="overlay"><a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a></div> // <div id="lightbox"> // <a href="#" onclick="hideLightbox(); return false;"><img /></a> // </div> var objBody = document.getElementsByTagName("body").item(0); // create overlay div and hardcode some functional styles (aesthetic styles are in CSS file) var objOverlay = document.createElement("div"); objOverlay.setAttribute('id','overlay'); objOverlay.style.display = 'none'; objOverlay.style.position = 'absolute'; objOverlay.style.top = '0'; objOverlay.style.left = '0'; objOverlay.style.zIndex = '90'; objOverlay.style.width = '100%'; objBody.insertBefore(objOverlay, objBody.firstChild); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll();
// preload and create loader image var imgPreloader = document.createElement("img");
imgPreloader.src = loadingImage; // if loader image found, create link to hide lightbox and create loadingimage imgPreloader.addEventListener('load', function(){ var objLoadingImageLink = document.createElement("a"); objLoadingImageLink.setAttribute('href','#'); objLoadingImageLink.addEventListener('click', function (event){
hideLightbox();
if (event.metaKey || event.shiftKey ||
event.altKey || event.ctrlKey) return true;
event.stopPropagation(); event.preventDefault();
return false;
}, true); objOverlay.appendChild(objLoadingImageLink); var objLoadingImage = document.createElement("img"); objLoadingImage.src = loadingImage; objLoadingImage.setAttribute('id','loadingImage'); objLoadingImage.style.position = 'absolute'; objLoadingImage.style.zIndex = '150'; objLoadingImageLink.appendChild(objLoadingImage); return false; }, true); // create lightbox div, same note about styles as above var objLightbox = document.createElement("div"); objLightbox.setAttribute('id','lightbox'); objLightbox.style.display = 'none'; objLightbox.style.position = 'absolute'; objLightbox.style.zIndex = '100'; objBody.insertBefore(objLightbox, objOverlay.nextSibling); // create link var objLink = document.createElement("a"); objLink.setAttribute('href','#'); objLink.addEventListener('click', function (event) {
hideLightbox();
if (event.metaKey || event.shiftKey ||
event.altKey || event.ctrlKey) return true;
event.stopPropagation(); event.preventDefault(); return false;}, true); objLightbox.appendChild(objLink); // create image var objImage = document.createElement("img"); objImage.setAttribute('id','lightboxImage'); objLink.appendChild(objImage);}
window.addEventListener('load', initLightbox, true); // run initLightbox onLoad
