Lightbox Nonsense

by lhamilton

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <body><a
    href="https://kph.neocities.org/img/ghost_fo_black.jpg"
    class="lytebox lytetip"
    data-lyte-options="tipStyle:info"
    data-tip="I made this in google sheets originally, for double-knitting. It tiles!"
    data-title="Ghostly Friends">
      <img src="https://kph.neocities.org/img/tiling-ghosts-small.png" />
     </a>
    <a
    href="https://kph.neocities.org/img/bob_bracers_fo.jpg"
    class="lytebox lytetip"
    data-lyte-options="tipStyle:info"
    data-tip="You have so much more flexibility of color block size working with beads than colored yarn, but it's fiddly."
    data-title="Bureau of Balance">
      <img src="https://kph.neocities.org/img/bob-small.png" />
     </a>
  </body>
</html>

CSS

#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99997; width: 100%; height: 100%; }
	#lbOverlay.black { background-color: #000000; }
	#lbOverlay.grey { background-color: #000000; }
	#lbOverlay.red { background-color: #330000; }
	#lbOverlay.green { background-color: #003300; }
	#lbOverlay.blue { background-color: #011D50; }
	#lbOverlay.gold { background-color: #666600; }
	#lbOverlay.orange { background-color: #FFBB48; }

#lbMain { position: absolute; left: 0; width: 100%; z-index: 99998; text-align: center; line-height: 0; display:-moz-inline-stack; }
#lbMain a img { border: 1px solid #ffffff; }

#lbOuterContainer {	position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
	#lbOuterContainer.black { border: 2px solid #CCCCCC; background-color: #000000; }
	#lbOuterContainer.grey { border: 2px solid #888888; }
	#lbOuterContainer.red { border: 2px solid #DD0000; }
	#lbOuterContainer.green { border: 2px solid #00B000; }
	#lbOuterContainer.blue { border: 2px solid #5F89D8; }
	#lbOuterContainer.gold { border: 2px solid #B0B000; }
	#lbOuterContainer.orange { border: 2px solid #D15211; }

#lbTopContainer, #lbBottomContainer { 
	font: 0.85em Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em; font-size: 0.9em;
	overflow: hidden; margin: 0 auto; padding: 0; position: relative; z-index: 14; display: none;
}
#lbTopContainer { overflow: hidden; margin-top: 5px; }
#lbTopContainer.black, #lbBottomContainer.black { background-color: #000000; }
#lbTopContainer.grey, #lbTopContainer.red, #lbTopContainer.green, #lbTopContainer.blue, #lbTopContainer.gold, #lbTopContainer.orange,
#lbBottomContainer.grey, #lbBottomContainer.red, #lbBottomContainer.green, #lbBottomContainer.blue, #lbBottomContainer.gold, #lbBottomContainer.orange {
	background-color: #ffffff;
}
	
#lbImage, #lbIframe { border: none; }
#lbImage.black, #lbIframe.black { border: 1px solid #CCCCCC; }
	#lbImage.grey, #lbIframe.grey { border: 1px...

JavaScript

//**************************************************************************************************/
//	Lytebox v5.5
//
//	 Author: Markus F. Hay
//  Website: http://lytebox.com  (http://dolem.com/lytebox)
//	   Date: January 26, 2012
//	License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
//**************************************************************************************************/
function Lytebox(bInitialize, aHttp) {
	/*** Language Configuration ***/
	
		// English - configure for your language or customize as needed. 
		// Note that these values will be seen by users when mousing over buttons.
		this.label = new Object();
		this.label['close']		= 'Close (Esc)';
		this.label['prev'] 		= 'Previous (\u2190)';	// Previous (left arrow)
		this.label['next'] 		= 'Next (\u2192)'; 		// Next (right arrow)
		this.label['play'] 		= 'Play (spacebar)';
		this.label['pause'] 	= 'Pause (spacebar)';
		this.label['print'] 	= 'Print';
		this.label['image'] 	= 'Image %1 of %2';		// %1 = active image, %2 = total images
		this.label['page'] 		= 'Page %1 of %2'; 		// %1 = active page, %2 = total pages
		
	
	/*** Configure Lytebox ***/
	
		this.theme   			= (typeof lyteboxTheme !== 'undefined') && /^(black|grey|red|green|blue|gold|orange)$/i.test(lyteboxTheme) ? lyteboxTheme : 'black'; // themes: black (default), grey, red, green, blue, gold, orange
		this.roundedBorder		= true; 		// controls whether or not the viewer uses rounded corners (false = square corners)
		this.innerBorder		= true;			// controls whether to show the inner border around image/html content
		this.outerBorder		= true;			// controls whether to show the outer grey (or theme) border
		this.resizeSpeed		= 5;			// controls the speed of the image resizing (1=slowest and 10=fastest)
		this.maxOpacity			= 80;			// higher opacity = darker overlay, lower opacity = lighter overlay
		this.borderSize			= 12;			// if you adjust the padding in the CSS, you will need to...