437 lines
12 KiB
JavaScript
437 lines
12 KiB
JavaScript
|
/*
|
||
|
Lightbox JS: Fullsize Image Overlays
|
||
|
by Lokesh Dhakar - http://www.huddletogether.com
|
||
|
|
||
|
For more information on this script, visit:
|
||
|
http://huddletogether.com/projects/lightbox/
|
||
|
|
||
|
Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
|
||
|
(basically, do anything you want, just leave my name and link)
|
||
|
|
||
|
Table of Contents
|
||
|
-----------------
|
||
|
Configuration
|
||
|
|
||
|
Functions
|
||
|
- getPageScroll()
|
||
|
- getPageSize()
|
||
|
- pause()
|
||
|
- getKey()
|
||
|
- listenKey()
|
||
|
- showLightbox()
|
||
|
- hideLightbox()
|
||
|
- initLightbox()
|
||
|
- addLoadEvent()
|
||
|
|
||
|
Function Calls
|
||
|
- addLoadEvent(initLightbox)
|
||
|
|
||
|
*/
|
||
|
|
||
|
|
||
|
|
||
|
//
|
||
|
// Configuration
|
||
|
//
|
||
|
|
||
|
// If you would like to use a custom loading image or close button reference them in the next two lines.
|
||
|
var loadingImage = lightbox_path + '/loading.gif';
|
||
|
var closeButton = lightbox_path + '/close.gif';
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
//
|
||
|
// getPageScroll()
|
||
|
// Returns array with x,y page scroll values.
|
||
|
// Core code from - quirksmode.org
|
||
|
//
|
||
|
function getPageScroll(){
|
||
|
|
||
|
var yScroll;
|
||
|
|
||
|
if (self.pageYOffset) {
|
||
|
yScroll = self.pageYOffset;
|
||
|
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
|
||
|
yScroll = document.documentElement.scrollTop;
|
||
|
} else if (document.body) {// all other Explorers
|
||
|
yScroll = document.body.scrollTop;
|
||
|
}
|
||
|
|
||
|
arrayPageScroll = new Array('',yScroll)
|
||
|
return arrayPageScroll;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
//
|
||
|
// getPageSize()
|
||
|
// Returns array with page width, height and window width, height
|
||
|
// Core code from - quirksmode.org
|
||
|
// Edit for Firefox by pHaez
|
||
|
//
|
||
|
function getPageSize(){
|
||
|
|
||
|
var xScroll, yScroll;
|
||
|
|
||
|
if (window.innerHeight && window.scrollMaxY) {
|
||
|
xScroll = document.body.scrollWidth;
|
||
|
yScroll = window.innerHeight + window.scrollMaxY;
|
||
|
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
|
||
|
xScroll = document.body.scrollWidth;
|
||
|
yScroll = document.body.scrollHeight;
|
||
|
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
||
|
xScroll = document.body.offsetWidth;
|
||
|
yScroll = document.body.offsetHeight;
|
||
|
}
|
||
|
|
||
|
var windowWidth, windowHeight;
|
||
|
if (self.innerHeight) { // all except Explorer
|
||
|
windowWidth = self.innerWidth;
|
||
|
windowHeight = self.innerHeight;
|
||
|
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
||
|
windowWidth = document.documentElement.clientWidth;
|
||
|
windowHeight = document.documentElement.clientHeight;
|
||
|
} else if (document.body) { // other Explorers
|
||
|
windowWidth = document.body.clientWidth;
|
||
|
windowHeight = document.body.clientHeight;
|
||
|
}
|
||
|
|
||
|
// 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;
|
||
|
}
|
||
|
|
||
|
|
||
|
//
|
||
|
// pause(numberMillis)
|
||
|
// Pauses code execution for specified time. Uses busy code, not good.
|
||
|
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
|
||
|
//
|
||
|
function pause(numberMillis) {
|
||
|
var now = new Date();
|
||
|
var exitTime = now.getTime() + numberMillis;
|
||
|
while (true) {
|
||
|
now = new Date();
|
||
|
if (now.getTime() > exitTime)
|
||
|
return;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
//
|
||
|
// getKey(key)
|
||
|
// Gets keycode. If 'x' is pressed then it hides the lightbox.
|
||
|
//
|
||
|
|
||
|
function getKey(e){
|
||
|
if (e == null) { // ie
|
||
|
keycode = event.keyCode;
|
||
|
} else { // mozilla
|
||
|
keycode = e.which;
|
||
|
}
|
||
|
key = String.fromCharCode(keycode).toLowerCase();
|
||
|
|
||
|
if(key == 'x'){ hideLightbox(); }
|
||
|
}
|
||
|
|
||
|
|
||
|
//
|
||
|
// listenKey()
|
||
|
//
|
||
|
function listenKey () { document.onkeypress = getKey; }
|
||
|
|
||
|
|
||
|
//
|
||
|
// 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 objCaption = document.getElementById('lightboxCaption');
|
||
|
var objImage = document.getElementById('lightboxImage');
|
||
|
var objLoadingImage = document.getElementById('loadingImage');
|
||
|
var objLightboxDetails = document.getElementById('lightboxDetails');
|
||
|
|
||
|
|
||
|
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 = new Image();
|
||
|
|
||
|
imgPreload.onload=function(){
|
||
|
objImage.src = objLink.href;
|
||
|
|
||
|
// center lightbox and make sure that the top and left values are not negative
|
||
|
// and the image placed outside the viewport
|
||
|
var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
|
||
|
var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
|
||
|
|
||
|
objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
|
||
|
objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";
|
||
|
|
||
|
|
||
|
objLightboxDetails.style.width = imgPreload.width + 'px';
|
||
|
|
||
|
if(objLink.getAttribute('title')){
|
||
|
objCaption.style.display = 'block';
|
||
|
//objCaption.style.width = imgPreload.width + 'px';
|
||
|
objCaption.innerHTML = objLink.getAttribute('title');
|
||
|
} else {
|
||
|
objCaption.style.display = 'none';
|
||
|
}
|
||
|
|
||
|
// A small pause between the image loading and displaying is required with IE,
|
||
|
// this prevents the previous image displaying for a short burst causing flicker.
|
||
|
if (navigator.appVersion.indexOf("MSIE")!=-1){
|
||
|
pause(250);
|
||
|
}
|
||
|
|
||
|
if (objLoadingImage) { objLoadingImage.style.display = 'none'; }
|
||
|
|
||
|
// Hide select boxes as they will 'peek' through the image in IE
|
||
|
selects = document.getElementsByTagName("select");
|
||
|
for (i = 0; i != selects.length; i++) {
|
||
|
selects[i].style.visibility = "hidden";
|
||
|
}
|
||
|
|
||
|
|
||
|
objLightbox.style.display = 'block';
|
||
|
|
||
|
// After image is loaded, update the overlay height as the new image might have
|
||
|
// increased the overall page height.
|
||
|
arrayPageSize = getPageSize();
|
||
|
objOverlay.style.height = (arrayPageSize[1] + 'px');
|
||
|
|
||
|
// Check for 'x' keypress
|
||
|
listenKey();
|
||
|
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
imgPreload.src = objLink.href;
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
//
|
||
|
// 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';
|
||
|
|
||
|
// make select boxes visible
|
||
|
selects = document.getElementsByTagName("select");
|
||
|
for (i = 0; i != selects.length; i++) {
|
||
|
selects[i].style.visibility = "visible";
|
||
|
}
|
||
|
|
||
|
// disable keypress listener
|
||
|
document.onkeypress = '';
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
//
|
||
|
// 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()
|
||
|
{
|
||
|
|
||
|
if (!document.getElementsByTagName){ return; }
|
||
|
var anchors = document.getElementsByTagName("a");
|
||
|
|
||
|
// loop through all anchor tags
|
||
|
for (var i=0; i<anchors.length; i++){
|
||
|
var anchor = anchors[i];
|
||
|
|
||
|
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
|
||
|
anchor.onclick = function () {showLightbox(this); return false;}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// the rest of 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;" title="Click anywhere to close image">
|
||
|
// <img id="closeButton" />
|
||
|
// <img id="lightboxImage" />
|
||
|
// </a>
|
||
|
// <div id="lightboxDetails">
|
||
|
// <div id="lightboxCaption"></div>
|
||
|
// <div id="keyboardMsg"></div>
|
||
|
// </div>
|
||
|
// </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.onclick = function () {hideLightbox(); return false;}
|
||
|
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 = new Image();
|
||
|
|
||
|
// if loader image found, create link to hide lightbox and create loadingimage
|
||
|
imgPreloader.onload=function(){
|
||
|
|
||
|
var objLoadingImageLink = document.createElement("a");
|
||
|
objLoadingImageLink.setAttribute('href','#');
|
||
|
objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
|
||
|
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);
|
||
|
|
||
|
imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs
|
||
|
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
imgPreloader.src = loadingImage;
|
||
|
|
||
|
// 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.setAttribute('title','Click to close');
|
||
|
objLink.onclick = function () {hideLightbox(); return false;}
|
||
|
objLightbox.appendChild(objLink);
|
||
|
|
||
|
// preload and create close button image
|
||
|
var imgPreloadCloseButton = new Image();
|
||
|
|
||
|
// if close button image found,
|
||
|
imgPreloadCloseButton.onload=function(){
|
||
|
|
||
|
var objCloseButton = document.createElement("img");
|
||
|
objCloseButton.src = closeButton;
|
||
|
objCloseButton.setAttribute('id','closeButton');
|
||
|
objCloseButton.style.position = 'absolute';
|
||
|
objCloseButton.style.zIndex = '200';
|
||
|
objLink.appendChild(objCloseButton);
|
||
|
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
imgPreloadCloseButton.src = closeButton;
|
||
|
|
||
|
// create image
|
||
|
var objImage = document.createElement("img");
|
||
|
objImage.setAttribute('id','lightboxImage');
|
||
|
objLink.appendChild(objImage);
|
||
|
|
||
|
// create details div, a container for the caption and keyboard message
|
||
|
var objLightboxDetails = document.createElement("div");
|
||
|
objLightboxDetails.setAttribute('id','lightboxDetails');
|
||
|
objLightbox.appendChild(objLightboxDetails);
|
||
|
|
||
|
// create caption
|
||
|
var objCaption = document.createElement("div");
|
||
|
objCaption.setAttribute('id','lightboxCaption');
|
||
|
objCaption.style.display = 'none';
|
||
|
objLightboxDetails.appendChild(objCaption);
|
||
|
|
||
|
// create keyboard message
|
||
|
var objKeyboardMsg = document.createElement("div");
|
||
|
objKeyboardMsg.setAttribute('id','keyboardMsg');
|
||
|
objKeyboardMsg.innerHTML = 'press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close';
|
||
|
objLightboxDetails.appendChild(objKeyboardMsg);
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
//
|
||
|
// addLoadEvent()
|
||
|
// Adds event to window.onload without overwriting currently assigned onload functions.
|
||
|
// Function found at Simon Willison's weblog - http://simon.incutio.com/
|
||
|
//
|
||
|
function addLoadEvent(func)
|
||
|
{
|
||
|
var oldonload = window.onload;
|
||
|
if (typeof window.onload != 'function'){
|
||
|
window.onload = func;
|
||
|
} else {
|
||
|
window.onload = function(){
|
||
|
oldonload();
|
||
|
func();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
addLoadEvent(initLightbox); // run initLightbox onLoad
|