//**************************************************************************************************/
// Lytebox v5.2
//
// Author: Markus F. Hay
// Website: http://lytebox.com (http://dolem.com/lytebox)
// Date: October 2, 2011
// License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
//**************************************************************************************************/
//**************************************************************************************************/
// Lytebox constructor
//
// @param boolean bInitialize true to initialize the DOM, false to simply instantiate the object
// @param string sTheme grey|black|red|green|blue|gold|orange
// @param int iNav 1|2|3
// @param boolean bRounded true|false (rounded borders | square borders)
// @param boolean bBorder true|false (border on | border off)
//**************************************************************************************************/
function Lytebox(bInitialize, aHttp) {
// 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="showPrint:true").
/*** Language Configuration ***/
// English - configure for your language or customize as needed.
// Note that these values will be seen by users when mousing over buttons.
this.label = new Object();
this.label['close'] = 'Close (Esc)';
this.label['prev'] = 'Previous (\u2190)'; // Previous (left arrow)
this.label['next'] = 'Next (\u2192)'; // Next (right arrow)
this.label['play'] = 'Play (spacebar)';
this.label['pause'] = 'Pause (spacebar)';
this.label['print'] = 'Print';
this.label['image'] = 'Image %1 of %2'; // %1 = active image, %2 = total images
this.label['page'] = 'Page %1 of %2'; // %1 = active page, %2 = total pages
/*** Configure Lytebox ***/
this.theme = 'grey'; // themes: black (default), grey, red, green, blue, gold, orange
this.roundedBorder = false; // controls whether or not the viewer uses rounded corners (false = square corners)
this.innerBorder = true; // controls whether to show the inner border around image/html content
this.outerBorder = false; // controls whether to show the outer grey (or theme) border
this.resizeSpeed = 7; // 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 = this.isMobile() ? false : true; // if true, viewer will remain in a fixed position, otherwise page scrolling will be allowed
this.inherit = true; // controls whether or not data-lyte-options are inherited from the first link in a grouped set
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 ALL animation effects (i.e. overlay fade in/out, image resize transition, etc.)
this.__animateOverlay = false; // controls ONLY the overlay (background darkening) effects, and whether or not to fade in/out
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 = 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 HTML Content / Media Viewer Options ***/
this.__width = '80%'; // default width of content viewer
this.__height = '80%'; // default height of content viewer
this.__scrolling = 'auto'; // controls whether or not scrolling is allowed in the content viewer -- 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
this.__autoEmbed = true; // controls whether or not to automatically embed media in an object tag
/*** Configure Slideshow Options ***/
this.__slideInterval = 4000; // change value (milliseconds) to increase/decrease the time between "slides"
this.__showNavigation = 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.__tipDecoration = 'dotted'; // controls the text-decoration (underline) of the tip link (dotted|solid|none)
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;
// These will be used to clear the settimeout calls (release resources)
this.resizeWTimerArray = new Array();
this.resizeWTimerCount = 0;
this.resizeHTimerArray = new Array();
this.resizeHTimerCount = 0;
this.changeContentTimerArray= new Array();
this.changeContentTimerCount= 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;
// These arrays will hold grouped content
this.imageArray = new Array();
this.slideArray = new Array();
this.frameArray = new Array();
this.contentNum = null;
// This will store the page dimensions (results from calls to getPageSize())
this.aPageSize = new Array();
// This will be used to determine if the overlay has finished "appearing"
this.overlayLoaded = false;
// Check for iFrame environment (will set this.isFrame and this.doc member variables)
this.checkFrame();
// Will hold the iframe src.
this.frameSrc = '';
// Set to false by default
this.isSlideshow = false;
this.isLyteframe = false;
this.tipSet = false;
// We need to know the certain browser versions (or if it's IE) since IE is "special" and requires spoon feeding.
this.ieVersion = this.ffVersion = this.chromeVersion = this.operaVersion = this.safariVersion = -1;
this.ie = this.ff = this.chrome = this.opera = this.safari = false;
this.setBrowserInfo();
// 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
// (09/13/2011) The following statements are only executed if we're initializing Lytebox (as opposed to creating the object for library functions only).
if (bInitialize) {
// Store our array of request objects, if there are any.
this.http = aHttp;
// (07/20/2011) Save last func for body.onscroll - fixed by A.Popov http://s3blog.org
this.bodyOnscroll = document.body.onscroll;
// Ensure that the resizeSpeed has an expected value.
if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }
if(this.resizeSpeed < 1) { this.resizeSpeed = 1; }
// Now calculate the resizeDuration, which varies from browser to browser, sadly. Opera defaults to 7 in the first check, BTW.
var ie8Duration = 2; // If IE8 is too fast/jittery, increase this until it performs optimaly.
this.resizeDuration = (11 - this.resizeSpeed) * (this.ie ? (this.ieVersion >= 9 ? 6 : (this.ieVersion == 8 ? (this.doc.compatMode == 'BackCompat' ? ie8Duration : ie8Duration - 1) : 3)) : 7);
this.resizeDuration = this.ff ? (11 - this.resizeSpeed) * (this.ffVersion < 6 ? 3 : 12) : this.resizeDuration;
this.resizeDuration = this.chrome ? (11 - this.resizeSpeed) * 5 : this.resizeDuration;
this.resizeDuration = this.safari ? (11 - this.resizeSpeed) * 20 : this.resizeDuration;
// Now initialize the DOM.
// 09/30/2011 - Bypass this if we're loading the Lytebox library from within a Lytebox enabled HTML content viewer. If we allow this,
// then the viewer will be closed since the DOM reinitializes and resets the lbIframe container.
if (window.name != 'lbIframe') {
this.initialize();
}
// Otherwise, we're going to initialize some global variables.
} else {
// This will be used to keep track of unique request objects.
this.http = new Array();
// Define a short-hand version of document.getElementById() with caching, if one doesn't exist.
// TODO: Write a DOM object wrapper so we can extend $ to have access to our internal library functions (chained)
if (typeof $ == 'undefined') {
$ = function (id) {
if ($.cache[id] === undefined) {
$.cache[id] = document.getElementById(id) || false;
}
return $.cache[id];
};
$.cache = {};
}
}
} // Lytebox()
//*************************************************************************************************/
// setBrowserInfo() - Determines browser vendor and major version. Currently we keep track of the
// the top 99.7% of browsers in use, which as of this writing includes Chrome, Firefox, Safari,
// Internet Explorer, and Opera.
//*************************************************************************************************/
Lytebox.prototype.setBrowserInfo = function() {
var ua = navigator.userAgent.toLowerCase();
this.chrome = ua.indexOf('chrome') > -1;
this.ff = ua.indexOf('firefox') > -1;
this.safari = !this.chrome && ua.indexOf('safari') > -1;
this.opera = ua.indexOf('opera') > -1;
this.ie = /*@cc_on!@*/false;
// Set up the version for Chrome.
if (this.chrome) {
var re = new RegExp("chrome/([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
this.chromeVersion = parseInt( RegExp.$1 );
}
}
// Set up the version for Firefox.
if (this.ff) {
var re = new RegExp("firefox/([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
this.ffVersion = parseInt( RegExp.$1 );
}
}
// Set up the version for IE.
if (this.ie) {
var re = new RegExp("msie ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
this.ieVersion = parseInt( RegExp.$1 );
}
}
// Set up the version for Opera.
if (this.opera) {
var re = new RegExp("opera/([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
this.operaVersion = parseInt( RegExp.$1 );
}
}
// Set up the version for Safari.
if (this.safari) {
var re = new RegExp("version/([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
this.safariVersion = parseInt( RegExp.$1 );
}
}
}; // setBrowserInfo()
//********************************************************************************************/
// initialize() - Constructor runs on completion of the DOM loading. This function is responsible
// for adding elements to the page that are used to display the content, or in other words,
// this is actually building the DOM for Lytebox itself.
//********************************************************************************************/
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);
// Remove these (if they exist) to prevent duplication.
if (this.doc.$('lbOverlay')) { oBody.removeChild(this.doc.$('lbOverlay')); }
if (this.doc.$('lbMain')) { oBody.removeChild(this.doc.$('lbMain')); }
if (this.doc.$('lbLauncher')) { oBody.removeChild(this.doc.$('lbLauncher')); }
var oLauncher = this.doc.createElement('a');
oLauncher.setAttribute('id','lbLauncher');
oLauncher.setAttribute(this.classAttribute, 'lytebox');
oLauncher.style.display = 'none';
oBody.appendChild(oLauncher);
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);
if (this.roundedBorder) {
oOuterContainer.style.MozBorderRadius = '8px';
oOuterContainer.style.borderRadius = '8px';
}
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);
if (this.roundedBorder) {
oTopContainer.style.MozBorderRadius = '8px';
oTopContainer.style.borderRadius = '8px';
}
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);
if (this.roundedBorder) {
oBottomContainer.style.MozBorderRadius = '8px';
oBottomContainer.style.borderRadius = '8px';
}
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'
// references, adding 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);
// Initialize local variables used.
var myLink = relAttribute = revAttribute = classAttribute = dataOptions = dataTip = tipDecoration = tipStyle = tipImage = tipHtml = aSetting = sName = sValue = sExt = null;
var bImage = bRelative = false;
// Now loop through all Lytebox enabled links
for (var i = 0; i < lyteLinks.length; i++) {
myLink = lyteLinks[i];
// For backwards compatibility we'll store the value of the "rel" attribute.
relAttribute = String(myLink.getAttribute('rel'));
classAttribute = String(myLink.getAttribute(this.classAttribute));
// Use the string.match() method to catch 'lytebox' references in the rel attribute
if (myLink.getAttribute('href')) {
// Determine the viewer type. Return value will be null if none of these are specified. The checks for lyteshow/lyteframe
// are for backwards compatibility, as well as the old "rel" attribute (for those wishing to validate).
sType = classAttribute.match(/lytebox|lyteshow|lyteframe/i);
sType = this.isEmpty(sType) ? relAttribute.match(/lytebox|lyteshow|lyteframe/i) : sType;
// Get the options used in this link.
// For backwards compatibility, check for the "REV" attribute if "data-lyte-options" doesn't exist.
dataOptions = String(myLink.getAttribute('data-lyte-options'));
dataOptions = this.isEmpty(dataOptions) ? String(myLink.getAttribute('rev')) : dataOptions;
// Detemine the type of content in the URL. It's either an image or iframe content.
sExt = myLink.getAttribute('href').split('.').pop().toLowerCase();
bImage = (sExt == 'png' || sExt == 'jpg' || sExt == 'jpeg' || sExt == 'gif' || sExt == 'bmp');
// Now set the appropriate onclick handler. Note that we are retaining checks for lyteshow/lyteframe for backwards compatibility.
if (sType && sType.length >= 1) {
// Slideshow - check to determine if it's an image and whether or not we're doing a slideshow.
if (bImage && (dataOptions.match(/slide:true/i) || sType[0].toLowerCase() == 'lyteshow')) {
myLink.onclick = function () { $lb.start(this, true, false); return false; }
// Image - image viewer only (no slideshow).
} else if (bImage) {
myLink.onclick = function () { $lb.start(this, false, false); return false; }
// iFrame - HTML/embedded media content
} else {
myLink.onclick = function () { $lb.start(this, false, true); return false; }
}
}
// Lytetip - Note that if data-tip is empty, then we check for the value of the title attribute for those wishing to
// ensure that their pages still validate.
dataTip = String(myLink.getAttribute('data-tip'));
dataTip = this.isEmpty(dataTip) ? myLink.getAttribute('title') : dataTip;
// Now determine if the link should be tooltipified.
if (classAttribute.toLowerCase().match('lytetip') && !this.isEmpty(dataTip) && !this.tipsSet) {
// We'll go ahead and set some defaults in the event that the user doesn't have any attributes set.
if (this.__changeTipCursor) { myLink.style.cursor = 'help'; }
tipDecoration = this.__tipDecoration;
tipStyle = this.__tipStyle;
bRelative = this.__tipRelative;
// If the user is setting custom attributes, loop to determine what they and set the appropriate classes.
if (!this.isEmpty(dataOptions)) {
// Loop through our options so that we can set the appropriate tip attributes.
aOptions = dataOptions.split(' ');
for (var j = 0; j < aOptions.length; j++) {
// The option itself should be a name:value pair, so split into what should be a two element array.
aSetting = aOptions[j].split(':');
sName = (aSetting.length > 1 ? this.trim(aSetting[0]).toLowerCase() : '');
sValue = (aSetting.length > 1 ? this.trim(aSetting[1]) : '');
// Now we'll run some tests to determine which particular option is being set, and what the value should be.
switch(sName) {
case 'tipstyle':
tipStyle = (/classic|info|help|warning|error/.test(sValue) ? sValue : tipStyle); break;
case 'changetipcursor':
myLink.style.cursor = (/true|false/.test(sValue) ? (sValue == 'true' ? 'help' : '') : myLink.style.cursor); break;
case 'tiprelative':
bRelative = (/true|false/.test(sValue) ? (sValue == 'true') : bRelative); break;
case 'tipdecoration':
tipDecoration = (/dotted|solid|none/.test(sValue) ? sValue : tipDecoration); break;
}
}
}
// Set the appropriate border style for the tooltip link. Dotted is the default, so we don't need to set that.
if (tipDecoration != 'dotted') {
myLink.style.borderBottom = (tipDecoration == 'solid' ? '1px solid' : 'none');
}
// Now that the tip style has been determine, we'll set the appropriate classes.
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' && !this.isEmpty(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')) || bRelative) {
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') || bRelative) {
myLink.innerHTML = tipHtml + '' + (tipImage ? '' : '') + dataTip + '';
} else {
myLink.innerHTML = tipHtml + '' + (tipImage ? '' : '') + dataTip + '';
}
// Clear the title attribute to prevent overlapping browser tips, but only if the current link is not a "Lytebox" viewer enabled link.
if (classAttribute.match(/lytebox|lyteshow|lyteframe/i) == null) {
myLink.setAttribute('title','');
}
}
}
}
this.tipsSet = true;
}; // updateLyteboxItems()
//******************************************************************************************/
// 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 object args An object with properties to set the url, title, etc.
// The following properties are supported:
//
// url string The image path/url, or url to HTML content
// options string data-lyte-options values
// title string data-title value
// description string data-description value
//******************************************************************************************/
Lytebox.prototype.launch = function(args) {
// Initialize.
var sUrl = this.isEmpty(args.url) ? '' : String(args.url);
var sOptions = this.isEmpty(args.options) ? '' : String(args.options).toLowerCase();
var sTitle = this.isEmpty(args.title) ? '' : args.title;
var sDesc = this.isEmpty(args.description) ? '' : args.description;
// Ensure that we have a URL. If not, just return false immediately.
if (this.isEmpty(sUrl)) {
return false;
}
// First we need to detemine the type of content in the URL. It's either an image or iframe content.
var sExt = sUrl.split('.').pop().toLowerCase();
var bImage = (sExt == 'png' || sExt == 'jpg' || sExt == 'jpeg' || sExt == 'gif' || sExt == 'bmp');
// Set up the lbLauncher link, then start it up.
var oLauncher = this.doc.$('lbLauncher');
oLauncher.setAttribute('href', sUrl);
oLauncher.setAttribute('data-lyte-options', sOptions);
oLauncher.setAttribute('data-title', sTitle);
oLauncher.setAttribute('data-description', sDesc);
this.updateLyteboxItems();
this.start(oLauncher, false, (bImage ? false : true));
}; // launch()
//********************************************************************************/
// start() - Sets appropriate options (data-lyte-options) and starts the viewer.
//
// @param object oLink The lytebox enabled element
// @param boolean bSlideshow true for slideshow, false otherwise
// @param boolean bFrame true for iframe content, false otherwise
//********************************************************************************/
Lytebox.prototype.start = function(oLink, bSlideshow, bFrame) {
// Read the data attributes (from either data-lyte-options or rev) into a local variable.
var dataOptions = String(oLink.getAttribute('data-lyte-options'));
dataOptions = this.isEmpty(dataOptions) ? String(oLink.getAttribute('rev')) : dataOptions;
// Set the configuration options for the viewer.
this.setOptions(dataOptions);
// Set these so that they can be used throughout the startup process.
this.isSlideshow = (bSlideshow ? true : false);
this.isLyteframe = (bFrame ? true : false);
// See if a "before start" handler is set and execute that first.
if (!this.isEmpty(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 the appropriate container to print.
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
this.aPageSize = this.getPageSize();
var objOverlay = this.doc.$('lbOverlay');
var objBody = this.doc.getElementsByTagName("body").item(0);
objOverlay.style.height = this.aPageSize[1] + "px";
objOverlay.style.display = '';
// If animations are enabled, then fade in the overlay, otherwise set it to this.maxOpacity.
this.fadeIn({ id: 'lbOverlay', opacity: (this.doAnimations && this.animateOverlay && (!this.ie || 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);
// Initialize.
var sType = sExt = null;
this.frameArray = [];
this.frameNum = 0;
this.imageArray = [];
this.imageNum = 0;
this.slideArray = [];
this.slideNum = 0;
// Update the appropriate array for non grouped content.
if (this.isEmpty(this.group)) {
// Read the data attributes (from either data-lyte-options or rev) into a local variable.
dataOptions = String(oLink.getAttribute('data-lyte-options'));
dataOptions = this.isEmpty(dataOptions) ? String(oLink.getAttribute('rev')) : dataOptions;
// HTML content or embedded media.
if (this.isLyteframe) {
this.frameArray.push(new Array(oLink.getAttribute('href'), (!this.isEmpty(oLink.getAttribute('data-title')) ? oLink.getAttribute('data-title') : oLink.getAttribute('title')), oLink.getAttribute('data-description'), dataOptions));
// Good 'old fashioned images.
} else {
this.imageArray.push(new Array(oLink.getAttribute('href'), (!this.isEmpty(oLink.getAttribute('data-title')) ? oLink.getAttribute('data-title') : oLink.getAttribute('title')), oLink.getAttribute('data-description'), dataOptions));
}
// Otherwise, content is being grouped.
} else {
// Loop through lytebox enabled links to find content that is part of the set.
for (var i = 0; i < lyteLinks.length; i++) {
var myLink = lyteLinks[i];
// Get the data options, noting that these will come from the "data-lyte-options" attribute by default, or the
// "rev" attribute if that doesn't exist.
dataOptions = String(myLink.getAttribute('data-lyte-options'));
dataOptions = this.isEmpty(dataOptions) ? String(myLink.getAttribute('rev')) : dataOptions;
// Determine if a group attribute is set and whether it belongs to the group of the link clicked.
// If so, then we'll add it to the appropriate array (frameArray, slideArray, or imageArray).
if (myLink.getAttribute('href') && dataOptions.toLowerCase().match('group:' + this.group)) {
// Determine the viewer type. Return value will be null if none of these are specified. The checks for lyteshow/lyteframe
// are for backwards compatibility, as well as the old "rel" attribute (for those wishing to validate).
sType = String(myLink.getAttribute(this.classAttribute)).match(/lytebox|lyteshow|lyteframe/i);
sType = this.isEmpty(sType) ? myLink.getAttribute('rel').match(/lytebox|lyteshow|lyteframe/i) : sType;
// Detemine the type of content in the URL. It's either an image or iframe content.
sExt = myLink.getAttribute('href').split('.').pop().toLowerCase();
bImage = (sExt == 'png' || sExt == 'jpg' || sExt == 'jpeg' || sExt == 'gif' || sExt == 'bmp');
// Now set the appropriate onclick handler. Note that we are retaining checks for lyteshow/lyteframe for backwards compatibility.
if (sType && sType.length >= 1) {
// Slideshow - check to determine if it's an image and whether or not we're doing a slideshow.
if (bImage && (dataOptions.match(/slide:true/i) || sType[0].toLowerCase() == 'lyteshow')) {
this.slideArray.push(new Array(myLink.getAttribute('href'), (!this.isEmpty(myLink.getAttribute('data-title')) ? myLink.getAttribute('data-title') : myLink.getAttribute('title')), myLink.getAttribute('data-description'), dataOptions));
// Image - image viewer only (no slideshow).
} else if (bImage) {
this.imageArray.push(new Array(myLink.getAttribute('href'), (!this.isEmpty(myLink.getAttribute('data-title')) ? myLink.getAttribute('data-title') : myLink.getAttribute('title')), myLink.getAttribute('data-description'), dataOptions));
// iFrame - HTML/embedded media content
} else {
this.frameArray.push(new Array(myLink.getAttribute('href'), (!this.isEmpty(myLink.getAttribute('data-title')) ? myLink.getAttribute('data-title') : myLink.getAttribute('title')), myLink.getAttribute('data-description'), dataOptions));
}
}
}
}
// Now remove duplicates from our array and update the correct frame/slide/image number.
if (this.isLyteframe) {
this.frameArray = this.removeDuplicates(this.frameArray);
while(this.frameArray[this.frameNum][0] != oLink.getAttribute('href')) { this.frameNum++; }
} else if (bSlideshow) {
this.slideArray = this.removeDuplicates(this.slideArray);
try {
while(this.slideArray[this.slideNum][0] != oLink.getAttribute('href')) { this.slideNum++; }
} catch(e) {
//alert(e.description);
}
} else {
this.imageArray = this.removeDuplicates(this.imageArray);
while(this.imageArray[this.imageNum][0] != oLink.getAttribute('href')) { this.imageNum++; }
}
}
// Now load up the appropriate viewer.
this.changeContent(this.isLyteframe ? this.frameNum : (this.isSlideshow ? this.slideNum : this.imageNum));
}; // start()
//***************************************************************************/
// changeContent() - Hide most elements and load iframe or preload image in
// preparation for resizing the content container.
//
// @param int iContentNum
//***************************************************************************/
Lytebox.prototype.changeContent = function(iContentNum) {
// Store the number of the content (x of x) in a member property.
this.contentNum = iContentNum;
// Before we do anything, ensure that the overlay has been loaded. If it hasn't, wait 1/4th of a second and make this call again.
if (!this.overlayLoaded) {
this.changeContentTimerArray[this.changeContentTimerCount++] = setTimeout("$lb.changeContent(" + this.contentNum + ")", 250);
return;
} else {
// Clear the timer for changeContent...
for (var i = 0; i < this.changeContentTimerCount; i++) { window.clearTimeout(this.changeContentTimerArray[i]); }
}
// If we're not inheriting options, then set the options from the current link and use global defaults for values not specified.
var sDataLyteOptions = (this.isLyteframe) ? this.frameArray[this.contentNum][3] : (this.isSlideshow ? this.slideArray[this.contentNum][3] : this.imageArray[this.contentNum][3]);
if (!this.inherit || /inherit:false/i.test(sDataLyteOptions)) {
this.setOptions(String(sDataLyteOptions));
// If we're here then we're inheriting options.
} else {
// Store the options in the from the element in a set.
var sDataLyteOptions1 = String((this.isLyteframe) ? this.frameArray[0][3] : (this.isSlideshow ? this.slideArray[0][3] : this.imageArray[0][3]));
// How we'll determine if the width/height is changing (iframe content only).
if (this.isLyteframe) {
var sWidth = sHeight = null;
// First we get the width and height, if they exist. If not then an exception is thrown which we catch.
try { sWidth = sDataLyteOptions.match(/width:\d+(%|px|)/i)[0]; } catch(e) { }
try { sHeight = sDataLyteOptions.match(/height:\d+(%|px|)/i)[0]; } catch(e) { }
// If the width/height are changing, then we'll replace the width/height from the first element with those of the current element.
if (!this.isEmpty(sWidth)) {
sDataLyteOptions1 = sDataLyteOptions1.replace(/width:\d+(%|px|)/i, sWidth);
}
if (!this.isEmpty(sHeight)) {
sDataLyteOptions1 = sDataLyteOptions1.replace(/height:\d+(%|px|)/i, sHeight);
}
}
this.setOptions(sDataLyteOptions1);
}
// Show the Lytebox container.
var object = this.doc.$('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
var iDivisor = 40;
if (this.autoResize && this.fixedPosition) {
// IE6, IE7, and IE8+ in QuirksMode do not properly handle fixed positioning of an element, so this is a workaround for that.
if (this.ie && (this.ieVersion <= 7 || this.doc.compatMode == 'BackCompat')) {
object.style.top = (this.getPageScroll() + (this.aPageSize[3] / iDivisor)) + "px";
var ps = (this.aPageSize[3] / iDivisor);
this.scrollHandler = function(){
$lb.doc.$('lbMain').style.top = ($lb.getPageScroll() + ps) + 'px';
}
this.bodyOnscroll = document.body.onscroll;
if (window.addEventListener) {
window.addEventListener('scroll', this.scrollHandler);
} else if (window.attachEvent) {
window.attachEvent('onscroll', this.scrollHandler);
}
object.style.position = "absolute";
} else {
object.style.top = ((this.aPageSize[3] / iDivisor)) + "px";
object.style.position = "fixed";
}
} else {
object.style.position = "absolute";
object.style.top = (this.getPageScroll() + (this.aPageSize[3] / iDivisor)) + "px";
}
// Remove the bottom padding, if any. Padding is added when we show the content, and removing it will effectively remove the
// additional white space that is left over when we remove the description (lbDescBottom) container.
this.doc.$('lbOuterContainer').style.paddingBottom = '0';
// Reset the bottom border from #lbOuterContainer.
if (!this.outerBorder) {
this.doc.$('lbOuterContainer').style.border = 'none';
} else {
this.doc.$('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.
if (this.forceCloseClick) {
this.doc.$('lbOverlay').onclick = '';
} else {
this.doc.$('lbOverlay').onclick = function() { $lb.end(); return false; }
}
this.doc.$('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.$('lbPrintTop').onclick = this.doc.$('lbPrint').onclick = function() { $lb.printWindow(); return false; }
this.doc.$('lbCloseTop').onclick = this.doc.$('lbClose').onclick = function() { $lb.end(); return false; }
this.doc.$('lbPauseTop').onclick = function() { $lb.togglePlayPause("lbPauseTop", "lbPlayTop"); return false; }
this.doc.$('lbPause').onclick = function() { $lb.togglePlayPause("lbPause", "lbPlay"); return false; }
this.doc.$('lbPlayTop').onclick = function() { $lb.togglePlayPause("lbPlayTop", "lbPauseTop"); return false; }
this.doc.$('lbPlay').onclick = function() { $lb.togglePlayPause("lbPlay", "lbPause"); return 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.$('lbPlay').style.display = '';
this.doc.$('lbPause').style.display = 'none';
}
// 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]); }
}
// Reset the bottom border from #lbOuterContainer.
if (!this.outerBorder) {
this.doc.$('lbOuterContainer').style.border = 'none';
} else {
this.doc.$('lbOuterContainer').setAttribute(this.classAttribute, this.theme);
}
// This will be used to reposition the "lbLoading" container (or decrease the top margin, rather) if showing the "lbTopContainer".
// The default is 10 pixels which accounts for the existing top margin.
var iDecreaseMargin = 10;
// hide elements during transition
if (this.titleTop || this.navTop) {
this.doc.$('lbTopContainer').style.visibility = 'hidden';
iDecreaseMargin += this.doc.$('lbTopContainer').offsetHeight;
} else {
this.doc.$('lbTopContainer').style.display = 'none';
}
this.doc.$('lbBottomContainer').style.display = 'none';
this.doc.$('lbImage').style.display = 'none';
this.doc.$('lbIframe').style.display = 'none';
this.doc.$('lbPrevHov').style.display = 'none';
this.doc.$('lbNextHov').style.display = 'none';
this.doc.$('lbIframeContainer').style.display = 'none';
// Now show the loading graphic.
this.doc.$('lbLoading').style.marginTop = '-' + iDecreaseMargin + 'px';
this.doc.$('lbLoading').style.display = '';
if (this.isLyteframe) {
var iframe = $lb.doc.$('lbIframe');
iframe.src = 'about:blank';
// (07/20/2011) if width/height are percentages, determine width in pixels before setting - fixed by A.Popov http://s3blog.org
var w = this.trim(this.width);
var h = this.trim(this.height);
if (/\%/.test(w)) {
var percent = parseInt(w);
w = parseInt((this.aPageSize[2]-50)*percent/100);
w = w+'px';
}
if (/\%/.test(h)) {
var percent = parseInt(h);
h = parseInt((this.aPageSize[3]-150)*percent/100);
h = h+'px';
}
// If autoResize is enabled, then ensure we don't resize out of the page boundaries.
if (this.autoResize) {
var x = this.aPageSize[2] - 50;
var y = this.aPageSize[3] - 150;
w = (parseInt(w) > x ? x : w) + 'px';
h = (parseInt(h) > y ? y : h) + 'px';
}
iframe.height = this.height = h;
iframe.width = this.width = w;
iframe.scrolling = this.scrolling;
// Now set some basic styles, noting that we get a proper reference to the document.
var oDoc = iframe.contentWindow || iframe.contentDocument;
// Wrap in a try/catch to avoid permission errors.
try {
if (oDoc.document) {
oDoc = oDoc.document;
}
oDoc.body.style.margin = 0;
oDoc.body.style.padding = 0;
// Set up scrolling for IE6/7/8 (doesn't always work).
if (this.ie && this.ieVersion <= 8) {
oDoc.body.scroll = this.scrolling;
oDoc.body.overflow = this.scrolling = 'no' ? 'hidden' : 'auto';
}
} catch(e) { }
// Now resize the container. Once it's done resizing, noting that after resize this.loadContent() is called.
this.resizeContainer(parseInt(this.width), parseInt(this.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 x = $lb.aPageSize[2] - 50;
var y = $lb.aPageSize[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.$('lbImage');
lbImage.src = ($lb.isSlideshow ? $lb.slideArray[$lb.contentNum][0] : $lb.imageArray[$lb.contentNum][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.contentNum][0] : this.imageArray[this.contentNum][0]);
}
}; // changeContent()
//******************************************************************************/
// resizeContainer() - Resizes the container based on the dimensions provided.
//
// @param int iWidth
// @param int iHeight
//******************************************************************************/
Lytebox.prototype.resizeContainer = function(iWidth, iHeight) {
// store these values in member properties
this.resizeWidth = iWidth;
this.resizeHeight = iHeight;
// get current height and width
this.wCur = this.doc.$('lbOuterContainer').offsetWidth;
this.hCur = this.doc.$('lbOuterContainer').offsetHeight;
// scalars based on change from old to new
this.xScale = ((this.resizeWidth + (this.borderSize * 2)) / this.wCur) * 100;
this.yScale = ((this.resizeHeight + (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) - this.resizeWidth;
var hDiff = (this.hCur - this.borderSize * 2) - this.resizeHeight;
// Determine if the width needs to be resized.
this.wDone = (wDiff == 0);
// If the container needs to be resized, then call resizeH() to take care of business. Note that resizeH() will call resizeW() when done if need be.
if (!(hDiff == 0)) {
this.hDone = false;
this.resizeH('lbOuterContainer', this.hCur, this.resizeHeight + this.borderSize * 2, this.getPixelRate(this.hCur, this.resizeHeight));
} else {
this.hDone = true;
// If the container needs to be resized (horizontally), make it so.
if (!this.wDone) {
this.resizeW('lbOuterContainer', this.wCur, this.resizeWidth + this.borderSize * 2, this.getPixelRate(this.wCur, this.resizeWidth));
}
}
// 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); }
}
// Set the correct height for the hover containers (prev/next).
this.doc.$('lbPrevHov').style.height = this.resizeHeight + "px";
this.doc.$('lbNextHov').style.height = this.resizeHeight + "px";
// We should make a call to this function here only if this.hDone and this.wDone are true. Otherwise, we'll call from this.resizeW().
if (this.hDone && this.wDone) {
if (this.isLyteframe) {
this.loadContent();
} else {
this.showContent();
}
}
}; // resizeContainer()
//******************************************************************************/
// loadContent() - Loads iframe content after the container has been resized. Once
// the contents of the iframe are loaded, showContent(0 is then called.
//******************************************************************************/
Lytebox.prototype.loadContent = function() {
// try/catch added for IE6
try {
// Get a reference to our iframe object.
var iframe = this.doc.$('lbIframe');
// (07/20/2011) identifier for cgi.script-server - by A.Popov http://s3blog.org
var uri = this.frameArray[this.contentNum][0];
var ext = uri.split('.').pop().toLowerCase();
if (!this.inline && this.appendQS) {
uri += ((/\?/.test(uri)) ? '&' : '?') + 'request_from=lytebox';
}
// Firefox (in general) does not always fire the "onload" event when loading ActiveX (PDF, WMV, etc.), so we go ahead
// and call showContent() immediately.
// Additionally, various browsers crash when attempting to play embedded WMV files, so we disable auto-embedding
// by default. Browsers that don't know to do with this format will offer up a "download" or "open with" dialog,
// which is much better than the alternative.
if (!this.autoEmbed || (this.ff && (ext == 'pdf' || ext == 'mov')) || ext == 'wmv') {
this.frameSource = uri;
this.showContent();
return;
}
// Assign handlers to determine when the iframe has loaded, and call showContent() once loaded.
if (this.ie) {
iframe.onreadystatechange = function() {
if ($lb.doc.$('lbIframe').readyState == "complete") {
$lb.showContent();
$lb.doc.$('lbIframe').onreadystatechange = null;
}
};
} else {
iframe.onload = function() {
$lb.showContent();
$lb.doc.$('lbIframe').onload = null;
};
}
// Now determine if we need to embed the content within the iFrame (either inline content or media file).
// We'll do that by check the extension (mov, avi, mpg, mpeg, wmv, swf)
if (this.inline || (ext == 'mov' || ext == 'avi' || ext == 'wmv' || ext == 'mpg' || ext == 'mpeg' || ext == 'swf')) {
// Reset the iframe source so that the previous page (cached) doesn't load.
iframe.src = 'about:blank';
this.frameSource = '';
// Builds the iFrame window + styles + contents...
var sHtml = (this.inline) ? this.doc.$(uri.substr(uri.indexOf('#') + 1, uri.length)).innerHTML : this.buildObject(parseInt(this.width), parseInt(this.height), uri, ext);
// Get a proper reference to the document.
var oDoc = iframe.contentWindow || iframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
// Now write to the document and set some basic styles.
oDoc.open();
oDoc.write(sHtml);
oDoc.close();
oDoc.body.style.margin = 0;
oDoc.body.style.padding = 0;
// Set these if it's not inline content.
if (!this.inline) {
oDoc.body.style.backgroundColor = '#fff';
oDoc.body.style.fontFamily = 'Verdana, Helvetica, sans-serif';
oDoc.body.style.fontSize = '0.9em';
}
// Set this to blank so that IE doesn't refresh later on.
this.frameSource = '';
// Otherwise, just load the passed in URL.
} else {
// Various browsers seem to have issues loading Google maps (with the marker being in the proper position),
// so we'll store the URL in a property so that we can reload the window later.
this.frameSource = uri;
iframe.src = uri;
}
} catch(e) { }
}; // loadContent()
//******************************************************************************/
// showContent() - Display content (iframes, images, etc.) and begin preloading
// neighbors images, if we are dealing with images.
//******************************************************************************/
Lytebox.prototype.showContent = function() {
// 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.contentNum == (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.contentNum+1)+")", this.slideInterval);
}
}
this.doc.$('lbHoverNav').style.display = (this.ieVersion != 6 && this.showNavigation && this.navTypeHash['Hover_by_type_' + this.navType] ? '' : 'none');
this.doc.$('lbCloseTop').style.display = (this.showClose && this.navTop ? '' : 'none');
this.doc.$('lbClose').style.display = (this.showClose && !this.navTop ? '' : 'none');
this.doc.$('lbBottomData').style.display = (this.showDetails ? '' : 'none');
this.doc.$('lbPauseTop').style.display = (this.showPlayPause && this.navTop ? (!this.isPaused ? '' : 'none') : 'none');
this.doc.$('lbPause').style.display = (this.showPlayPause && !this.navTop ? (!this.isPaused ? '' : 'none') : 'none');
this.doc.$('lbPlayTop').style.display = (this.showPlayPause && this.navTop ? (!this.isPaused ? 'none' : '') : 'none');
this.doc.$('lbPlay').style.display = (this.showPlayPause && !this.navTop ? (!this.isPaused ? 'none' : '') : 'none');
this.doc.$('lbPrevTop').style.display = (this.navTop && this.showNavigation && this.navTypeHash['Display_by_type_' + this.navType] ? '' : 'none');
this.doc.$('lbPrev').style.display = (!this.navTop && this.showNavigation && this.navTypeHash['Display_by_type_' + this.navType] ? '' : 'none');
this.doc.$('lbNextTop').style.display = (this.navTop && this.showNavigation && this.navTypeHash['Display_by_type_' + this.navType] ? '' : 'none');
this.doc.$('lbNext').style.display = (!this.navTop && this.showNavigation && this.navTypeHash['Display_by_type_' + this.navType] ? '' : 'none');
} else {
this.doc.$('lbHoverNav').style.display = (this.ieVersion != 6 && 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.$('lbPrevTop').style.display = (this.navTop ? '' : 'none');
this.doc.$('lbPrev').style.display = (!this.navTop ? '' : 'none');
this.doc.$('lbNextTop').style.display = (this.navTop ? '' : 'none');
this.doc.$('lbNext').style.display = (!this.navTop ? '' : 'none');
} else {
this.doc.$('lbPrevTop').style.display = 'none';
this.doc.$('lbPrev').style.display = 'none';
this.doc.$('lbNextTop').style.display = 'none';
this.doc.$('lbNext').style.display = 'none';
}
this.doc.$('lbCloseTop').style.display = (this.navTop ? '' : 'none');
this.doc.$('lbClose').style.display = (!this.navTop ? '' : 'none');
this.doc.$('lbBottomData').style.display = '';
this.doc.$('lbPauseTop').style.display = 'none';
this.doc.$('lbPause').style.display = 'none';
this.doc.$('lbPlayTop').style.display = 'none';
this.doc.$('lbPlay').style.display = 'none';
}
// Show the print buttons, if necessary.
this.doc.$('lbPrintTop').style.display = (this.showPrint && this.navTop ? '' : 'none');
this.doc.$('lbPrint').style.display = (this.showPrint && !this.navTop ? '' : 'none');
// Update the details containers (title, description, etc.) before showing the image/iframe containers.
// This needs to be done here so that the image/iframe don't resize outside the bottom container.
this.updateDetails();
// Hide the loading graphic and show the appropriate content container.
this.doc.$('lbLoading').style.display = 'none';
this.doc.$('lbImageContainer').style.display = (this.isLyteframe ? 'none' : '');
this.doc.$('lbIframeContainer').style.display = (this.isLyteframe ? '' : 'none');
if (this.isLyteframe) {
// Certain sites, such as Google Maps, don't load properly in IE, so we have to reload them. Retarded, I know.
// If this is the case then this.frameSource will be set with the appropriate URL.
if (!this.isEmpty(this.frameSource)) {
this.doc.$('lbIframe').src = this.frameSource;
}
this.doc.$('lbIframe').style.display = '';
this.fadeIn({ id: 'lbIframe', opacity: (this.doAnimations && (!this.ie || this.ieVersion >= 9) ? 0 : 100) });
} else {
this.doc.$('lbImage').style.display = '';
this.fadeIn({ id: 'lbImage', opacity: (this.doAnimations && (!this.ie || this.ieVersion >= 9) ? 0 : 100) });
this.preloadNeighborImages();
}
// Finally, see if we have a "after start" handler set and make the call if so.
if (!this.isEmpty(this.afterStart)) {
var callback = window[this.afterStart];
if (typeof callback === 'function') {
callback();
}
}
}; // 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.contentNum][1] : (this.isLyteframe ? this.frameArray[this.contentNum][1] : this.imageArray[this.contentNum][1]));
var sDesc = (this.isSlideshow ? this.slideArray[this.contentNum][2] : (this.isLyteframe ? this.frameArray[this.contentNum][2] : this.imageArray[this.contentNum][2]));
// 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.$(this.titleTop ? 'lbTitleBottom' : 'lbTitleTop').style.display = 'none';
this.doc.$(this.titleTop ? 'lbTitleTop' : 'lbTitleBottom').style.display = (this.isEmpty(sTitle) ? 'none' : 'block');
}
this.doc.$('lbDescBottom').style.display = (this.isEmpty(sDesc) ? 'none' : '');
// Determine which container to write the title to.
this.doc.$(this.titleTop ? 'lbTitleTop' : 'lbTitleBottom').innerHTML = (this.isEmpty(sTitle) ? '' : sTitle);
this.doc.$(this.titleTop ? 'lbTitleBottom' : 'lbTitleTop').innerHTML = '';
this.doc.$(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.$('lbTopContainer').style.display = 'block';
this.doc.$('lbTopContainer').style.visibility = 'visible';
} else {
this.doc.$('lbTopContainer').style.display = 'none';
}
// Now we'll get the number/page display container (x of x)
var object = (this.titleTop ? this.doc.$('lbNumTop') : this.doc.$('lbNumBottom'));
// if part of set display 'Image x of x' or 'Page x of x'
if (this.isSlideshow && this.slideArray.length > 1) {
object.innerHTML = this.label['image'].replace('%1', this.contentNum + 1).replace('%2', this.slideArray.length);
} else if (this.imageArray.length > 1 && !this.isLyteframe) {
object.innerHTML = this.label['image'].replace('%1', this.contentNum + 1).replace('%2', this.imageArray.length);
} else if (this.frameArray.length > 1 && this.isLyteframe) {
object.innerHTML = this.label['page'].replace('%1', this.contentNum + 1).replace('%2', this.frameArray.length);
} else {
object.innerHTML = '';
}
// If we have a description then add it to the appropriate container.
var bAddSpacer = !(this.titleTop || (this.isEmpty(sTitle) && this.isEmpty(object.innerHTML)));
this.doc.$('lbDescBottom').innerHTML = (this.isEmpty(sDesc) ? '' : (bAddSpacer ? ' ' : '') + sDesc);
// 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;
}
}
// If there is nothing to show, then we don't really need to display the bottom container.
this.doc.$('lbBottomContainer').style.display = (!(this.titleTop && this.navTop) || !this.isEmpty(sDesc) ? 'block' : 'none');
// 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.$('lbTopNav').style.width = iNavWidth + 'px';
}
this.doc.$('lbTopData').style.width = (this.doc.$('lbTopContainer').offsetWidth - this.doc.$('lbTopNav').offsetWidth - 15) + 'px';
if (!this.isEmpty(sDesc)) {
this.doc.$('lbDescBottom').style.width = (this.doc.$('lbBottomContainer').offsetWidth - 15) + 'px';
}
} else if ((!this.titleTop || !this.isEmpty(sDesc)) && !this.navTop) {
if (iNavWidth > 0) {
this.doc.$('lbBottomNav').style.width = iNavWidth + 'px';
}
this.doc.$('lbBottomData').style.width = (this.doc.$('lbBottomContainer').offsetWidth - this.doc.$('lbBottomNav').offsetWidth - 15) + 'px';
this.doc.$('lbDescBottom').style.width = this.doc.$('lbBottomData').style.width;
}
// Add the appropriate padding to the bottom of the container, if necessary (decision made in function).
this.fixBottomPadding();
// TODO: At some point we should determine if we can calculate the dimensions of the top/bottom container before resizing
// the Lytebox container so that we don't have to deal with the below issue. That's going to be tricky, so for now
// we can work around that by simply enabling page scrolling if the viewer is larger than the page dimensions.
this.aPageSize = this.getPageSize();
// IE does not return the correct value for getPageScroll, so the 2nd time around page scrolling won't be disabled.
var iMainTop = parseInt(this.doc.$('lbMain').style.top);
if ((this.ie && this.ieVersion <= 7) || (this.ieVersion >= 8 && this.doc.compatMode == 'BackCompat')) {
iMainTop = (this.ie ? parseInt(this.doc.$('lbMain').style.top) - this.getPageScroll() : parseInt(this.doc.$('lbMain').style.top));
}
var iOverlap = (this.doc.$('lbOuterContainer').offsetHeight + iMainTop) - this.aPageSize[3];
var iDivisor = 40;
if (iOverlap > 0 && this.autoResize && this.fixedPosition) {
// IE6 (any mode) and IE7+ in QuirksMode do not properly handle fixed positioning of an element, so this is a workaround for that.
if (this.ie && (this.ieVersion <= 7 || this.doc.compatMode == 'BackCompat')) {
document.body.onscroll = this.bodyOnscroll;
if (window.removeEventListener) {
window.removeEventListener('scroll', this.scrollHandler);
} else if (window.detachEvent) {
window.detachEvent('onscroll', this.scrollHandler);
}
}
this.doc.$('lbMain').style.position = "absolute";
this.doc.$('lbMain').style.top = (this.getPageScroll() + (this.aPageSize[3] / iDivisor)) + "px";
}
}; // updateDetails()
//***********************************************************************/
// updateNav() - Display appropriate previous and next hover navigation.
//***********************************************************************/
Lytebox.prototype.updateNav = function() {
// Slideshow Viewer
if (this.isSlideshow) {
// if not first image in set, display prev image button
if (this.contentNum != 0) {
if (this.navTypeHash['Display_by_type_' + this.navType] && this.showNavigation) {
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme);
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').style.display = '';
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() {
if ($lb.pauseOnPrevClick) { $lb.togglePlayPause($lb.navTop ? 'lbPauseTop' : 'lbPause', $lb.navTop ? 'lbPlayTop' : 'lbPlay'); }
$lb.changeContent($lb.contentNum - 1); return false;
}
}
if (this.navTypeHash['Hover_by_type_' + this.navType]) {
var object = this.doc.$('lbPrevHov');
object.style.display = '';
object.onclick = function() {
if ($lb.pauseOnPrevClick) { $lb.togglePlayPause($lb.navTop ? 'lbPauseTop' : 'lbPause', $lb.navTop ? 'lbPlayTop' : 'lbPlay'); }
$lb.changeContent($lb.contentNum - 1); return false;
}
}
} else {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() { return false; }
}
}
// if not last image in set, display next image button
if (this.contentNum != (this.slideArray.length - 1) && this.showNavigation) {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme);
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').style.display = '';
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() {
if ($lb.pauseOnNextClick) { $lb.togglePlayPause($lb.navTop ? 'lbPauseTop' : 'lbPause', $lb.navTop ? 'lbPlayTop' : 'lbPlay'); }
$lb.changeContent($lb.contentNum + 1); return false;
}
}
if (this.navTypeHash['Hover_by_type_' + this.navType]) {
var object = this.doc.$('lbNextHov');
object.style.display = '';
object.onclick = function() {
if ($lb.pauseOnNextClick) { $lb.togglePlayPause($lb.navTop ? 'lbPauseTop' : 'lbPause', $lb.navTop ? 'lbPlayTop' : 'lbPlay'); }
$lb.changeContent($lb.contentNum + 1); return false;
}
}
} else {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() { return false; }
}
}
// HTML/Embedded Media Viewer
} else if (this.isLyteframe) {
// if not first image in set, display prev image button
if(this.contentNum != 0) {
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme);
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').style.display = '';
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() {
$lb.changeContent($lb.contentNum - 1); return false;
}
} else {
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() { return false; }
}
// if not last image in set, display next image button
if(this.contentNum != (this.frameArray.length - 1)) {
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme);
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').style.display = '';
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() {
$lb.changeContent($lb.contentNum + 1); return false;
}
} else {
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() { return false; }
}
// Image Viewer (Lytebox)
} else {
// if not first image in set, display prev image button
if(this.contentNum != 0) {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme);
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').style.display = '';
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() {
$lb.changeContent($lb.contentNum - 1); return false;
}
}
if (this.navTypeHash['Hover_by_type_' + this.navType]) {
var object2 = this.doc.$('lbPrevHov');
object2.style.display = '';
object2.onclick = function() {
$lb.changeContent($lb.contentNum - 1); return false;
}
}
} else {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.$(this.navTop ? 'lbPrevTop' : 'lbPrev').onclick = function() { return false; }
}
}
// if not last image in set, display next image button
if(this.contentNum != (this.imageArray.length - 1)) {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme);
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').style.display = '';
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() {
$lb.changeContent($lb.contentNum + 1); return false;
}
}
if (this.navTypeHash['Hover_by_type_' + this.navType]) {
var object2 = this.doc.$('lbNextHov');
object2.style.display = '';
object2.onclick = function() {
$lb.changeContent($lb.contentNum + 1); return false;
}
}
} else {
if (this.navTypeHash['Display_by_type_' + this.navType]) {
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').setAttribute(this.classAttribute, this.theme + 'Off');
this.doc.$(this.navTop ? 'lbNextTop' : 'lbNext').onclick = function() { return false; }
}
}
}
this.enableKeyboardNav();
}; // updateNav()
//********************************************************************************************************************/
// fixBottomPadding() - Adds padding to the bottom of the outer container so that it encompasses the details container.
//********************************************************************************************************************/
Lytebox.prototype.fixBottomPadding = function() {
// 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.$('lbTopContainer').offsetHeight + 5; // 5 is added for the additional top margin given in the CSS
var offsetHeight = (titleHeight == 5 ? 0 : titleHeight) + this.doc.$('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.$('lbOuterContainer').style.paddingBottom = (offsetHeight + 5) + 'px';
}
}; // fixBottomPadding()
//*********************************************************************************/
// 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.contentNum != 0) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.contentNum - 1);
}
} else if ($lb.isLyteframe) {
if($lb.contentNum != 0) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.contentNum - 1);
}
} else {
if($lb.contentNum != 0) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.contentNum - 1);
}
}
} else if (key == 'n' || keycode == 39) { // display next image
if ($lb.isSlideshow) {
if($lb.contentNum != ($lb.slideArray.length - 1)) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.contentNum + 1);
}
} else if ($lb.isLyteframe) {
if($lb.contentNum != ($lb.frameArray.length - 1)) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.contentNum + 1);
}
} else {
if($lb.contentNum != ($lb.imageArray.length - 1)) {
$lb.disableKeyboardNav();
$lb.changeContent($lb.contentNum + 1);
}
}
}
};
//************************************************************/
// preloadNeighborImages() - Preload previous and next images.
//************************************************************/
Lytebox.prototype.preloadNeighborImages = function() {
if (this.isSlideshow) {
if ((this.slideArray.length - 1) > this.contentNum) {
var preloadNextImage = new Image();
preloadNextImage.src = this.slideArray[this.contentNum + 1][0];
}
if (this.contentNum > 0) {
var preloadPrevImage = new Image();
preloadPrevImage.src = this.slideArray[this.contentNum - 1][0];
}
} else {
if ((this.imageArray.length - 1) > this.contentNum) {
var preloadNextImage = new Image();
preloadNextImage.src = this.imageArray[this.contentNum + 1][0];
}
if (this.contentNum > 0) {
var preloadPrevImage = new Image();
preloadPrevImage.src = this.imageArray[this.contentNum - 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.$(sHideId).style.display = 'none';
this.doc.$(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.contentNum == (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.contentNum + 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.isEmpty(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) {
var uri_href = top.location.href;
var reg=/\#.*$/g;
uri_href=uri_href.replace(reg, "");
top.location.href = uri_href;
return;
}
this.doc.$('lbMain').style.display = 'none';
this.fadeOut({ id: 'lbOverlay', opacity: (this.doAnimations && this.animateOverlay && (!this.ie || this.ieVersion >= 9) ? this.maxOpacity : 0), speed: 5, display: 'none' });
// Show