//**************************************************************************************************/
// Lytebox v5.1
//
// Author: Markus F. Hay
// Website: http://dolem.com/lytebox
// Date: September 6, 2011
// License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
//**************************************************************************************************/
//***************************************************************************/
// Lytebox constructor
//
// @param string sTheme grey|black|red|green|blue|gold
// @param int iNav 1|2|3
// @param boolean bSlide
// @param boolean bBorder
//***************************************************************************/
function Lytebox(sTheme, iNav, bSlide, bBorder) {
// Below are the default settings that the lytebox viewer will inherit (look and feel, behavior) when displaying content. Member
// properties that start with "__" can be manipulated via the data-lyte-options attribute (i.e. data-lyte-options="theme:red").
/*** 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'; // Image x of x
this.label['page'] = 'Page'; // Page x of x
/*** Configure Lytebox ***/
this.theme = sTheme ? sTheme : 'black'; // themes: black (default), grey, red, green, blue, gold, orange
this.innerBorder = bBorder == undefined ? true : bBorder; // controls whether to show the inner border around image/html content
this.outerBorder = bBorder == undefined ? true : bBorder; // 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 update this variable -- otherwise, leave this alone...
this.appendQS = false; // if true, will append request_from=lytebox to the QS. Use this with caution as it may cause pages to not render
this.fixedPosition = true; // if true, viewer will remain in a fixed position, otherwise page scrolling will be allowed
this.__hideObjects = true; // controls whether or not objects (such as Flash, Java, etc.) should be hidden when the viewer opens
this.__autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions
this.__doAnimations = true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.
this.__forceCloseClick = false; // if true, users are forced to click on the "Close" button when viewing content
this.__refreshPage = false; // force page refresh after closing Lytebox
this.__showPrint = false; // true to show print button, false to hide
this.__navType = iNav ? iNav : 3; // 1 = "Prev/Next" buttons on top left and left
// 2 = "Prev/Next" buttons in navigation bar
// 3 = navType_1 + navType_2 (show both)
// These two options control the position of the title/counter and navigation buttons. Note that for mobile devices,
// the title is displayed on top and the navigation on the bottom. This is due to the view area being limited.
// You can customize this for non-mobile devices by changing the 2nd condition (: false) to true (: true)
this.__navTop = this.isMobile() ? false : false; // true to show the buttons on the top right, false to show them on bottom right (default)
this.__titleTop = this.isMobile() ? true : false; // true to show the title on the top left, false to show it on the bottom left (default)
/*** Configure Lyteframe (html viewer) Options ***/
this.__width = '80%'; // default width of content viewer
this.__height = '80%'; // default height of content viewer
this.__scrollbars = 'auto'; // controls the content viewers scollbars -- options are auto|yes|no
this.__loopPlayback = false; // controls whether or not embedded media is looped (swf, avi, mov, etc.)
this.__autoPlay = true; // controls whether or not to autoplay embedded media
/*** Configure Lyteshow (slideshow) Options ***/
this.__slideInterval = 4000; // change value (milliseconds) to increase/decrease the time between "slides"
this.__showNavigation = bSlide ? bSlide : false; // true to display Next/Prev buttons/text during slideshow, false to hide
this.__showClose = true; // true to display the Close button, false to hide
this.__showDetails = true; // true to display image details (caption, count), false to hide
this.__showPlayPause = true; // true to display pause/play buttons next to close button, false to hide
this.__autoEnd = true; // true to automatically close Lytebox after the last image is reached, false to keep open
this.__pauseOnNextClick = false; // true to pause the slideshow when the "Next" button is clicked
this.__pauseOnPrevClick = true; // true to pause the slideshow when the "Prev" button is clicked
this.__loopSlideshow = false; // true to continuously loop through slides, false otherwise
/*** Configure Event Callbacks ***/
this.__beforeStart = ''; // function to call before the viewer starts
this.__afterStart = ''; // function to call after the viewer starts
this.__beforeEnd = ''; // function to call before the viewer ends (after close click)
this.__afterEnd = ''; // function to call after the viewer ends
/*** Configure Lytetip (tooltips) Options ***/
this.changeTipCursor = true; // true to change the cursor to 'help', false to leave default (inhereted)
this.tipStyle = 'classic'; // sets the default tip style if none is specified via data-lyte-options. Possible values are classic, info, help, warning, error
this.tipRelative = true; // if true, tips will be positioned relative to the element. if false, tips will be absolutely positioned on the page.
// if you are having issues with tooltips not being properly positioned, then set this to false
// Hash for navType - by A.Popov http://s3blog.org
this.navTypeHash = new Object();
this.navTypeHash['Hover_by_type_1'] = true;
this.navTypeHash['Display_by_type_1'] = false;
this.navTypeHash['Hover_by_type_2'] = false;
this.navTypeHash['Display_by_type_2'] = true;
this.navTypeHash['Hover_by_type_3'] = true;
this.navTypeHash['Display_by_type_3'] = true;
// MEMBER VARIABLES USED TO CLEAR SETTIMEOUTS
this.resizeWTimerArray = new Array();
this.resizeWTimerCount = 0;
this.resizeHTimerArray = new Array();
this.resizeHTimerCount = 0;
this.showContentTimerArray = new Array();
this.showContentTimerCount = 0;
this.overlayTimerArray = new Array();
this.overlayTimerCount = 0;
this.imageTimerArray = new Array();
this.imageTimerCount = 0;
this.timerIDArray = new Array();
this.timerIDCount = 0;
this.slideshowIDArray = new Array();
this.slideshowIDCount = 0;
// GLOBAL
this.imageArray = new Array();
this.activeImage = null;
this.slideArray = new Array();
this.activeSlide = null;
this.frameArray = new Array();
this.activeFrame = null;
// Check for iFrame environment (will set this.isFrame and this.doc member variables)
this.checkFrame();
// Set to false by default
this.isSlideshow = false;
this.isLyteframe = false;
//this.tipSet = false;
this.tipsSet = sTheme ? true : false;
// We need to know the certain browser versions (or if it's IE) since IE is "special" and requires spoon feeding.
this.ieVersion = -1;
this.ie = this.chrome = this.ff = false;
this.setBrowserVersion();
// Determine the QuickTime version (so we don't make multiple calls).
this.qtVersion = this.getQuicktimeVersion();
// Need to set the appropriate class attribute to query (because of IE).
this.classAttribute = (((this.ie && this.doc.compatMode == 'BackCompat') || (this.ie && this.ieVersion <= 7)) ? 'className' : 'class');
this.classAttribute = (this.ie && (document.documentMode == 8 || document.documentMode == 9)) ? 'class' : this.classAttribute; // IE8 & IE9 in standards mode
// (07/20/2011) Save last func for body.onscroll - fixed by A.Popov http://s3blog.org
this.bodyOnscroll = document.body.onscroll;
// Set up the resizeSpeed and resizeDuration.
if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }
if(this.resizeSpeed < 1) { this.resizeSpeed = 1; }
this.resizeDuration = (11 - this.resizeSpeed) * (this.ie && this.ieVersion > 8 ? 20 : ((this.ie && this.ieVersion <= 8) ? 2 : (this.chrome ? 4 : 7)));
// Now initialize the DOM.
this.initialize();
} // Lytebox()
//********************************************************************************************/
// setBrowserVersion() - Determines browser vendor and in the case of IE, also the version.
//********************************************************************************************/
Lytebox.prototype.setBrowserVersion = function() {
this.chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
this.ff = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
this.ieVersion = parseFloat( RegExp.$1 );
}
this.ie = (this.ieVersion > -1 ? true : false);
}
}; // setBrowserVersion()
//********************************************************************************************/
// initialize() - Constructor runs on completion of the DOM loading. Prepares the
// lytebox/lyteshow links on the page and inserts html at the bottom of the page which
// is used to display the shadow overlay and the image container.
//********************************************************************************************/
Lytebox.prototype.initialize = function() {
// Make a call to get all the images on the page.
this.updateLyteboxItems();
// The rest of this code inserts html at the bottom of the page that looks similar to this:
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var oBody = this.doc.getElementsByTagName('body').item(0);
var oLauncher = this.doc.createElement('a');
oLauncher.setAttribute('id','lbLauncher');
oLauncher.style.display = 'none';
oBody.appendChild(oLauncher);
if (this.doc.getElementById('lbOverlay')) {
oBody.removeChild(this.doc.getElementById('lbOverlay'));
oBody.removeChild(this.doc.getElementById('lbMain'));
}
var oOverlay = this.doc.createElement('div');
oOverlay.setAttribute('id','lbOverlay');
oOverlay.setAttribute(this.classAttribute, this.theme);
// Change overlay position to absolute for IE6 and below, and IE7 with no DOCTYPE, since a fixed position screws everything up for these.
if (this.ie && (this.ieVersion <= 6 || (this.ieVersion <= 9 && this.doc.compatMode == 'BackCompat'))) {
oOverlay.style.position = 'absolute';
}
oOverlay.style.display = 'none';
oBody.appendChild(oOverlay);
var oLytebox = this.doc.createElement('div');
oLytebox.setAttribute('id','lbMain');
oLytebox.style.display = 'none';
oBody.appendChild(oLytebox);
var oOuterContainer = this.doc.createElement('div');
oOuterContainer.setAttribute('id','lbOuterContainer');
oOuterContainer.setAttribute(this.classAttribute, this.theme);
oLytebox.appendChild(oOuterContainer);
// TOP CONTAINER (title and close button, if activated)
var oTopContainer = this.doc.createElement('div');
oTopContainer.setAttribute('id','lbTopContainer');
oTopContainer.setAttribute(this.classAttribute, this.theme);
oOuterContainer.appendChild(oTopContainer);
var oTopData = this.doc.createElement('div');
oTopData.setAttribute('id','lbTopData');
oTopData.setAttribute(this.classAttribute, this.theme);
oTopContainer.appendChild(oTopData);
var oTitleTop = this.doc.createElement('span');
oTitleTop.setAttribute('id','lbTitleTop');
oTopData.appendChild(oTitleTop);
var oNumTop = this.doc.createElement('span');
oNumTop.setAttribute('id','lbNumTop');
oTopData.appendChild(oNumTop);
var oTopNav = this.doc.createElement('div');
oTopNav.setAttribute('id','lbTopNav');
oTopContainer.appendChild(oTopNav);
var oCloseTop = this.doc.createElement('a');
oCloseTop.setAttribute('id','lbCloseTop');
oCloseTop.setAttribute('title', this.label['close']);
oCloseTop.setAttribute(this.classAttribute, this.theme);
oCloseTop.setAttribute('href','javascript:void(0)');
oTopNav.appendChild(oCloseTop);
var oPrintTop = this.doc.createElement('a');
oPrintTop.setAttribute('id','lbPrintTop')
oPrintTop.setAttribute('title', this.label['print']);
oPrintTop.setAttribute(this.classAttribute, this.theme);
oPrintTop.setAttribute('href','javascript:void(0)');
oTopNav.appendChild(oPrintTop);
var oNextTop = this.doc.createElement('a');
oNextTop.setAttribute('id','lbNextTop');
oNextTop.setAttribute('title', this.label['next']);
oNextTop.setAttribute(this.classAttribute, this.theme);
oNextTop.setAttribute('href','javascript:void(0)');
oTopNav.appendChild(oNextTop);
var oPauseTop = this.doc.createElement('a');
oPauseTop.setAttribute('id','lbPauseTop');
oPauseTop.setAttribute('title', this.label['pause']);
oPauseTop.setAttribute(this.classAttribute, this.theme);
oPauseTop.setAttribute('href','javascript:void(0)');
oPauseTop.style.display = 'none';
oTopNav.appendChild(oPauseTop);
var oPlayTop = this.doc.createElement('a');
oPlayTop.setAttribute('id','lbPlayTop');
oPlayTop.setAttribute('title', this.label['play']);
oPlayTop.setAttribute(this.classAttribute, this.theme);
oPlayTop.setAttribute('href','javascript:void(0)');
oPlayTop.style.display = 'none';
oTopNav.appendChild(oPlayTop);
var oPrevTop = this.doc.createElement('a');
oPrevTop.setAttribute('id','lbPrevTop');
oPrevTop.setAttribute('title', this.label['prev']);
oPrevTop.setAttribute(this.classAttribute, this.theme);
oPrevTop.setAttribute('href','javascript:void(0)');
oTopNav.appendChild(oPrevTop);
// TOP CONTAINER
var oIframeContainer = this.doc.createElement('div');
oIframeContainer.setAttribute('id','lbIframeContainer');
oIframeContainer.style.display = 'none';
oOuterContainer.appendChild(oIframeContainer);
var oIframe = this.doc.createElement('iframe');
oIframe.setAttribute('id','lbIframe');
oIframe.setAttribute('name','lbIframe')
oIframe.setAttribute('frameBorder','0');
if (this.innerBorder) {
oIframe.setAttribute(this.classAttribute, this.theme);
}
oIframe.style.display = 'none';
oIframeContainer.appendChild(oIframe);
var oImageContainer = this.doc.createElement('div');
oImageContainer.setAttribute('id','lbImageContainer');
oOuterContainer.appendChild(oImageContainer);
var oLyteboxImage = this.doc.createElement('img');
oLyteboxImage.setAttribute('id','lbImage');
if (this.innerBorder) {
oLyteboxImage.setAttribute(this.classAttribute, this.theme);
}
oImageContainer.appendChild(oLyteboxImage);
var oLoading = this.doc.createElement('div');
oLoading.setAttribute('id','lbLoading');
oLoading.setAttribute(this.classAttribute, this.theme);
oOuterContainer.appendChild(oLoading);
var oBottomContainer = this.doc.createElement('div');
oBottomContainer.setAttribute('id','lbBottomContainer');
oBottomContainer.setAttribute(this.classAttribute, this.theme);
oOuterContainer.appendChild(oBottomContainer);
var oDetailsBottom = this.doc.createElement('div');
oDetailsBottom.setAttribute('id','lbBottomData');
oDetailsBottom.setAttribute(this.classAttribute, this.theme);
oBottomContainer.appendChild(oDetailsBottom);
var oTitleBottom = this.doc.createElement('span');
oTitleBottom.setAttribute('id','lbTitleBottom');
oDetailsBottom.appendChild(oTitleBottom);
var oNumBottom = this.doc.createElement('span');
oNumBottom.setAttribute('id','lbNumBottom');
oDetailsBottom.appendChild(oNumBottom);
var oDescBottom = this.doc.createElement('span');
oDescBottom.setAttribute('id','lbDescBottom');
oDetailsBottom.appendChild(oDescBottom);
var oHoverNav = this.doc.createElement('div');
oHoverNav.setAttribute('id','lbHoverNav');
oImageContainer.appendChild(oHoverNav);
var oBottomNav = this.doc.createElement('div');
oBottomNav.setAttribute('id','lbBottomNav');
oBottomContainer.appendChild(oBottomNav);
var oPrevHov = this.doc.createElement('a');
oPrevHov.setAttribute('id','lbPrevHov');
oPrevHov.setAttribute('title', this.label['prev']);
oPrevHov.setAttribute(this.classAttribute, this.theme);
oPrevHov.setAttribute('href','javascript:void(0)');
oHoverNav.appendChild(oPrevHov);
var oNextHov = this.doc.createElement('a');
oNextHov.setAttribute('id','lbNextHov');
oNextHov.setAttribute('title', this.label['next']);
oNextHov.setAttribute(this.classAttribute, this.theme);
oNextHov.setAttribute('href','javascript:void(0)');
oHoverNav.appendChild(oNextHov);
var oClose = this.doc.createElement('a');
oClose.setAttribute('id','lbClose');
oClose.setAttribute('title', this.label['close']);
oClose.setAttribute(this.classAttribute, this.theme);
oClose.setAttribute('href','javascript:void(0)');
oBottomNav.appendChild(oClose);
var oPrint = this.doc.createElement('a');
oPrint.setAttribute('id','lbPrint');
oPrint.setAttribute('title', this.label['print']);
oPrint.setAttribute(this.classAttribute, this.theme);
oPrint.setAttribute('href','javascript:void(0)');
oPrint.style.display = 'none';
oBottomNav.appendChild(oPrint);
var oNext = this.doc.createElement('a');
oNext.setAttribute('id','lbNext');
oNext.setAttribute('title', this.label['next']);
oNext.setAttribute(this.classAttribute, this.theme);
oNext.setAttribute('href','javascript:void(0)');
oBottomNav.appendChild(oNext);
var oPause = this.doc.createElement('a');
oPause.setAttribute('id','lbPause');
oPause.setAttribute('title', this.label['pause']);
oPause.setAttribute(this.classAttribute, this.theme);
oPause.setAttribute('href','javascript:void(0)');
oPause.style.display = 'none';
oBottomNav.appendChild(oPause);
var oPlay = this.doc.createElement('a');
oPlay.setAttribute('id','lbPlay');
oPlay.setAttribute('title', this.label['play']);
oPlay.setAttribute(this.classAttribute, this.theme);
oPlay.setAttribute('href','javascript:void(0)');
oPlay.style.display = 'none';
oBottomNav.appendChild(oPlay);
var oPrev = this.doc.createElement('a');
oPrev.setAttribute('id','lbPrev');
oPrev.setAttribute('title', this.label['prev']);
oPrev.setAttribute(this.classAttribute, this.theme);
oPrev.setAttribute('href','javascript:void(0)');
oBottomNav.appendChild(oPrev);
}; // initialize()
//********************************************************************************/
// updateLyteboxItems() - Loops through anchor and area tags looking for 'lytebox'
// or 'lyteshow' references and adds onclick events to the appropriate links.
//********************************************************************************/
Lytebox.prototype.updateLyteboxItems = function() {
// Populate arrays of anchors and area maps from the appropriate window (could be the parent or iframe document)
// (07/20/2011) anchors = null fix provided by A.Popov http://s3blog.org, slightly modified by Markus Hay
var anchors = (this.isFrame && window.parent.frames[window.name].document) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
anchors = (this.isFrame) ? anchors : document.getElementsByTagName('a');
var areas = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('area') : document.getElementsByTagName('area');
// Combine both into a single array.
var lyteLinks = this.combine(anchors, areas);
var myLink = relAttribute = classAttribute = dataAttribute = tipStyle = tipImage = tipHtml = aSetting = sName = sValue = null;
// Now loop through all Lytebox enabled links
for (var i = 0; i < lyteLinks.length; i++) {
myLink = lyteLinks[i];
classAttribute = String(myLink.getAttribute(this.classAttribute));
// use the string.match() method to catch 'lytebox' references in the rel attribute
if (myLink.getAttribute('href')) {
// Lytebox
if (classAttribute.toLowerCase().match('lytebox')) {
myLink.onclick = function () { $lb.start(this, false, false); return false; }
// Lyteshow
} else if (classAttribute.toLowerCase().match('lyteshow')) {
myLink.onclick = function () { $lb.start(this, true, false); return false; }
// Lyteframe
} else if (classAttribute.toLowerCase().match('lyteframe')) {
myLink.onclick = function () { $lb.start(this, false, true); return false; }
}
// Lytetip
if (classAttribute.toLowerCase().match('lytetip') && myLink.getAttribute('data-tip') != null && !this.tipsSet) {
if (this.changeTipCursor) { myLink.style.cursor = 'help'; }
dataAttribute = String(myLink.getAttribute('data-lyte-options'));
if (dataAttribute == 'null') {
tipStyle = this.tipStyle;
} else {
aSetting = dataAttribute.split(':');
if (aSetting.length > 1) {
sName = String(aSetting[0]).trim().toLowerCase();
sValue = String(aSetting[1]).trim().toLowerCase();
tipStyle = (sName == 'tipstyle' ? (/classic|info|help|warning|error/.test(sValue) ? sValue : this.tipStyle) : this.tipStyle);
}
// Loop to get the tipStyle each option.
aOptions = dataAttribute.split(' ');
for (var j = 0; j < aOptions.length; i++) {
// The option itself should be a name:value pair, so split into what should be a two element array.
aSetting = aOptions[j].split(':');
if (aSetting.length > 1) {
sName = String(aSetting[0]).trim().toLowerCase();
sValue = String(aSetting[1]).trim().toLowerCase();
tipStyle = (sName == 'tipstyle' ? (/classic|info|help|warning|error/.test(sValue) ? sValue : this.tipStyle) : this.tipStyle);
break;
}
}
}
switch(tipStyle) {
case 'info': tipStyle = 'lbCustom lbInfo'; tipImage = 'lbTipImg lbInfoImg'; break;
case 'help': tipStyle = 'lbCustom lbHelp'; tipImage = 'lbTipImg lbHelpImg'; break;
case 'warning': tipStyle = 'lbCustom lbWarning'; tipImage = 'lbTipImg lbWarningImg'; break;
case 'error': tipStyle = 'lbCustom lbError'; tipImage = 'lbTipImg lbErrorImg'; break;
case 'classic': tipStyle = 'lbClassic'; tipImage = ''; break;
default: tipStyle = 'lbClassic'; tipImage = '';
}
// IE6, IE7, and IE8 (QuirksMode) do not properly position the custom image outside the container, so we'll blank out the image for now.
if ((this.ie && this.ieVersion <= 7) || (this.ieVersion == 8 && this.doc.compatMode == 'BackCompat')) {
tipImage = '';
if (tipStyle != 'lbClassic' && tipStyle != '') {
tipStyle += ' lbIEFix';
}
}
// Find the position of the object in question so that we can set the tooltip position accordingly.
var aLinkPos = this.findPos(myLink);
// Fix for IE in QuirksMode, which does not properly position the tooltip.
if (this.ie && (this.ieVersion <= 6 || this.doc.compatMode == 'BackCompat')) {
myLink.style.position = 'relative';
}
// Clear out just in case Lytebox is being re-initialized.
tipHtml = myLink.innerHTML;
myLink.innerHTML = '';
if ((this.ie && this.ieVersion <= 6 && this.doc.compatMode != 'BackCompat') || this.tipRelative) {
myLink.innerHTML = tipHtml + '' + (tipImage ? '' : '') + myLink.getAttribute('data-tip') + '';
if (this.tipRelative) {
myLink.style.position = 'relative';
}
} else {
myLink.innerHTML = tipHtml + '' + (tipImage ? '' : '') + myLink.getAttribute('data-tip') + '';
}
// Clear the title attribute to prevent overlapping browser tips.
myLink.setAttribute('title','');
}
}
}
this.tipsSet = true;
}; // updateLyteboxItems()
//********************************************************************************/
// start() - Sets appropriate options (data-lyte-options) and starts the viewer.
//
// @param object oLink The lytebox enabled element
// @param boolean bLyteshow true for lyteshow, false otherwise
// @param boolean bLyteframe true for lyteframe, false otherwise
//********************************************************************************/
Lytebox.prototype.start = function(oLink, bLyteshow, bLyteframe) {
// Set the configuration options, which should be set in the first "lyte" enabled link.
this.setOptions(String(oLink.getAttribute('data-lyte-options')));
// See if a "before start" handler is set and execute that first.
if (this.beforeStart != '') {
// Verify that this is a valid function, and if so call it. If the return value equates to false the viewer will remain open.
var callback = window[this.beforeStart];
if (typeof callback === 'function') {
if (!callback()) { return; }
}
}
// Hide select boxes for IE6 and below
if (this.ie && this.ieVersion <= 6) { this.toggleSelects('hide'); }
// Hide objects (should add a boolean to disable this)
if (this.hideObjects) { this.toggleObjects('hide'); }
// If we're dealing with frames instead of images, set a boolean and also set the container to print.
this.isLyteframe = (bLyteframe ? true : false);
if (this.isFrame && window.parent.frames[window.name].document) {
window.parent.$lb.printId = (this.isLyteframe ? 'lbIframe' : 'lbImage');
} else {
this.printId = (this.isLyteframe ? 'lbIframe' : 'lbImage');
}
// stretch overlay to fill page and fade in
var pageSize = this.getPageSize();
var objOverlay = this.doc.getElementById('lbOverlay');
var objBody = this.doc.getElementsByTagName("body").item(0);
objOverlay.style.height = pageSize[1] + "px";
objOverlay.style.display = '';
// If animations are enabled, then fade in the overlay, otherwise set it to this.maxOpacity.
this.appear('lbOverlay', (this.doAnimations && this.ieVersion >=9 ? 0 : this.maxOpacity));
// Get a reference to our anchor and area tags so we can use them below.
var anchors = (this.isFrame && window.parent.frames[window.name].document) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
anchors = (this.isFrame) ? anchors : document.getElementsByTagName('a');
var areas = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('area') : document.getElementsByTagName('area');
// Combine both into a single array.
var lyteLinks = this.combine(anchors, areas);
// If we are using the HTML content viewer (rel="lyteframe"), show the iframe and load the document.
if (this.isLyteframe) {
this.frameArray = [];
this.frameNum = 0;
// if frame is NOT part of a set
if (this.group == '') {
this.frameArray.push(new Array(oLink.getAttribute('href'), (oLink.getAttribute('data-title') != null ? oLink.getAttribute('data-title') : oLink.getAttribute('title')), oLink.getAttribute('data-description')));
} else { // frame is part of a set
// loop through anchors and areas, find other frames in set, and add them to frameArray
if (String(oLink.getAttribute(this.classAttribute)).indexOf('lyteframe') != -1) {
for (var i = 0; i < lyteLinks.length; i++) {
var myLink = lyteLinks[i];
if (myLink.getAttribute('href') && String(myLink.getAttribute('data-lyte-options')).toLowerCase().match('group:' + this.group)) {
this.frameArray.push(new Array(myLink.getAttribute('href'), (myLink.getAttribute('data-title') != null ? myLink.getAttribute('data-title') : myLink.getAttribute('title')), myLink.getAttribute('data-description')));
}
}
this.frameArray = this.removeDuplicates(this.frameArray);
while(this.frameArray[this.frameNum][0] != oLink.getAttribute('href')) { this.frameNum++; }
}
}
// Otherwise we're just using the image viewer (rel="lytebox" or rel="lyteshow")
} else {
this.imageArray = [];
this.imageNum = 0;
this.slideArray = [];
this.slideNum = 0;
// if image is NOT part of a set..
if (this.group == '') {
this.imageArray.push(new Array(oLink.getAttribute('href'), (oLink.getAttribute('data-title') != null ? oLink.getAttribute('data-title') : oLink.getAttribute('title')), oLink.getAttribute('data-description')));
} else { // image is part of a set..
// loop through anchors and areas, find other images in set, and add them to imageArray or slideArray
if (String(oLink.getAttribute(this.classAttribute)).indexOf('lytebox') != -1) {
for (var i = 0; i < lyteLinks.length; i++) {
var myLink = lyteLinks[i];
if (myLink.getAttribute('href') && String(myLink.getAttribute('data-lyte-options')).toLowerCase().match('group:' + this.group)) {
this.imageArray.push(new Array(myLink.getAttribute('href'), (myLink.getAttribute('data-title') != null ? myLink.getAttribute('data-title') : myLink.getAttribute('title')), myLink.getAttribute('data-description')));
}
}
this.imageArray = this.removeDuplicates(this.imageArray);
while(this.imageArray[this.imageNum][0] != oLink.getAttribute('href')) { this.imageNum++; }
}
if (String(oLink.getAttribute(this.classAttribute)).indexOf('lyteshow') != -1) {
for (var i = 0; i < lyteLinks.length; i++) {
var myLink = lyteLinks[i];
if (myLink.getAttribute('href') && String(myLink.getAttribute('data-lyte-options')).toLowerCase().match('group:' + this.group)) {
this.slideArray.push(new Array(myLink.getAttribute('href'), (myLink.getAttribute('data-title') != null ? myLink.getAttribute('data-title') : myLink.getAttribute('title')), myLink.getAttribute('data-description')));
}
}
this.slideArray = this.removeDuplicates(this.slideArray);
while(this.slideArray[this.slideNum][0] != oLink.getAttribute('href')) { this.slideNum++; }
}
}
}
// Show the Lytebox container.
var object = this.doc.getElementById('lbMain');
object.style.display = '';
// (07/20/2011) Viewer will stay in fixed position if scrolling up/down - fixed by A.Popov http://s3blog.org
// (08/17/2011) If this.resizeImage == false, we have to allow scrolling as the viewer will likely expand past the viewable document/window area
if (this.autoResize && this.fixedPosition) {
if (document.all && document.all.item && !window.opera) {
object.style.top = (this.getPageScroll() + (pageSize[3] / 40)) + "px";
var ps = (pageSize[3] / 40);
var handler = function(){
document.getElementById('lbMain').style.top = ($lb.getPageScroll() + ps) + 'px';
}
this.bodyOnscroll = document.body.onscroll;
if (window.addEventListener) {
window.addEventListener('scroll', handler, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', handler);
} else {
window.onload = handler_start;
}
object.style.position = "absolute";
} else {
object.style.top = ((pageSize[3] / 40)) + "px";
object.style.position = "fixed";
}
} else {
object.style.top = (this.getPageScroll() + (pageSize[3] / 40)) + "px";
}
// Reset the bottom border from #lbOuterContainer.
if (!this.outerBorder) {
this.doc.getElementById('lbOuterContainer').style.border = 'none';
} else {
this.doc.getElementById('lbOuterContainer').setAttribute(this.classAttribute, this.theme);
}
// Now we need to assign "onclick" handlers for various buttons. It's being done here because IE was apparently having
// problems with assigning these when the elements were actually created on the page. This occurred randomly, and I was
// not able to determine why. Whatever the case, the buttons appear to work fine by moving the assignments here. IE sux.
// (07/20/2011) Added this.forceCloseClick, which disallows closing the viewer if user clicks outside of viewer (lyteframe only?)
if (this.forceCloseClick) {
this.doc.getElementById('lbOverlay').onclick = '';
} else {
this.doc.getElementById('lbOverlay').onclick = function() { $lb.end(); return false; }
}
this.doc.getElementById('lbMain').onclick = function(e) {
var e = e;
if (!e) {
if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
e = window.parent.window.event;
} else {
e = window.event;
}
}
var id = (e.target ? e.target.id : e.srcElement.id);
if ((id == 'lbMain') && (!$lb.forceCloseClick)) { $lb.end(); return false; }
}
this.doc.getElementById('lbPrintTop').onclick = this.doc.getElementById('lbPrint').onclick = function() { $lb.printWindow(); return false; }
this.doc.getElementById('lbCloseTop').onclick = this.doc.getElementById('lbClose').onclick = function() { $lb.end(); return false; }
this.doc.getElementById('lbPauseTop').onclick = function() { $lb.togglePlayPause("lbPauseTop", "lbPlayTop"); return false; }
this.doc.getElementById('lbPause').onclick = function() { $lb.togglePlayPause("lbPause", "lbPlay"); return false; }
this.doc.getElementById('lbPlayTop').onclick = function() { $lb.togglePlayPause("lbPlayTop", "lbPauseTop"); return false; }
this.doc.getElementById('lbPlay').onclick = function() { $lb.togglePlayPause("lbPlay", "lbPause"); return false; }
// Setup for a slideshow... will be used later to show/hide certain images, based on settings.
this.isSlideshow = bLyteshow;
this.isPaused = (this.slideNum != 0 ? true : false);
// We need to be sure that the "Play" button is visible if the slideshow is paused, since "Pause" is displayed by default.
if (this.isSlideshow && this.showPlayPause && this.isPaused) {
this.doc.getElementById('lbPlay').style.display = '';
this.doc.getElementById('lbPause').style.display = 'none';
}
if (this.isLyteframe) {
this.changeContent(this.frameNum);
} else {
if (this.isSlideshow) {
this.changeContent(this.slideNum);
} else {
this.changeContent(this.imageNum);
}
}
}; // start()
//*******************************************************************************/
// launch() - Launches the Lytebox image or HTML content viewer programmatically,
// as in the user can call this function to launch Lytebox from their own JS.
// The content stype is automatically detected (either image or not).
//
// @param string sUrl The image path/url, or url to HTML content
// @param string sOptions data-lyte-options values
// @param string sTitle data-title value
// @param string sDesc data-description value
//*******************************************************************************/
Lytebox.prototype.launch = function(sUrl, sOptions, sTitle, sDesc) {
// First we need to detemine the type of content in the URL. It's either an image (lytebox) or HTML content (lyteframe).
var sExt = sUrl.split('.').pop().toLowerCase();
var sRel = 'lyteframe';
if (sExt == 'png' || sExt == 'jpg' || sExt == 'jpeg' || sExt == 'gif' || sExt == 'bmp') {
sRel = 'lytebox';
}
// Set up the lbLauncher link. Auto-detect whether incoming url is an image or otherwise. If
// It's an image the class will be set to "lytebox", otherwise "lyteframe" for HTML content.
var oLauncher = this.doc.getElementById('lbLauncher');
oLauncher.setAttribute('href', sUrl);
oLauncher.setAttribute('rel', sRel);
oLauncher.setAttribute('data-lyte-options', !sOptions ? '' : sOptions);
oLauncher.setAttribute('data-title', !sTitle ? '' : sTitle);
oLauncher.setAttribute('data-description', !sDesc ? '' : sDesc);
this.updateLyteboxItems();
this.start(oLauncher, false, (sRel == 'lyteframe'));
}; // launch()
//***************************************************************************/
// changeContent() - Hide most elements and load iframe or preload image in
// preparation for resizing the content container.
//
// @param int iImageNum
//***************************************************************************/
Lytebox.prototype.changeContent = function(iImageNum) {
// We clear the slideshow timers, if it's a slideshow, just in case "Next/Prev" navigation is enabled and user moves back/forward.
if (this.isSlideshow) {
for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
}
// save image number to member variable for later access
this.activeImage = this.activeSlide = this.activeFrame = iImageNum;
// Reset the bottom border from #lbOuterContainer.
if (!this.outerBorder) {
this.doc.getElementById('lbOuterContainer').style.border = 'none';
} else {
this.doc.getElementById('lbOuterContainer').setAttribute(this.classAttribute, this.theme);
}
// hide elements during transition
this.doc.getElementById('lbLoading').style.display = '';
this.doc.getElementById('lbImage').style.display = 'none';
this.doc.getElementById('lbIframe').style.display = 'none';
this.doc.getElementById('lbPrevHov').style.display = 'none';
this.doc.getElementById('lbNextHov').style.display = 'none';
this.doc.getElementById('lbIframeContainer').style.display = 'none';
if (this.titleTop || this.navTop) {
this.doc.getElementById('lbTopContainer').style.visibility = 'hidden';
} else {
this.doc.getElementById('lbTopContainer').style.display = 'none';
}
this.doc.getElementById('lbBottomContainer').style.display = 'none';
if (this.isLyteframe) {
var iframe = $lb.doc.getElementById('lbIframe');
iframe.src = 'about:blank';
var pageSize = this.getPageSize();
// (07/20/2011) if width/height are percentages, determine width in pixels before setting - fixed by A.Popov http://s3blog.org
var w = this.width.trim();
var h = this.height.trim();
if (/\%/.test(w)) {
var percent = parseInt(w);
w = parseInt((pageSize[2]-50)*percent/100);
w = w+'px';
}
if (/\%/.test(h)) {
var percent = parseInt(h);
h = parseInt((pageSize[3]-150)*percent/100);
h = h+'px';
}
iframe.height = h;
iframe.width = w;
iframe.scrolling = this.scrollbars.trim();
// Now resize the container in accordance with the new dimensions.
this.resizeContainer(parseInt(iframe.width), parseInt(iframe.height));
} else {
imgPreloader = new Image();
// once image is preloaded, resize image container (and image, if necessary)
imgPreloader.onload = function() {
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if ($lb.autoResize) {
var pagesize = $lb.getPageSize();
var x = pagesize[2] - 50;
var y = pagesize[3] - 150;
if (imageWidth > x) {
imageHeight = Math.round(imageHeight * (x / imageWidth));
imageWidth = x;
if (imageHeight > y) {
imageWidth = Math.round(imageWidth * (y / imageHeight));
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = Math.round(imageWidth * (y / imageHeight));
imageHeight = y;
if (imageWidth > x) {
imageHeight = Math.round(imageHeight * (x / imageWidth));
imageWidth = x;
}
}
}
var lbImage = $lb.doc.getElementById('lbImage')
lbImage.src = ($lb.isSlideshow ? $lb.slideArray[$lb.activeSlide][0] : $lb.imageArray[$lb.activeImage][0]);
lbImage.width = imageWidth;
lbImage.height = imageHeight;
$lb.resizeContainer(imageWidth, imageHeight);
imgPreloader.onload = function() {}; // IE animated .gif fix.
}
imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]);
}
}; // changeContent()
//******************************************************************************/
// resizeContainer() - Resizes the container based on the dimensions provided.
//
// @param int iWidth
// @param int iHeight
//******************************************************************************/
Lytebox.prototype.resizeContainer = function(iWidth, iHeight) {
// get current height and width
this.wCur = this.doc.getElementById('lbOuterContainer').offsetWidth;
this.hCur = this.doc.getElementById('lbOuterContainer').offsetHeight;
// scalars based on change from old to new
this.xScale = ((iWidth + (this.borderSize * 2)) / this.wCur) * 100;
this.yScale = ((iHeight + (this.borderSize * 2)) / this.hCur) * 100;
// calculate size difference between new and old image, and resize if necessary
var wDiff = (this.wCur - this.borderSize * 2) - iWidth;
var hDiff = (this.hCur - this.borderSize * 2) - iHeight;
if (!(hDiff == 0)) {
this.hDone = false;
this.resizeH('lbOuterContainer', this.hCur, iHeight + this.borderSize*2, this.getPixelRate(this.hCur, iHeight));
} else {
this.hDone = true;
}
if (!(wDiff == 0)) {
this.wDone = false;
this.resizeW('lbOuterContainer', this.wCur, iWidth + this.borderSize*2, this.getPixelRate(this.wCur, iWidth));
} else {
this.wDone = true;
}
// if new and old image are same size and no scaling transition is necessary, do a quick pause to prevent image flicker.
if ((hDiff == 0) && (wDiff == 0)) {
if (this.ie){ this.pause(250); } else { this.pause(100); }
}
this.doc.getElementById('lbPrevHov').style.height = iHeight + "px";
this.doc.getElementById('lbNextHov').style.height = iHeight + "px";
this.showContent();
}; // resizeContainer()
//******************************************************************************/
// showContent() - Display content (iframes, images, etc.) and begin preloading
// neighbors images, if we are dealing with images.
//******************************************************************************/
Lytebox.prototype.showContent = function() {
if (this.wDone && this.hDone) {
// Clear the timer for showContent...
for (var i = 0; i < this.showContentTimerCount; i++) { window.clearTimeout(this.showContentTimerArray[i]); }
// Hide the loading graphic and show the appropriate content container.
this.doc.getElementById('lbLoading').style.display = 'none';
this.doc.getElementById('lbImageContainer').style.display = (this.isLyteframe ? 'none' : '');
this.doc.getElementById('lbIframeContainer').style.display = (this.isLyteframe ? '' : 'none');
if (this.isLyteframe) {
this.doc.getElementById('lbIframe').style.display = '';
this.appear('lbIframe', (this.doAnimations ? 0 : 100));
} else {
this.doc.getElementById('lbImage').style.display = '';
this.appear('lbImage', (this.doAnimations ? 0 : 100));
this.preloadNeighborImages();
}
// Show the appropriate buttons.
if (this.isSlideshow) {
// if last image in set, either loop (if option is set) or close the slideshow viewer
if(this.activeSlide == (this.slideArray.length - 1)) {
if (this.loopSlideshow) {
this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("$lb.changeContent(0)", this.slideInterval);
} else if (this.autoEnd) {
this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("$lb.end('slideshow')", this.slideInterval);
}
// otherwise, call changeContent in "this.slideInterval" seconds to automatically move to the next slide
} else {
if (!this.isPaused) {
this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("$lb.changeContent("+(this.activeSlide+1)+")", this.slideInterval);
}
}
this.doc.getElementById('lbHoverNav').style.display = (this.showNavigation && this.navTypeHash['Hover_by_type_' + this.navType] ? '' : 'none');
this.doc.getElementById('lbCloseTop').style.display = (this.showClose && this.navTop ? '' : 'none');
this.doc.getElementById('lbClose').style.display = (this.showClose && !this.navTop ? '' : 'none');
this.doc.getElementById('lbBottomData').style.display = (this.showDetails ? '' : 'none');
this.doc.getElementById('lbPauseTop').style.display = (this.showPlayPause && this.navTop ? (!this.isPaused ? '' : 'none') : 'none');
this.doc.getElementById('lbPause').style.display = (this.showPlayPause && !this.navTop ? (!this.isPaused ? '' : 'none') : 'none');
this.doc.getElementById('lbPlayTop').style.display = (this.showPlayPause && this.navTop ? (!this.isPaused ? 'none' : '') : 'none');
this.doc.getElementById('lbPlay').style.display = (this.showPlayPause && !this.navTop ? (!this.isPaused ? 'none' : '') : 'none');
this.doc.getElementById('lbPrevTop').style.display = (this.navTop && this.showNavigation && this.navTypeHash['Display_by_type_' + this.navType] ? '' : 'none');
this.doc.getElementById('lbPrev').style.display = (!this.navTop && this.showNavigation && this.navTypeHash['Display_by_type_' + this.navType] ? '' : 'none');
this.doc.getElementById('lbNextTop').style.display = (this.navTop && this.showNavigation && this.navTypeHash['Display_by_type_' + this.navType] ? '' : 'none');
this.doc.getElementById('lbNext').style.display = (!this.navTop && this.showNavigation && this.navTypeHash['Display_by_type_' + this.navType] ? '' : 'none');
} else {
this.doc.getElementById('lbHoverNav').style.display = (this.navTypeHash['Hover_by_type_' + this.navType] && !this.isLyteframe ? '' : 'none');
if ((this.navTypeHash['Display_by_type_' + this.navType] && !this.isLyteframe && this.imageArray.length > 1) || (this.frameArray.length > 1 && this.isLyteframe)) {
this.doc.getElementById('lbPrevTop').style.display = (this.navTop ? '' : 'none');
this.doc.getElementById('lbPrev').style.display = (!this.navTop ? '' : 'none');
this.doc.getElementById('lbNextTop').style.display = (this.navTop ? '' : 'none');
this.doc.getElementById('lbNext').style.display = (!this.navTop ? '' : 'none');
} else {
this.doc.getElementById('lbPrevTop').style.display = 'none';
this.doc.getElementById('lbPrev').style.display = 'none';
this.doc.getElementById('lbNextTop').style.display = 'none';
this.doc.getElementById('lbNext').style.display = 'none';
}
this.doc.getElementById('lbCloseTop').style.display = (this.navTop ? '' : 'none');
this.doc.getElementById('lbClose').style.display = (!this.navTop ? '' : 'none');
this.doc.getElementById('lbBottomData').style.display = '';
this.doc.getElementById('lbPauseTop').style.display = 'none';
this.doc.getElementById('lbPause').style.display = 'none';
this.doc.getElementById('lbPlayTop').style.display = 'none';
this.doc.getElementById('lbPlay').style.display = 'none';
}
this.doc.getElementById('lbPrintTop').style.display = (this.showPrint && this.navTop ? '' : 'none');
this.doc.getElementById('lbPrint').style.display = (this.showPrint && !this.navTop ? '' : 'none');
// try/catch added for IE6
try {
// (07/20/2011) identifier for cgi.script-server - by A.Popov http://s3blog.org
var uri = this.frameArray[this.activeFrame][0];
var ext = uri.split('.').pop().toLowerCase();
if (this.appendQS) {
uri += ((/\?/.test(uri)) ? '&' : '?') + 'request_from=lytebox';
}
// Now determine if we need to embed the content within the iFrame (media file) or just load it in the src attribute.
// We'll do that by check the extension (mov, avi, mpg, mpeg, wmv, swf)
if (ext == 'mov' || ext == 'avi' || ext == 'wmv' || ext == 'mpg' || ext == 'mpeg' || ext == 'swf') {
// Builds the iFrame window + styles + contents...
var ifrm = this.doc.getElementById('lbIframe');
var blah = this.buildObject(parseInt(ifrm.width), parseInt(ifrm.height), uri, ext);
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write(blah);
ifrm.document.close();
var wStyle = ifrm.document.body.style;
wStyle.margin = 0;
wStyle.padding = 0;
wStyle.backgroundColor = '#fff';
wStyle.fontFamily = 'Verdana, Helvetica, sans-serif';
wStyle.fontSize = '0.9em';
} else {
this.doc.getElementById('lbIframe').src = uri;
}
} catch(e) { }
// Finally, see if we have a "after start" handler set and make the call if so.
if (this.afterStart != '') {
var callback = window[this.afterStart];
if (typeof callback === 'function') {
callback();
}
}
} else {
this.showContentTimerArray[this.showContentTimerCount++] = setTimeout("$lb.showContent()", 200);
}
}; // showContent()
//******************************************************/
// updateDetails() - Display caption/title and nav.
//******************************************************/
Lytebox.prototype.updateDetails = function() {
// Get the title contents from the appropriate array.
var sTitle = (this.isSlideshow ? this.slideArray[this.activeSlide][1] : (this.isLyteframe ? this.frameArray[this.activeFrame][1] : this.imageArray[this.activeImage][1]));
sTitle = sTitle == '' ? null : sTitle;
var sDesc = (this.isSlideshow ? this.slideArray[this.activeSlide][2] : (this.isLyteframe ? this.frameArray[this.activeFrame][2] : this.imageArray[this.activeImage][2]));
sDesc = sDesc == '' ? null : sDesc;
// IE will render block level elements (add space) even if there is no content, so we'll show/hide the title
// and description containers if there is no content to display.
if (this.ie && this.ieVersion <= 7 || (this.ieVersion >= 8 && this.doc.compatMode == 'BackCompat')) {
this.doc.getElementById(this.titleTop ? 'lbTitleBottom' : 'lbTitleTop').style.display = 'none';
this.doc.getElementById(this.titleTop ? 'lbTitleTop' : 'lbTitleBottom').style.display = (sTitle == null ? 'none' : 'block');
this.doc.getElementById('lbDescBottom').style.display = (sDesc == null ? 'none' : 'block');
}
// Determine which container to write the title to.
this.doc.getElementById(this.titleTop ? 'lbTitleTop' : 'lbTitleBottom').innerHTML = (sTitle == null ? '' : sTitle);
this.doc.getElementById(this.titleTop ? 'lbTitleBottom' : 'lbTitleTop').innerHTML = '';
this.doc.getElementById(this.titleTop ? 'lbNumBottom' : 'lbNumTop').innerHTML = '';
// Update the navigation, which will show/hide the appropriate buttons.
this.updateNav();
// Show/hide the top container as necessary.
if (this.titleTop || this.navTop) {
this.doc.getElementById('lbTopContainer').style.display = 'block';
this.doc.getElementById('lbTopContainer').style.visibility = 'visible';
} else {
this.doc.getElementById('lbTopContainer').style.display = 'none';
}
// Now we'll get the number/page display container (x of x)
var object = (this.titleTop ? this.doc.getElementById('lbNumTop') : this.doc.getElementById('lbNumBottom'));
// if part of set display 'Image x of x' or 'Page x of x'
if (this.isSlideshow && this.slideArray.length > 1) {
object.innerHTML = "Image " + eval(this.activeSlide + 1) + " of " + this.slideArray.length;
} else if (this.imageArray.length > 1 && !this.isLyteframe) {
object.innerHTML = "Image " + eval(this.activeImage + 1) + " of " + this.imageArray.length;
} else if (this.frameArray.length > 1 && this.isLyteframe) {
object.innerHTML = "Page " + eval(this.activeFrame + 1) + " of " + this.frameArray.length;
} else {
object.innerHTML = '';
}
// If we have a description then update lbTitleBottom.
var bAddSpacer = !(this.titleTop || (sTitle == null && object.innerHTML == ''));
this.doc.getElementById('lbDescBottom').innerHTML = (sDesc == null ? '' : (bAddSpacer ? ' ' : '') + sDesc);
// If there is nothing to show, then we don't really need to display the bottom container.
this.doc.getElementById('lbBottomContainer').style.display = (!(this.titleTop && this.navTop) || sDesc != null ? 'block' : 'none');
// For IE (certain versions) we have to explicitely set the size of the lbBottomNav container so that it doesn't try to consume
// 100% of the width. Each button element amounts to 39px (26 width + 13 margin/padding).
var iNavWidth = 0;
if (this.ie && this.ieVersion <= 7 || (this.ieVersion >= 8 && this.doc.compatMode == 'BackCompat')) {
// Start with the simple buttons (print, play/pause).
iNavWidth = 39 + (this.showPrint ? 39 : 0) + (this.isSlideshow && this.showPlayPause ? 39 : 0);
// Now determine if the next and/or prev buttons are being shown.
if ((this.isSlideshow && this.slideArray.length > 1 && this.showNavigation && this.navType != 1) ||
(this.frameArray.length > 1 && this.isLyteframe) ||
(this.imageArray.length > 1 && !this.isLyteframe && this.navType != 1)) {
iNavWidth += 39*2;
}
}
// Now set the correct width for the data container so that it doesn't cause the right (nav) container to drop down to the next line.
if (this.titleTop && this.navTop) {
if (iNavWidth > 0) {
this.doc.getElementById('lbTopNav').style.width = iNavWidth + 'px';
}
this.doc.getElementById('lbTopData').style.width = (this.doc.getElementById('lbTopContainer').offsetWidth - this.doc.getElementById('lbTopNav').offsetWidth - 15) + 'px';
this.doc.getElementById('lbDescBottom').style.width = (this.doc.getElementById('lbBottomContainer').offsetWidth - 15) + 'px';
} else if ((!this.titleTop || sDesc != null) && !this.navTop) {
if (iNavWidth > 0) {
this.doc.getElementById('lbBottomNav').style.width = iNavWidth + 'px';
}
this.doc.getElementById('lbBottomData').style.width = (this.doc.getElementById('lbBottomContainer').offsetWidth - this.doc.getElementById('lbBottomNav').offsetWidth - 15) + 'px';
this.doc.getElementById('lbDescBottom').style.width = this.doc.getElementById('lbBottomData').style.width;
}
// Add padding to the bottom of the outer container so that it encompasses the details container.
// Note that we exclude >=IE7 running in quirksmode and IE6 as they apparently resize the container properly.
if (!((this.ieVersion == 7 || this.ieVersion == 8 || this.ieVersion == 9) && this.doc.compatMode == 'BackCompat') && this.ieVersion != 6) {
// We need to get the width and height of lbTopContainer and lbBottomContainer, then increase the bottom padding.
var titleHeight = this.doc.getElementById('lbTopContainer').offsetHeight + 5; // 5 is added for the additional top margin given in the CSS
var offsetHeight = (titleHeight == 5 ? 0 : titleHeight) + this.doc.getElementById('lbBottomContainer').offsetHeight;
// TODO: Need to figure out why the outer container is not properly resizing instead of this hacky solution. As of right now this seems to fix it.
this.doc.getElementById('lbOuterContainer').style.paddingBottom = (offsetHeight + 5) + 'px';
}
// If the title or navigation is to be positioned at the top, show the top container.
/* TODO: This doesn't do anything since the containers are already visible...
if (this.titleTop || this.navTop) {
this.appear('lbTopContainer', (this.doAnimations ? 0 : 100));
}
// If there is content to show on the bottom container (title or nav is on the bottom OR there is a description), show it.
if (!(this.titleTop && this.navTop) || sDesc != null) {
this.appear('lbBottomContainer', (this.doAnimations ? 0 : 100));
}
*/
}; // updateDetails()
//***********************************************************************/
// updateNav() - Display appropriate previous and next hover navigation.
//***********************************************************************/
Lytebox.prototype.updateNav = function() {
// Slideshow Viewer (Lyteshow)
if (this.isSlideshow) {
// if not first image in set, display prev image button
if (this.activeSlide != 0) {
if (this.navTypeHash['Display_by_type_' + this.navType] && this.showNavigation) {
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme);
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').style.display = '';
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() {
if ($lb.pauseOnPrevClick) { $lb.togglePlayPause($lb.navTop ? 'lbPauseTop' : 'lbPause', $lb.navTop ? 'lbPlayTop' : 'lbPlay'); }
$lb.changeContent($lb.activeSlide - 1); return false;
}
}
if (this.navTypeHash['Hover_by_type_' + this.navType]) {
var object = this.doc.getElementById('lbPrevHov');
object.style.display = '';
object.onclick = function() {
if ($lb.pauseOnPrevClick) { $lb.togglePlayPause($lb.navTop ? 'lbPauseTop' : 'lbPause', $lb.navTop ? 'lbPlayTop' : 'lbPlay'); }
$lb.changeContent($lb.activeSlide - 1); return false;
}
}
} else {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() { return false; }
}
}
// if not last image in set, display next image button
if (this.activeSlide != (this.slideArray.length - 1) && this.showNavigation) {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme);
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').style.display = '';
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() {
if ($lb.pauseOnNextClick) { $lb.togglePlayPause($lb.navTop ? 'lbPauseTop' : 'lbPause', $lb.navTop ? 'lbPlayTop' : 'lbPlay'); }
$lb.changeContent($lb.activeSlide + 1); return false;
}
}
if (this.navTypeHash['Hover_by_type_' + this.navType]) {
var object = this.doc.getElementById('lbNextHov');
object.style.display = '';
object.onclick = function() {
if ($lb.pauseOnNextClick) { $lb.togglePlayPause($lb.navTop ? 'lbPauseTop' : 'lbPause', $lb.navTop ? 'lbPlayTop' : 'lbPlay'); }
$lb.changeContent($lb.activeSlide + 1); return false;
}
}
} else {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() { return false; }
}
}
// HTML/Embedded Media Viewer (Lyteframe)
} else if (this.isLyteframe) {
// if not first image in set, display prev image button
if(this.activeFrame != 0) {
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme);
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').style.display = '';
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() {
$lb.changeContent($lb.activeFrame - 1); return false;
}
} else {
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() { return false; }
}
// if not last image in set, display next image button
if(this.activeFrame != (this.frameArray.length - 1)) {
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme);
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').style.display = '';
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() {
$lb.changeContent($lb.activeFrame + 1); return false;
}
} else {
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() { return false; }
}
// Image Viewer (Lytebox)
} else {
// if not first image in set, display prev image button
if(this.activeImage != 0) {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme);
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').style.display = '';
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() {
$lb.changeContent($lb.activeImage - 1); return false;
}
}
if (this.navTypeHash['Hover_by_type_' + this.navType]) {
var object2 = this.doc.getElementById('lbPrevHov');
object2.style.display = '';
object2.onclick = function() {
$lb.changeContent($lb.activeImage - 1); return false;
}
}
} else {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.getElementById(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() { return false; }
}
}
// if not last image in set, display next image button
if(this.activeImage != (this.imageArray.length - 1)) {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme);
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').style.display = '';
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() {
$lb.changeContent($lb.activeImage + 1); return false;
}
}
if (this.navTypeHash['Hover_by_type_' + this.navType]) {
var object2 = this.doc.getElementById('lbNextHov');
object2.style.display = '';
object2.onclick = function() {
$lb.changeContent($lb.activeImage + 1); return false;
}
}
} else {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.getElementById(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() { return false; }
}
}
}
this.enableKeyboardNav();
}; // updateNav()
//*********************************************************************************/
// enableKeyboardNav(), disableKeyboardNav(), keyboardAction() -- COMBINED COMMENT
//*********************************************************************************/
Lytebox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; };
Lytebox.prototype.disableKeyboardNav = function() { document.onkeydown = ''; };
Lytebox.prototype.keyboardAction = function(e) {
var keycode = key = escape = null;
keycode = (e == null) ? event.keyCode : e.which;
key = String.fromCharCode(keycode).toLowerCase();
escape = (e == null) ? 27 : e.DOM_VK_ESCAPE;
if ((key == 'x') || (key == 'c') || (keycode == escape || keycode == 27)) { // close lytebox
parent.$lb.end();
} else if (keycode == 32 && $lb.isSlideshow && $lb.showPlayPause) { // toggle play/pause
if ($lb.isPaused) {
$lb.togglePlayPause($lb.navTop ? 'lbPlayTop' : 'lbPlay', $lb.navTop ? 'lbPauseTop' : 'lbPause');
} else {
$lb.togglePlayPause($lb.navTop ? 'lbPauseTop' : 'lbPause', $lb.navTop ? 'lbPlayTop' : 'lbPlay');
}
return false;
} else if (key == 'p' || keycode == 37) { // display previous image
if ($lb.isSlideshow) {
if($lb.activeSlide != 0) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.activeSlide - 1);
}
} else if ($lb.isLyteframe) {
if($lb.activeFrame != 0) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.activeFrame - 1);
}
} else {
if($lb.activeImage != 0) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.activeImage - 1);
}
}
} else if (key == 'n' || keycode == 39) { // display next image
if ($lb.isSlideshow) {
if($lb.activeSlide != ($lb.slideArray.length - 1)) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.activeSlide + 1);
}
} else if ($lb.isLyteframe) {
if($lb.activeFrame != ($lb.frameArray.length - 1)) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.activeFrame + 1);
}
} else {
if($lb.activeImage != ($lb.imageArray.length - 1)) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.activeImage + 1);
}
}
}
};
//************************************************************/
// preloadNeighborImages() - Preload previous and next images.
//************************************************************/
Lytebox.prototype.preloadNeighborImages = function() {
if (this.isSlideshow) {
if ((this.slideArray.length - 1) > this.activeSlide) {
preloadNextImage = new Image();
preloadNextImage.src = this.slideArray[this.activeSlide + 1][0];
}
if(this.activeSlide > 0) {
preloadPrevImage = new Image();
preloadPrevImage.src = this.slideArray[this.activeSlide - 1][0];
}
} else {
if ((this.imageArray.length - 1) > this.activeImage) {
preloadNextImage = new Image();
preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
}
if(this.activeImage > 0) {
preloadPrevImage = new Image();
preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
}
}
}; // preloadNeighborImages()
//************************************************************************************************/
// togglePlayPause() - Toggle play/pause buttons, and set isPaused to play or pause the slideshow.
//
// @param string sHideId The ID of the element to hide
// @param string sShowId The ID of the element to show
//************************************************************************************************/
Lytebox.prototype.togglePlayPause = function(sHideId, sShowId) {
// clear all settimeout's immediately to avoid going to next slide... if "pause" was pressed.
// if this was a slideshow, then clear the appropriate timeout id array
if (this.isSlideshow && (sHideId == 'lbPauseTop' || sHideId == 'lbPause')) {
for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
}
this.doc.getElementById(sHideId).style.display = 'none';
this.doc.getElementById(sShowId).style.display = '';
// determine the state (paused or not) and take the appropriate action (changeContent or end) if the play button is clicked
if (sHideId == 'lbPlayTop' || sHideId == 'lbPlay') {
this.isPaused = false;
// if we're at the end, either loop or close the viewer depending on preferences
if (this.activeSlide == (this.slideArray.length - 1)) {
if (this.loopSlideshow) {
this.changeContent(0); // start over
} else if (this.autoEnd) {
this.end(); // close
}
} else {
// change to the next image in the slideshow
this.changeContent(this.activeSlide + 1);
}
} else {
this.isPaused = true;
}
}; // togglePlayPause()
//****************************************************************************/
// end() - sCaller was added as a parameter so that we could close Lytebox if
// the "Close" button is clicked while in the "paused" state.
//
// @param string sCaller
//****************************************************************************/
Lytebox.prototype.end = function(sCaller) {
// If we're doing a slideshow and in a paused state, just return
var closeClick = (sCaller == 'slideshow' ? false : true);
if (this.isSlideshow && this.isPaused && !closeClick) { return; }
// If we're here, then a request was made to close the viewer, so we'll first see if a "before close" handler is set.
if (this.beforeEnd != '') {
// Verify that this is a valid function, and if so call it. If the return value equates to false the viewer will remain open.
var callback = window[this.beforeEnd];
if (typeof callback === 'function') {
if (!callback()) { return; }
}
}
// Disable keyboard navigation while we clean up.
this.disableKeyboardNav();
// (07/20/2011) Save last func for body.onscroll - fixed by A.Popov http://s3blog.org
document.body.onscroll = this.bodyOnscroll;
// (07/20/2011) Refresh main page? - by A.Popov http://s3blog.org
if (this.refreshPage) {
this.doc.getElementById('lbLoading').style.display = '';
this.doc.getElementById('lbImage').style.display = 'none';
this.doc.getElementById('lbIframe').style.display = 'none';
this.doc.getElementById('lbPrev').style.display = 'none';
this.doc.getElementById('lbNext').style.display = 'none';
this.doc.getElementById('lbIframeContainer').style.display = 'none';
this.doc.getElementById('lbTopContainer').style.display = 'none';
this.doc.getElementById('lbBottomContainer').style.display = 'none';
this.refreshPage = false;
var uri_href = top.location.href;
var reg=/\#.*$/g;
uri_href=uri_href.replace(reg, "");
top.location.href = uri_href;
return;
}
this.doc.getElementById('lbMain').style.display = 'none';
this.fade('lbOverlay', (this.doAnimations && this.ieVersion >=9 ? this.maxOpacity : 0));
this.toggleSelects('visible');
if (this.hideObjects) { this.toggleObjects('visible'); }
this.doc.getElementById('lbOuterContainer').style.width = '200px';
this.doc.getElementById('lbOuterContainer').style.height = '200px';
// if this was a slideshow, then clear the appropriate timeout id array
if (this.isSlideshow) {
for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
}
// if this was a "lyteframe", re-initialize so that the iframe is reset (fixes a bug where IE continues playing flash content)
if (this.isLyteframe) {
this.initialize();
this.doc.getElementById('lbIframe').src = 'about:blank';
}
// Finally, see if we have a "after close" handler set and make the call if so.
if (this.afterEnd != '') {
var callback = window[this.afterEnd];
if (typeof callback === 'function') {
callback();
}
}
}; // end()
//************************************************************************************/
// checkFrame() - Determines if we are in an iFrame or not so we can display properly
//************************************************************************************/
Lytebox.prototype.checkFrame = function() {
// If we are an iFrame ONLY (framesets are excluded because we can't overlay a frameset).
if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
this.isFrame = true;
this.doc = parent.document;
} else {
this.isFrame = false;
this.doc = document;
}
}; // checkFrame()
//***********************************************************************************/
// getPixelRate() - Determines the rate (number of pixels) that we want to scale PER
// call to a setTimeout() function.
//
// @param int iDim Image/content dimensions
// @param int iCurrent Current dimensions of the container
//***********************************************************************************/
Lytebox.prototype.getPixelRate = function(iCurrent, iDim) {
var diff = (iDim > iCurrent) ? iDim - iCurrent : iCurrent - iDim;
if (diff >= 0 && diff <= 100) { return (100 / this.resizeDuration); }
if (diff > 100 && diff <= 200) { return (150 / this.resizeDuration); }
if (diff > 200 && diff <= 300) { return (200 / this.resizeDuration); }
if (diff > 300 && diff <= 400) { return (250 / this.resizeDuration); }
if (diff > 400 && diff <= 500) { return (300 / this.resizeDuration); }
if (diff > 500 && diff <= 600) { return (350 / this.resizeDuration); }
if (diff > 600 && diff <= 700) { return (400 / this.resizeDuration); }
if (diff > 700) { return (450 / this.resizeDuration); }
}; // getPixelRate()
//******************************************************/
// appear() - Makes an element fade in (appear).
//
// @param string sId
// @param int iOpacity
//******************************************************/
Lytebox.prototype.appear = function(sId, iOpacity) {
var object = this.doc.getElementById(sId).style;
object.opacity = (iOpacity / 100);
object.MozOpacity = (iOpacity / 100);
object.KhtmlOpacity = (iOpacity / 100);
object.filter = "alpha(opacity=" + (iOpacity + 10) + ")";
if (iOpacity == 100 && (sId == 'lbImage' || sId == 'lbIframe')) {
try { object.removeAttribute("filter"); } catch(e) {} /* Fix added for IE Alpha Opacity Filter bug. */
this.updateDetails();
} else if (iOpacity >= this.maxOpacity && sId == 'lbOverlay') {
// Clear the overlay timer...
for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); }
return;
} else if (iOpacity >= 100 && (sId == 'lbBottomContainer' || sId == 'lbTopContainer')) {
try { object.removeAttribute("filter"); } catch(e) {} /* Fix added for IE Alpha Opacity Filter bug. */
// Clear all the image timers...
for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); }
// Here we resize the overlay to ensure that it stretches the length of the page, since there is
// an issue with white space remaining if the image scales outside of the known page height...
this.doc.getElementById('lbOverlay').style.height = this.getPageSize()[1] + "px";
} else {
if (sId == 'lbOverlay') {
this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("$lb.appear('" + sId + "', " + (iOpacity+20) + ")", 1);
} else {
this.imageTimerArray[this.imageTimerCount++] = setTimeout("$lb.appear('" + sId + "', " + (iOpacity+10) + ")", 1);
}
}
}; // appear()
//******************************************************/
// fade() - Makes an element fade out (disappear).
//
// @param string sId
// @param int iOpacity
//******************************************************/
Lytebox.prototype.fade = function(sId, iOpacity) {
var object = this.doc.getElementById(sId).style;
object.opacity = (iOpacity / 100);
object.MozOpacity = (iOpacity / 100);
object.KhtmlOpacity = (iOpacity / 100);
object.filter = "alpha(opacity=" + iOpacity + ")";
if (iOpacity <= 0) {
try {
object.display = 'none';
} catch(err) { }
} else if (sId == 'lbOverlay') {
this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("$lb.fade('" + sId + "', " + (iOpacity-20) + ")", 1);
} else {
this.timerIDArray[this.timerIDCount++] = setTimeout("$lb.fade('" + sId + "', " + (iOpacity-10) + ")", 1);
}
}; // fade()
//******************************************************/
// resizeW() - Resize the width of an element (animated)
//
// @param string sId
// @param int iCurrentW
// @param int iMaxW
// @param int iPixelRate
// @param int iSpeed
//******************************************************/
Lytebox.prototype.resizeW = function(sId, iCurrentW, iMaxW, iPixelRate, iSpeed) {
// Ensure that the "height" is finished resizing before scaling the width.
if (!this.hDone) {
this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("$lb.resizeW('" + sId + "', " + iCurrentW + ", " + iMaxW + ", " + iPixelRate + ")", iSpeed);
return;
}
var object = this.doc.getElementById(sId);
var newW = (this.doAnimations ? iCurrentW : iMaxW);
object.style.width = (newW) + "px";
if (newW < iMaxW) {
newW += (newW + iPixelRate >= iMaxW) ? (iMaxW - newW) : iPixelRate; // increase size
} else if (newW > iMaxW) {
newW -= (newW - iPixelRate <= iMaxW) ? (newW - iMaxW) : iPixelRate; // decrease size
}
this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("$lb.resizeW('" + sId + "', " + newW + ", " + iMaxW + ", " + iPixelRate + ", " + (iSpeed+.02) + ")", iSpeed+.02);
if (parseInt(object.style.width) == iMaxW) {
this.wDone = true;
// Clear all the timers for resizing...
for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); }
}
}; // resizeW()
//********************************************************/
// resizeH() - Resize the height of an element (animated)
//
// @param string sId
// @param int iCurrentH
// @param int iMaxH
// @param int iPixelRate
// @param int iSpeed
//********************************************************/
Lytebox.prototype.resizeH = function(sId, iCurrentH, iMaxH, iPixelRate, iSpeed) {
var object = this.doc.getElementById(sId);
var newH = (this.doAnimations ? iCurrentH : iMaxH);
object.style.height = (newH) + "px";
if (newH < iMaxH) {
newH += (newH + iPixelRate >= iMaxH) ? (iMaxH - newH) : iPixelRate; // increase size
} else if (newH > iMaxH) {
newH -= (newH - iPixelRate <= iMaxH) ? (newH - iMaxH) : iPixelRate; // decrease size
}
this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("$lb.resizeH('" + sId + "', " + newH + ", " + iMaxH + ", " + iPixelRate + ", " + (iSpeed+.02) + ")", iSpeed+.02);
if (parseInt(object.style.height) == iMaxH) {
this.hDone = true;
// Clear all the timers for resizing...
for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); }
}
}; // resizeH()
//**************************************************/
// getPageScroll() - returns the y page scroll value
//**************************************************/
Lytebox.prototype.getPageScroll = function() {
if (self.pageYOffset) {
return this.isFrame ? parent.pageYOffset : self.pageYOffset;
} else if (this.doc.documentElement && this.doc.documentElement.scrollTop){ // Explorer 6 Strict
return this.doc.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
return this.doc.body.scrollTop;
}
}; // getPageScroll()
//*******************************************************************************/
// getPageSize() - Returns array with page width, height and window width, height
//*******************************************************************************/
Lytebox.prototype.getPageSize = function() {
var xScroll, yScroll, windowWidth, windowHeight;
if (window.innerHeight && window.scrollMaxY) {
xScroll = this.doc.scrollWidth;
yScroll = (this.isFrame ? parent.innerHeight : self.innerHeight) + (this.isFrame ? parent.scrollMaxY : self.scrollMaxY);
} else if (this.doc.body.scrollHeight > this.doc.body.offsetHeight){ // all but Explorer Mac
xScroll = this.doc.body.scrollWidth;
yScroll = this.doc.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth;
yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight;
// Strict mode fixes
xScroll = (xScroll < this.doc.body.offsetWidth) ? this.doc.body.offsetWidth : xScroll;
yScroll = (yScroll < this.doc.body.offsetHeight) ? this.doc.body.offsetHeight : yScroll;
}
if (self.innerHeight) { // all except Explorer
windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth;
windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = this.doc.documentElement.clientWidth;
windowHeight = this.doc.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth;
windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight;
// Strict mode fixes...
windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth;
windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight;
}
// for small pages with total height/width less then height/width of the viewport
var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;
var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll;
return new Array(pageWidth, pageHeight, windowWidth, windowHeight);
}; // getPageSize()
//**********************************************************************************************************/
// toggleObjects() - Toggles embedded objects so they don't appear above the overlay/lytebox.
//
// @param string sState hidden|visible
//**********************************************************************************************************/
Lytebox.prototype.toggleObjects = function(sState) {
var objects = this.doc.getElementsByTagName("object");
for (var i = 0; i < objects.length; i++) {
objects[i].style.visibility = (sState == "hide") ? 'hidden' : 'visible';
}
var embeds = this.doc.getElementsByTagName("embed");
for (var i = 0; i < embeds.length; i++) {
embeds[i].style.visibility = (sState == "hide") ? 'hidden' : 'visible';
}
if (this.isFrame) {
for (var i = 0; i < parent.frames.length; i++) {
try {
objects = parent.frames[i].window.document.getElementsByTagName("object");
for (var j = 0; j < objects.length; j++) {
objects[j].style.visibility = (sState == "hide") ? 'hidden' : 'visible';
}
} catch(e) { /* ignore */ }
try {
embeds = parent.frames[i].window.document.getElementsByTagName("embed");
for (var j = 0; j < embeds.length; j++) {
embeds[j].style.visibility = (sState == "hide") ? 'hidden' : 'visible';
}
} catch(e) { /* ignore */ }
}
}
}; // toggleObjects()
//**********************************************************************************************************/
// toggleSelects() - Toggles select boxes between hidden and visible states, including those in iFrames
//
// @param string sState hidden|visible
//**********************************************************************************************************/
Lytebox.prototype.toggleSelects = function(sState) {
// hide in the parent frame, then in child frames
var selects = this.doc.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++ ) {
selects[i].style.visibility = (sState == "hide") ? 'hidden' : 'visible';
}
if (this.isFrame) {
for (var i = 0; i < parent.frames.length; i++) {
try {
selects = parent.frames[i].window.document.getElementsByTagName("select");
for (var j = 0; j < selects.length; j++) {
selects[j].style.visibility = (sState == "hide") ? 'hidden' : 'visible';
}
} catch(e) { /* ignore */ }
}
}
}; // toggleSelects()
//********************************************************************************/
// pause() - Pauses code execution for specified time. Uses busy code, not good.
//
// @param int iMillis Milliseconds
//********************************************************************************/
Lytebox.prototype.pause = function(iMillis) {
var now = new Date();
var exitTime = now.getTime() + iMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime) { return; }
}
}; // pause()
//************************************************************************/
// combine() - Combines objects of anchors and areas into a single array.
//
// @param array aAnchors Array of anchor "a" elements
// @param array aAreas Array of area map elements
//************************************************************************/
Lytebox.prototype.combine = function(aAnchors, aAreas) {
var lyteLinks = [];
for (var i = 0; i < aAnchors.length; i++) {
lyteLinks.push(aAnchors[i]);
}
for (var i = 0; i < aAreas.length; i++) {
lyteLinks.push(aAreas[i]);
}
return lyteLinks;
}; // combine()
//************************************************************************/
// removeDuplicates() - Removes duplicate items from an incoming array.
//
// @param array aArray
//************************************************************************/
Lytebox.prototype.removeDuplicates = function (aArray) {
for (var i = 1; i < aArray.length; i++) {
if (aArray[i][0] == aArray[i-1][0]) {
aArray.splice(i,1);
}
}
return aArray;
}; // removeDuplicates()
//****************************************************************************************************/
// printWindow() - Sets up the new window for printing, then calls $lb.printContent() to print.
//****************************************************************************************************/
Lytebox.prototype.printWindow = function () {
// Can we determine the width/height of the content?
var w = 400;
var h = 300;
var left = parseInt((screen.availWidth/2) - (w/2));
var top = parseInt((screen.availHeight/2) - (h/2));
var wOpts = "width=" + w + ",height=" + h + ",left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top + "directories=0,location=0,menubar=0,resizable=0,scrollbars=0,status=0,titlebar=0,toolbar=0";
var d = new Date();
var wName = 'Print' + d.getTime();
var wUrl = document.getElementById(this.printId).src;
// Note that wContent is referenced in printContent, hence the reason it's being saved to an object.
this.wContent = window.open(wUrl, wName, wOpts);
this.wContent.focus();
var t = setTimeout("$lb.printContent()",1000);
}; // printWindow()
//************************************************************************************/
// printContent() - Prints the contents of the loaded window when the document loads.
//************************************************************************************/
Lytebox.prototype.printContent = function() {
if (this.wContent.document.readyState == 'complete') {
this.wContent.print();
this.wContent.close();
this.wContent = null;
} else {
var t = setTimeout("$lb.printContent()",1000);
}
}; // printContent()
//**********************************************************************************************************/
// setOptions(sOptions) - Sets up the look/feel of the viewer as well as other configurable options, as shown below.
//
// @param string sOptions Possible values shown below
//
// * Global Options
// - hideObjects:true|false
// - autoResize:true|false
// - doAnimations:true|false
// - forceCloseClick:true|false
// - refreshPage:true|false
// - showPrint:true|false
// - navType:1|2|3
// - titleTop:true|false
// - navTop:true|false
// - beforeStart:
// - afterStart:
// - beforeEnd:
// - afterEnd:
//
// * Lyteframe Only
// - scrollbars:auto|yes|no
// - width:#%|#px
// - height:#%|#px
// - loopPlayback:true|false
// - autoPlay:true|false
//
// * Lyteshow Only
// - slideInterval:#
// - showNavigation:false|true
// - showClose:true|false
// - showDetails:true|false
// - showPlayPause:true|false
// - autoEnd:true|false
// - pauseOnNextClick:false|true
// - pauseOnPrevClick:true|false
// - loopSlideshow:true|false
//**********************************************************************************************************/
Lytebox.prototype.setOptions = function(sOptions) {
// Reset all options.
this.group = '';
this.hideObjects = this.__hideObjects;
this.autoResize = this.__autoResize;
this.doAnimations = this.__doAnimations;
this.forceCloseClick = this.__forceCloseClick;
this.refreshPage = this.__refreshPage;
this.showPrint = this.__showPrint;
this.navType = this.__navType;
this.titleTop = this.__titleTop;
this.navTop = this.__navTop;
this.beforeStart = this.__beforeStart;
this.afterStart = this.__afterStart
this.beforeEnd = this.__beforeEnd;
this.afterEnd = this.__afterEnd;
this.scrollbars = this.__scrollbars;
this.width = this.__width;
this.height = this.__height;
this.loopPlayback = this.__loopPlayback;
this.autoPlay = this.__autoPlay;
this.slideInterval = this.__slideInterval;
this.showNavigation = this.__showNavigation;
this.showClose = this.__showClose;
this.showDetails = this.__showDetails;
this.showPlayPause = this.__showPlayPause;
this.autoEnd = this.__autoEnd;
this.pauseOnNextClick = this.__pauseOnNextClick;
this.pauseOnPrevClick = this.__pauseOnPrevClick;
this.loopSlideshow = this.__loopSlideshow;
// Each configurable option will be space separated, so start by splitting the sting into an array.
var sName = sValue = '';
var aSetting = null;
var aOptions = sOptions.split(' ');
// Loop to set each option.
for (var i = 0; i < aOptions.length; i++) {
// The option itself should be a name:value pair, so split into what should be a two element array.
aSetting = aOptions[i].split(':');
sName = (aSetting.length > 1 ? String(aSetting[0]).trim().toLowerCase() : '');
sValue = (aSetting.length > 1 ? String(aSetting[1]).trim() : '');
// Now we'll run some tests to determine which particular option is being set, and what the value should be.
switch(sName) {
// Global Options
case 'group': this.group = (sName == 'group' ? (sValue != '' ? sValue : '') : ''); break;
case 'hideobjects': this.hideObjects = (/true|false/.test(sValue) ? (sValue == 'true') : this.__hideObjects); break;
case 'autoresize': this.autoResize = (/true|false/.test(sValue) ? (sValue == 'true') : this.__autoResize); break;
case 'doanimations': this.doAnimations = (/true|false/.test(sValue) ? (sValue == 'true') : this.__doAnimations); break;
case 'forcecloseclick': this.forceCloseClick = (/true|false/.test(sValue) ? (sValue == 'true') : this.__forceCloseClick); break;
case 'refreshpage': this.refreshPage = (/true|false/.test(sValue) ? (sValue == 'true') : this.__refreshPage); break;
case 'showprint': this.showPrint = (/true|false/.test(sValue) ? (sValue == 'true') : this.__showPrint); break;
case 'navtype': this.navType = (/[1-3]{1}/.test(sValue) ? parseInt(sValue) : this.__navType); break;
case 'titletop': this.titleTop = (/true|false/.test(sValue) ? (sValue == 'true') : this.__titleTop); break;
case 'navtop': this.navTop = (/true|false/.test(sValue) ? (sValue == 'true') : this.__navTop); break;
case 'beforestart': this.beforeStart = (sValue != '' ? sValue : this.__beforeStart); break;
case 'afterstart': this.afterStart = (sValue != '' ? sValue : this.__afterStart); break;
case 'beforeend': this.beforeEnd = (sValue != '' ? sValue : this.__beforeEnd); break;
case 'afterend': this.afterEnd = (sValue != '' ? sValue : this.__afterEnd); break;
// Lyteframe Only
case 'scrollbars': this.scrollbars = (/auto|yes|no/.test(sValue) ? sValue : this.__scrollbars); break;
case 'width': this.width = (/\d(%|px|)/.test(sValue) ? sValue : this.__width); break;
case 'height': this.height = (/\d(%|px|)/.test(sValue) ? sValue : this.__height); break;
case 'loopplayback': this.loopPlayback = (/true|false/.test(sValue) ? (sValue == 'true') : this.__loopPlayback); break;
case 'autoplay': this.autoPlay = (/true|false/.test(sValue) ? (sValue == 'true') : this.__autoPlay); break;
// Lyteshow Only
case 'slideinterval': this.slideInterval = (/\d/.test(sValue) ? parseInt(sValue) : this.__slideInterval); break;
case 'shownavigation': this.showNavigation = (/true|false/.test(sValue) ? (sValue == 'true') : this.__showNavigation); break;
case 'showclose': this.showClose = (/true|false/.test(sValue) ? (sValue == 'true') : this.__showClose); break;
case 'showdetails': this.showDetails = (/true|false/.test(sValue) ? (sValue == 'true') : this.__showDetails); break;
case 'showplaypause': this.showPlayPause = (/true|false/.test(sValue) ? (sValue == 'true') : this.__showPlayPause); break;
case 'autoend': this.autoEnd = (/true|false/.test(sValue) ? (sValue == 'true') : this.__autoEnd); break;
case 'pauseonnextclick': this.pauseOnNextClick = (/true|false/.test(sValue) ? (sValue == 'true') : this.__pauseOnNextClick); break;
case 'pauseonprevclick': this.pauseOnPrevClick = (/true|false/.test(sValue) ? (sValue == 'true') : this.__pauseOnPrevClick); break;
case 'loopslideshow': this.loopSlideshow = (/true|false/.test(sValue) ? (sValue == 'true') : this.__loopSlideshow); break;
}
}
}; // setOptions()
//**********************************************************************************************************/
// buildObject() - Returns the QuickTime version, if installed.
//
// @param int w Container width
// @param int h Container height
// @param string url URL of content to play
// @param string ext File extension
//
// @return integer -1 if no player was found, a positive integer otherwise.
//**********************************************************************************************************/
Lytebox.prototype.buildObject = function(w, h, url, ext) {
// TODO: ability to disable embeddeding plugins (this.autoEmbed = false)
var object = '';
var classId = '';
var codebase = '';
var pluginsPage = '';
var auto = this.autoPlay ? 'true' : 'false';
var loop = this.loopPlayback ? 'true' : 'false';
switch(ext) {
// QuickTime (.mov)
case 'mov':
codebase = 'http://www.apple.com/qtactivex/qtplugin.cab';
pluginsPage = 'http://www.apple.com/quicktime/';
classId = 'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B';
object = '';
if (this.qtVersion <= 0) {
object = '
'
+ '
QUICKTIME PLAYER
'
+ '
Content on this page requires a newer version of QuickTime. Please click the image link below to download and install the latest version.
'
+ '
'
+ '
';
}
break;
// Windows Media (.avi, .mpg, .mpeg)
// Non IE browsers will play these files using QuickTime, and if no codec is found QT tends to stutter. Note that in chrome you MUST put the full URL,
// otherwise it won't work. More on that here: http://www.google.com/support/forum/p/Chrome/thread?tid=2246e55fc37cea59&hl=en
case 'avi':
case 'mpg':
case 'mpeg':
case 'wmv':
classId = 'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B';
object = '';
break;
// Windows Media (.wmv) -- This hasn't worked too well... may not need?
/*
case 'wmv':
classId = 'clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95';
pluginsPage = 'http://www.microsoft.com/Windows/MediaPlayer/';
codebase = 'http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,0,0';
// Yes, codebase should be the value of pluginsPage... not a type.
object = ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ '';
break;
*/
// Flash (.swf) - Works in FF, IE, Chrome, and Opera (latest versions)
case 'swf':
classId = 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000';
object = ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ '
'
+ '
FLASH PLAYER
'
+ '
Content on this page requires a newer version of Adobe Flash Player. Please click the image link below to download and install the latest version.
'
+ '
'
+ '
'
+ ''
+ ''
+ ''
+ '';
break;
}
return object;
}; // buildObject();
//**********************************************************************************************************/
// getQuicktimeVersion() - Returns the QuickTime version, if installed/enabled.
//
// @return integer -1 if no player was found, a positive integer otherwise.
//**********************************************************************************************************/
Lytebox.prototype.getQuicktimeVersion = function() {
var agent = navigator.userAgent.toLowerCase();
var version = -1;
// NS3+, Opera3+, IE5+ Mac (support plugin array): check for Quicktime plugin in plugin array
if (navigator.plugins != null && navigator.plugins.length > 0) {
for (i=0; i < navigator.plugins.length; i++ ) {
var plugin = navigator.plugins[i];
if (plugin.name.indexOf('QuickTime') > -1) {
version = parseFloat(plugin.name.substring(18));
}
}
// IE4+ Win32: attempt to create an ActiveX object
} else if (agent.indexOf('msie') != -1 && parseInt(navigator.appVersion) >= 4 && agent.indexOf('win') != -1 && agent.indexOf('16bit') == -1) {
var control = null;
try {
control = new ActiveXObject('QuickTime.QuickTime');
} catch (e) { }
if (control) {
// In case QuickTimeCheckObject.QuickTimeCheck does not exist
isInstalled = true;
}
try {
// This generates a user prompt in Internet Explorer 7
control = new ActiveXObject('QuickTimeCheckObject.QuickTimeCheck');
} catch (e) { return; }
if (control) {
// In case QuickTime.QuickTime does not exist
isInstalled = true;
// Get version
version = control.QuickTimeVersion.toString(16); // Convert to hex
version = version.substring(0, 1) + '.' + version.substring(1, 3);
version = parseInt(version);
}
}
return version;
}; // getQuicktimeVersion()
//**********************************************************************************************************/
// findPos() - Returns the left/top position of an element, as well as the element's height.
//
// @param object HTML element
// @return array [left,top,height]
//**********************************************************************************************************/
Lytebox.prototype.findPos = function(el) {
// IE in QuirksMode chokes here, so return preset values.
if (this.ie && this.doc.compatMode == 'BackCompat') {
return [0, 16, 12];
}
var left = 0;
var top = 0;
var height = 0;
height = el.offsetHeight + 6;
if (el.offsetParent) {
do {
left += el.offsetLeft;
top += el.offsetTop;
} while (el = el.offsetParent);
}
return [left, top, height];
}; // findPos()
//**********************************************************************************************************/
// isMobile() - Will attempt to determine if we're dealing with a mobile device/tablet.
//
// @return boolean true|false
//**********************************************************************************************************/
Lytebox.prototype.isMobile = function() {
// Get the user agent.
var ua = navigator.userAgent;
// Will return true if a mobile device is detected, false otherwise.
return (ua.match(/ipad/i) != null)
|| (ua.match(/ipod/i) != null)
|| (ua.match(/iphone/i) != null)
|| (ua.match(/android/i) != null)
|| (ua.match(/opera mini/i) != null)
|| (ua.match(/blackberry/i) != null)
|| (ua.match(/(pre\/|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine)/i) != null)
|| (ua.match(/(iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile)/i) != null)
|| (ua.match(/(mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|mp500|samu3|samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|m881|s920|n210|s700|c-810|_h797|mob-x|sk16d|848b|mowser|s580|r800|471x|v120|rim8|c500foma:|160x|x160|480x|x640|t503|w839|i250|sprint|w398samr810|m5252|c7100|mt126|x225|s5330|s820|htil-g1|fly v71|s302|-x113|novarra|k610i|-three|8325rc|8352rc|sanyo|vx54|c888|nx250|n120|mtk |c5588|s710|t880|c5005|i;458x|p404i|s210|c5100|teleca|s940|c500|s590|foma|samsu|vx8|vx9|a1000|_mms|myx|a700|gu1100|bc831|e300|ems100|me701|me702m-three|sd588|s800|8325rc|ac831|mw200|brew |d88|htc\/|htc_touch|355x|m50|km100|d736|p-9521|telco|sl74|ktouch|m4u\/|me702|8325rc|kddi|phone|lg |sonyericsson|samsung|240x|x320|vx10|nokia|sony cmd|motorola|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|psp|treo)/i) != null);
}; // isMobile()
//**********************************************************************************************************/
// Extend the built-in String object by adding a trim function
//**********************************************************************************************************/
String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }
//***************************************************************************************************************************/
// Add Event Listeners for initLytebox, which instantiates an instance of the viewer and hooks into "lytebox" activated links
//***************************************************************************************************************************/
if (window.addEventListener) { // W3C
window.addEventListener("load", initLytebox, false);
} else if (window.attachEvent) { // Exploder
window.attachEvent("onload", initLytebox);
} else { // Old skool
window.onload = function() {initLytebox();}
}
function initLytebox() { myLytebox = $lb = new Lytebox(); }