1) The new jquery version of this does not seem to pay attention to
rel="lightbox[6121755]"
and so browsing through groups of images does not work!

2) Besides, the jquery version does not allow opening full-size images (that was a nifty feature in the previous version!)

3) Also, the image opening is no longer animated like before - that was one of the nicest features of Lightbox vs Thickbox, IMO.

Will these features be re-introduced in the jquery version, and when?

CommentFileSizeAuthor
#6 errorconsole.txt56.06 KBsolimeno
#3 lightboxv2_failure.jpg69.64 KBvacilando

Comments

trogie’s picture

Did you check the new settings in 'eng/admin/settings/lightbox2'? Seems like you might have 'Lightbox Lite' enabled.

Trogie

vacilando’s picture

Thanks for the suggestion, Trogie. I have checked and indeed, the Lite flavour was active. So I unchecked it but then Lightbox V2 stopped to work completely. See attached image on what I was getting at http://quidne.vacilando.org/ . I had to switch to Thickbox until this issue is solved.

Tomas

vacilando’s picture

StatusFileSize
new69.64 KB

sorry - here's the attachment

stella’s picture

Assigned: Unassigned » stella

Have you installed the jQuery Update module? And have you installed it correctly (it requires you to replace the core jquery.js with its version)? The latest version of the lightbox2 module no longer uses the prototype/scriptaculous files you had to download separately before (you can actually remove these files if you want). Instead it now uses jQuery which is now part of Drupal core. However, the version in core isn't that recent, so for now there is a dependency on the jQuery Update module.

If you've done the above and it's still not working, could you send me the generated source code and any errors that appear in Firefox's Error Console (under Tools menu)? Does the problem affect both Firefox and IE browsers?

Cheers,
Stella

solimeno’s picture

I'm having the same issue in my installation. I did install the jquery update module, and copied the supplied jquery.js file as directed, but lightbox still doesn't work after upgrading to this version of the module while it had been working with the previous version. Also, Lightbox2 Lite is disabled.

Starting from the "Home" node on my drupal site and navigating to the image galleries produces the following output in the Firefox (v. 2.0.0.7) error console:

Warning: Error in parsing value for property 'display'.  Declaration dropped.
Source File: http://172.20.223.33/modules/system/defaults.css
Line: 43

/* $Id: defaults.css,v 1.2 2006/08/25 09:01:12 drumm Exp $ */

/*
** HTML elements
*/
fieldset {
  margin-bottom: 1em;
  padding: .5em;
}
form {
  margin: 0;
  padding: 0;
}
hr {
  height: 1px;
  border: 1px solid gray;
}
img {
  border: 0;
}
table {
  border-collapse: collapse;
}
th {
  text-align: left;
  padding-right: 1em;
  border-bottom: 3px solid #ccc;
}

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clear-block:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clear-block {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clear-block {
  height: 1%;
}
.clear-block {
  display: block;
}
/* End hide from IE-mac */



Warning: Error in parsing value for property 'display'.  Declaration dropped.
Source File: http://172.20.223.33/sites/all/modules/date/date.css
Line: 19

fieldset.container-inline-date .form-item {float:left; padding:0; margin:0}
fieldset.container-inline-date .form-item, fieldset.container-inline-date .form-item input {width:auto;}
fieldset.container-inline-date .description {clear: both;}
fieldset.container-inline-date .form-item input, fieldset.container-inline-date .form-item select {margin-right:.5em;}
/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
** this will be on drupal 5.0 so we can get rid of the styling below when the module is updated
*/
fieldset.container-inline-date:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
 }

fieldset.container-inline-date {
  display: inline-block;
 }

/* Hides from IE-mac \*/
* html fieldset.container-inline-date {
  height: 1%;
 }
fieldset.container-inline-date {
  display: block;
 }
/* End hide from IE-mac */

/* force IE to display the jscalendar icon in date fieldsets */
fieldset.container-inline-date .jscalendar-icon {
  text-indent: 0;
}

/* styles for display of dates in nodes */
span.date-display-single {
}
span.date-display-start {
}
span.date-display-separator {
}
span.date-display-end {
  display:block;
  clear:left;
  margin-left:20px;
}



Warning: Expected declaration but found '*'.  Skipped to next declaration.
Source File: http://172.20.223.33/sites/all/modules/lightbox2/css/lightbox.css
Line: 28

#lightbox {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  line-height: 0;
}
#lightbox a img {
  border: none;
}
#outerImageContainer {
  position: relative;
  background-color: #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  min-width: 240px;
}
#imageContainer {
  padding: 10px;
}
#loading {
  position: absolute;
  top: 40%;
  left: 45%;
  *left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
#hoverNav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
#imageContainer>#hoverNav {
  left: 0;
}
#hoverNav a {
  outline: none;
}
#prevLink, #nextLink {
  width: 49%;
  height: 100%;
  background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
  display: block;
}
#prevLink {
  left: 0;
  float: left;
}
#nextLink {
  right: 0;
  float: right;
}
#prevLink:hover, #prevLink:visited:hover {
  background: url(../images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
  background: url(../images/nextlabel.gif) right 15% no-repeat;
}
#imageDataContainer {
  font: 10px Verdana, Helvetica, sans-serif;
  background-color: #fff;
  margin: 0 auto;
  line-height: 1.4em;
  min-width: 240px;
}
#imageData {
  padding: 0 10px;
}
#imageData #imageDetails {
  width: 70%;
  float: left;
  text-align: left;
}
#imageData #caption {
  font-weight: bold;
}
#imageData #numberDisplay {
  display: block;
  clear: left;
  padding-bottom: 1.0em;
}
#imageData #bottomNavClose {
  width: 66px;
  float: right;
  padding-top: 0.7em;
}
#imageData #bottomNav {
  height: 57px;
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
  background-color: #000;
  filter:alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html>body .clearfix {
  display: inline;
  width: 100%;
}
* html .clearfix {
  /* Hides from IE-mac \*/
  height: 1%;
  /* End hide from IE-mac */
}

/* Image location mod */
#bottomNavClose {
  display: block;
  background: url(../images/closelabel.gif) no-repeat;
  width: 66px;
  height: 22px;
  position: relative;
  top: 35px;
}
#loadingLink {
  display: block;
  background: url(../images/loading.gif) no-repeat;
  width: 32px;
  height: 32px;
}
#bottomNavZoom {
  display: block;
  background: url(../images/expand.gif) no-repeat;
  width: 34px;
  height: 34px;
  position: relative;
  float: right;
  left: 66px;
}



Warning: Unknown property 'filter'.  Declaration dropped.
Source File: http://172.20.223.33/sites/all/modules/lightbox2/css/lightbox.css
Line: 107

#lightbox {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  line-height: 0;
}
#lightbox a img {
  border: none;
}
#outerImageContainer {
  position: relative;
  background-color: #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  min-width: 240px;
}
#imageContainer {
  padding: 10px;
}
#loading {
  position: absolute;
  top: 40%;
  left: 45%;
  *left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
#hoverNav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
#imageContainer>#hoverNav {
  left: 0;
}
#hoverNav a {
  outline: none;
}
#prevLink, #nextLink {
  width: 49%;
  height: 100%;
  background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
  display: block;
}
#prevLink {
  left: 0;
  float: left;
}
#nextLink {
  right: 0;
  float: right;
}
#prevLink:hover, #prevLink:visited:hover {
  background: url(../images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
  background: url(../images/nextlabel.gif) right 15% no-repeat;
}
#imageDataContainer {
  font: 10px Verdana, Helvetica, sans-serif;
  background-color: #fff;
  margin: 0 auto;
  line-height: 1.4em;
  min-width: 240px;
}
#imageData {
  padding: 0 10px;
}
#imageData #imageDetails {
  width: 70%;
  float: left;
  text-align: left;
}
#imageData #caption {
  font-weight: bold;
}
#imageData #numberDisplay {
  display: block;
  clear: left;
  padding-bottom: 1.0em;
}
#imageData #bottomNavClose {
  width: 66px;
  float: right;
  padding-top: 0.7em;
}
#imageData #bottomNav {
  height: 57px;
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
  background-color: #000;
  filter:alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html>body .clearfix {
  display: inline;
  width: 100%;
}
* html .clearfix {
  /* Hides from IE-mac \*/
  height: 1%;
  /* End hide from IE-mac */
}

/* Image location mod */
#bottomNavClose {
  display: block;
  background: url(../images/closelabel.gif) no-repeat;
  width: 66px;
  height: 22px;
  position: relative;
  top: 35px;
}
#loadingLink {
  display: block;
  background: url(../images/loading.gif) no-repeat;
  width: 32px;
  height: 32px;
}
#bottomNavZoom {
  display: block;
  background: url(../images/expand.gif) no-repeat;
  width: 34px;
  height: 34px;
  position: relative;
  float: right;
  left: 66px;
}



Error: Object.extend is not a function
Source File: http://172.20.223.33/sites/all/modules/lightbox2/js/lightbox.js
Line: 117

// -----------------------------------------------------------------------------------
//
//	Lightbox v2.02
//	by Lokesh Dhakar - http://www.huddletogether.com
//	3/31/06
//
//	For more information on this script, visit:
//	http://huddletogether.com/projects/lightbox2/
//
//  Additional elements added by Mark Ashmead.
//
//	Permission has been granted to Mark Ashmead to distribute this file via Drupal.org
//  Under GPL license.
//	Mailto: bugzie@gmail.com
//	
//	Credit also due to those who have helped, inspired, and made their code available to the public.
//	Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
//
//
// -----------------------------------------------------------------------------------
/*

	Table of Contents
	-----------------
	Configuration
	Global Variables

	Extending Built-in Objects	
	- Object.extend(Element)
	- Array.prototype.removeDuplicates()
	- Array.prototype.empty()

	Lightbox Class Declaration
	- initialize()
	- start()
	- changeImage()
	- resizeImageContainer()
	- showImage()
	- updateDetails()
	- updateNav()
	- enableKeyboardNav()
	- disableKeyboardNav()
	- keyboardAction()
	- preloadNeighborImages()
	- end()
	
	Miscellaneous Functions
	- getPageScroll()
	- getPageSize()
	- getKey()
	- listenKey()
	- showSelectBoxes()
	- hideSelectBoxes()
	- pause()
	- initLightbox()
	
	Function Calls
	- addLoadEvent(initLightbox)
	
*/
// -----------------------------------------------------------------------------------

//
//	Configuration
//
//var fileLoadingImage = "/sites/all/modules/lightbox2/images/loading.gif";
//var fileBottomNavCloseImage = "/sites/all/modules/lightbox2/images/closelabel.gif";
//var fileBottomNavZoomImage = "/sites/all/modules/lightbox2/images/expand.gif"; //Update to 2.02+

var resizeSpeed = 7;	// controls the speed of the image resizing (1=slowest and 10=fastest)

var borderSize = 10;	//if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

//
//	Global Variables
//
var imageArray = new Array;
var activeImage;

if(resizeSpeed > 10){ resizeSpeed = 10;}
if(resizeSpeed < 1){ resizeSpeed = 1;}
resizeDuration = (11 - resizeSpeed) * 0.15;

// -----------------------------------------------------------------------------------

//
//	Additional methods for Element added by SU, Couloir
//	- further additions by Lokesh Dhakar (huddletogether.com)
//
Object.extend(Element, {
	getWidth: function(element) {
	   	element = $ID(element);
	   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
	   	element = $ID(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $ID(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $ID(element);
    	element.style.top = t +"px";
	},
	setSrc: function(element,src) {
    	element = $ID(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $ID(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $ID(element);
		element.innerHTML = content;
	}
});

// -----------------------------------------------------------------------------------

//
//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()
//
Array.prototype.removeDuplicates = function () {
	for(i = 1; i < this.length; i++){
		if(this[i][0] == this[i-1][0]){
			this.splice(i,1);
		}
	}
}

// -----------------------------------------------------------------------------------

Array.prototype.empty = function () {
	for(i = 0; i <= this.length; i++){
		this.shift();
	}
}

// -----------------------------------------------------------------------------------

//
//	Lightbox Class Declaration
//	- initialize()
//	- start()
//	- changeImage()
//	- resizeImageContainer()
//	- showImage()
//	- updateDetails()
//	- updateNav()
//	- enableKeyboardNav()
//	- disableKeyboardNav()
//	- keyboardNavAction()
//	- preloadNeighborImages()
//	- end()
//
//	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
//
var Lightbox = Class.create();

Lightbox.prototype = {
	
	// initialize()
	// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for 
	// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
	// the function inserts html at the bottom of the page which is used to display the shadow 
	// overlay and the image container.
	//
	initialize: function() {	
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}
		}

		// The rest of this code inserts html at the bottom of the page that looks similar to this:
		//
		//	<div id="overlay"></div>
		//	<div id="lightbox">
		//		<div id="outerImageContainer">
		//			<div id="imageContainer">
		//				<img id="lightboxImage">
		//				<div style="" id="hoverNav">
		//					<a href="#" id="prevLink"></a>
		//					<a href="#" id="nextLink"></a>
		//				</div>
		//				<div id="loading">
		//					<a href="#" id="loadingLink">
		//						<img src="images/loading.gif">
		//					</a>
		//				</div>
		//			</div>
		//		</div>
		//		<div id="imageDataContainer">
		//			<div id="imageData">
		//				<div id="imageDetails">
		//					<span id="caption"></span>
		//					<span id="numberDisplay"></span>
		//				</div>
		//				<div id="bottomNav">
		//					<a href="#" id="bottomNavClose">
		//						<img src="images/close.gif">
		//					</a>
		//				</div>
		//			</div>
		//		</div>
		//	</div>


		var objBody = document.getElementsByTagName("body").item(0);
		
		var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','overlay');
		objOverlay.style.display = 'none';
		objOverlay.onclick = function() { myLightbox.end(); return false; }
		objBody.appendChild(objOverlay);
		
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','lightbox');
		objLightbox.style.display = 'none';
		objBody.appendChild(objLightbox);
	
		var objOuterImageContainer = document.createElement("div");
		objOuterImageContainer.setAttribute('id','outerImageContainer');
		objLightbox.appendChild(objOuterImageContainer);

		var objImageContainer = document.createElement("div");
		objImageContainer.setAttribute('id','imageContainer');
		objOuterImageContainer.appendChild(objImageContainer);
	
		var objLightboxImage = document.createElement("img");
		objLightboxImage.setAttribute('id','lightboxImage');
		objImageContainer.appendChild(objLightboxImage);
	
		var objHoverNav = document.createElement("div");
		objHoverNav.setAttribute('id','hoverNav');
		objImageContainer.appendChild(objHoverNav);
	
		var objPrevLink = document.createElement("a");
		objPrevLink.setAttribute('id','prevLink');
		objPrevLink.setAttribute('href','#');
		objPrevLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
		objHoverNav.appendChild(objPrevLink);
		
		var objNextLink = document.createElement("a");
		objNextLink.setAttribute('id','nextLink');
		objNextLink.setAttribute('href','#');
		objNextLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
		objHoverNav.appendChild(objNextLink);
	
		var objLoading = document.createElement("div");
		objLoading.setAttribute('id','loading');
		objImageContainer.appendChild(objLoading);
	
		var objLoadingLink = document.createElement("a");
		objLoadingLink.setAttribute('id','loadingLink');
		objLoadingLink.setAttribute('href','#');
		objLoadingLink.onclick = function() { myLightbox.end(); return false; }
		objLoading.appendChild(objLoadingLink);
	
		//var objLoadingImage = document.createElement("img");
//  objLoadingImage.setAttribute('src', fileLoadingImage);
//  objLoadingLink.appendChild(objLoadingImage);

		var objImageDataContainer = document.createElement("div");
		objImageDataContainer.setAttribute('id','imageDataContainer');
		objImageDataContainer.className = 'clearfix';
		objLightbox.appendChild(objImageDataContainer);

		var objImageData = document.createElement("div");
		objImageData.setAttribute('id','imageData');
		objImageDataContainer.appendChild(objImageData);
	
		var objImageDetails = document.createElement("div");
		objImageDetails.setAttribute('id','imageDetails');
		objImageData.appendChild(objImageDetails);
	
		var objCaption = document.createElement("span");
		objCaption.setAttribute('id','caption');
		objImageDetails.appendChild(objCaption);
	
		var objNumberDisplay = document.createElement("span");
		objNumberDisplay.setAttribute('id','numberDisplay');
		objImageDetails.appendChild(objNumberDisplay);
		
		var objBottomNav = document.createElement("div");
		objBottomNav.setAttribute('id','bottomNav');
		objImageData.appendChild(objBottomNav);
		
		//Start Close button Placement
		var objBottomNavCloseLink = document.createElement("a");
		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
		objBottomNavCloseLink.setAttribute('href','#');
		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
		objBottomNav.appendChild(objBottomNavCloseLink);
	
		//var objBottomNavCloseImage = document.createElement("img");
		//objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
		//objBottomNavCloseLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
		//objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
		//End Close button Placement
		
		//Start - Update to 2.02+
		var objBottomNavZoomLink = document.createElement("a");
		objBottomNavZoomLink.setAttribute('id','bottomNavZoom');
		objBottomNavZoomLink.setAttribute('href','#');
		objBottomNavZoomLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
		objBottomNavZoomLink.onclick = function() { myLightbox.changeImage(activeImage,'TRUE'); return false; }
		objBottomNav.appendChild(objBottomNavZoomLink);
	
		//var objBottomNavZoomImage = document.createElement("img");
		//objBottomNavZoomImage.setAttribute('src', fileBottomNavZoomImage);
		//objBottomNavZoomLink.appendChild(objBottomNavZoomImage);
		//End - Update to 2.02+
	},
	
	//
	//	start()
	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
	//
	start: function(imageLink) {	

		hideSelectBoxes();

		// stretch overlay to fill page and fade in
		var arrayPageSize = getPageSize();
		Element.setHeight('overlay', arrayPageSize[1]);
		new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });

		imageArray = [];
		imageNum = 0;

		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// if image is NOT part of a set..
		if((imageLink.getAttribute('rel') == 'lightbox')){
			// add single image to imageArray
			imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
		} else {
		// if image is part of a set..

			// loop through anchors, find other images in set, and add them to imageArray
			for (var i=0; i<anchors.length; i++){
				var anchor = anchors[i];
				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
					imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
				}
			}
			imageArray.removeDuplicates();
			while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
		}

		// calculate top offset for the lightbox and display 
		var arrayPageSize = getPageSize();
		var arrayPageScroll = getPageScroll();
		//var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15); //REMed: Update to 2.02+
		var lightboxTop = arrayPageScroll[1] + 4 //Update to 2.02+

		Element.setTop('lightbox', lightboxTop);
		Element.show('lightbox');
		
		this.changeImage(imageNum);
	},

	//
	//	changeImage()
	//	Hide most elements and preload image in preparation for resizing image container.
	//
	changeImage: function(imageNum, zoom) {	
		
		activeImage = imageNum;	// update global var

		// hide elements during transition
		Element.show('loading');
		Element.hide('lightboxImage');
		Element.hide('hoverNav');
		Element.hide('prevLink');
		Element.hide('nextLink');
		Element.hide('imageDataContainer');
		Element.hide('numberDisplay');		
		
		imgPreloader = new Image();
		
		// once image is preloaded, resize image container
		if (zoom=="TRUE"){
		imgPreloader.onload=function(){
			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
			photo.style.width = (imgPreloader.width)+ 'px';
			myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
		}
		Element.hide('bottomNavZoom')
		}else{
		imgPreloader.onload=function(){
			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
			//resize code
			var arrayPageSize = getPageSize();
			var targ = { w:arrayPageSize[2] - (borderSize * 2), h:arrayPageSize[3] - (borderSize * 6) };
		    var orig = { w:imgPreloader.width, h:imgPreloader.height };
		    //// shrink image with the same aspect
		    var ratio = 1.0;
		    Element.hide('bottomNavZoom');
		    if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w){
			    ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h;
			    Element.show('bottomNavZoom');
			}
		    var new_width  = Math.floor(orig.w * ratio);
		    var new_height = Math.floor(orig.h * ratio);
			photo = document.getElementById('lightboxImage');
            		photo.style.width = (new_width)+ 'px';
			
			myLightbox.resizeImageContainer(new_width, new_height);	
		}
	}
		imgPreloader.src = imageArray[activeImage][0];
	},


	//
	//	resizeImageContainer()
	//
	resizeImageContainer: function( imgWidth, imgHeight) {

		// get current height and width
		this.wCur = Element.getWidth('outerImageContainer');
		this.hCur = Element.getHeight('outerImageContainer');

		// scalars based on change from old to new
		this.xScale = ((imgWidth  + (borderSize * 2)) / this.wCur) * 100;
		this.yScale = ((imgHeight  + (borderSize * 2)) / this.hCur) * 100;

		// calculate size difference between new and old image, and resize if necessary
		wDiff = (this.wCur - borderSize * 2) - imgWidth;
		hDiff = (this.hCur - borderSize * 2) - imgHeight;

		if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
		if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }

		// 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 (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
		}

		Element.setHeight('prevLink', imgHeight);
		Element.setHeight('nextLink', imgHeight);
		Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));

		this.showImage();
	},
	
	//
	//	showImage()
	//	Display image and begin preloading neighbors.
	//
	showImage: function(){
		Element.hide('loading');
		new Effect.Appear('lightboxImage', { duration: 0.5, queue: 'end', afterFinish: function(){	myLightbox.updateDetails(); } });
		this.preloadNeighborImages();
	},

	//
	//	updateDetails()
	//	Display caption, image number, and bottom nav.
	//
	updateDetails: function() {
	
		Element.show('caption');
		Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
		
		// if image is part of set display 'Image x of x' 
		if(imageArray.length > 1){
			Element.show('numberDisplay');
			Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
		}

		new Effect.Parallel(
			[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }), 
			  new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ], 
			{ duration: 0.65, afterFinish: function() { myLightbox.updateNav();} } 
		);
	},

	//
	//	updateNav()
	//	Display appropriate previous and next hover navigation.
	//
	updateNav: function() {

		Element.show('hoverNav');				

		// if not first image in set, display prev image button
		if(activeImage != 0){
			Element.show('prevLink');
			document.getElementById('prevLink').onclick = function() {
				myLightbox.changeImage(activeImage - 1); return false;
			}
		}

		// if not last image in set, display next image button
		if(activeImage != (imageArray.length - 1)){
			Element.show('nextLink');
			document.getElementById('nextLink').onclick = function() {
				myLightbox.changeImage(activeImage + 1); return false;
			}
		}
		
		this.enableKeyboardNav();
	},

	//
	//	enableKeyboardNav()
	//
	enableKeyboardNav: function() {
		document.onkeydown = this.keyboardAction; 
	},

	//
	//	disableKeyboardNav()
	//
	disableKeyboardNav: function() {
		document.onkeydown = '';
	},

	//
	//	keyboardAction()
	//
	// Update to 2.02+
	keyboardAction: function(e) {

    if (e == null) { // ie
			keycode = event.keyCode;
		} else { // mozilla
			keycode = e.which;
		}
		
		// Instead of the above code, (starting with 'if ...') Roel replaced it with the code below, 
    // but I see no use for it. Perhaps it has something to do with browsercompatibility, so I 
    // left it here, so you can try whether it works better in case you run in to any problems.

		//keyboardAction: function(e) {
    //var keyCode =
    //document.layers ? e.which :
    //document.all ? event.keyCode :
    //document.getElementById ? e.keyCode : 0;


		key = String.fromCharCode(keycode).toLowerCase();
		
		if((key == 'x') || (key == 'o') || (key == 'c')){	// close lightbox
			myLightbox.end();
		} else if(key == 'p' || keycode == 37 || keycode == 8 || keycode == 100){	// display previous image
			if(activeImage != 0){
				myLightbox.disableKeyboardNav();
				myLightbox.changeImage(activeImage - 1);
			}
		} else if(key == 'n' || keycode == 39 || keycode == 32 || keycode == 102){	// display next image
			if(activeImage != (imageArray.length - 1)){
				myLightbox.disableKeyboardNav();
				myLightbox.changeImage(activeImage + 1);
			}
		}

	},

	//
	//	preloadNeighborImages()
	//	Preload previous and next images.
	//
	preloadNeighborImages: function(){

		if((imageArray.length - 1) > activeImage){
			preloadNextImage = new Image();
			preloadNextImage.src = imageArray[activeImage + 1][0];
		}
		if(activeImage > 0){
			preloadPrevImage = new Image();
			preloadPrevImage.src = imageArray[activeImage - 1][0];
		}
	
	},

	//
	//	end()
	//
	end: function() {
		this.disableKeyboardNav();
		Element.hide('lightbox');
		new Effect.Fade('overlay', { duration: 0.2});
		showSelectBoxes();
	}
}

// -----------------------------------------------------------------------------------

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}

// -----------------------------------------------------------------------------------

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

// -----------------------------------------------------------------------------------

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//
function getKey(e){
	if (e == null) { // ie
		keycode = event.keyCode;
	} else { // mozilla
		keycode = e.which;
	}
	key = String.fromCharCode(keycode).toLowerCase();
	
	if(key == 'x'){
	}
}

// -----------------------------------------------------------------------------------

//
// listenKey()
//
function listenKey () {	document.onkeypress = getKey; }
	
// ---------------------------------------------------

function showSelectBoxes(){
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "visible";
	}
}

// ---------------------------------------------------

function hideSelectBoxes(){
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "hidden";
	}
}

// ---------------------------------------------------

//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
			return;
	}
}

// ---------------------------------------------------



function initLightbox() { myLightbox = new Lightbox(); }
Event.observe(window, 'load', initLightbox, false);





Error: document.getElementsByClassName is not a function
Source File: http://172.20.223.33/sites/all/modules/lightbox2/js/image_nodes_galleries.js
Line: 8

// Image Node Auto-Format with Auto Image Grouping and no lightbox for nested
// gallery links
// Stella Power

if (Drupal.jsEnabled) {
		$(document).ready(function lightbox2_image_nodes() {
				var gallery = new Array();
				var nodes = document.getElementsByClassName("galleries");
				for (var i = 0; i < nodes.length; i++) {
						// select all the images inside those lists
						var sub = nodes[i].getElementsByTagName("img");
						for (var j = 0; j < sub.length; j++) {
								if (Element.hasClassName(sub[j], "image-thumbnail") || Element.hasClassName(sub[j], "thumbnail")) {
										gallery.push(sub[j]);
								}
						}
				}


				var nodes = document.getElementsByClassName("image");
				for (var i = 0; i < nodes.length; i++) {
						if (Element.hasClassName(nodes[i], "image-thumbnail") || Element.hasClassName(nodes[i], "thumbnail")) {
								if (gallery.indexOf(nodes[i]) == -1) {
										var parent = nodes[i].parentNode;
										parent.rel = "lightbox[node_thumbnails]";
										parent.title = nodes[i].alt.concat("<br /><br /><a href=\"" + parent.href + "\">View Image Information</a>");
										parent.href = nodes[i].src.replace(".thumbnail", "");
										//parent.title = nodes[i].alt;
								}
						}
				}
		});
}





Error: Lightbox is not a constructor
Source File: http://172.20.223.33/sites/all/modules/lightbox2/js/lightbox.js
Line: 750

// -----------------------------------------------------------------------------------
//
//	Lightbox v2.02
//	by Lokesh Dhakar - http://www.huddletogether.com
//	3/31/06
//
//	For more information on this script, visit:
//	http://huddletogether.com/projects/lightbox2/
//
//  Additional elements added by Mark Ashmead.
//
//	Permission has been granted to Mark Ashmead to distribute this file via Drupal.org
//  Under GPL license.
//	Mailto: bugzie@gmail.com
//	
//	Credit also due to those who have helped, inspired, and made their code available to the public.
//	Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
//
//
// -----------------------------------------------------------------------------------
/*

	Table of Contents
	-----------------
	Configuration
	Global Variables

	Extending Built-in Objects	
	- Object.extend(Element)
	- Array.prototype.removeDuplicates()
	- Array.prototype.empty()

	Lightbox Class Declaration
	- initialize()
	- start()
	- changeImage()
	- resizeImageContainer()
	- showImage()
	- updateDetails()
	- updateNav()
	- enableKeyboardNav()
	- disableKeyboardNav()
	- keyboardAction()
	- preloadNeighborImages()
	- end()
	
	Miscellaneous Functions
	- getPageScroll()
	- getPageSize()
	- getKey()
	- listenKey()
	- showSelectBoxes()
	- hideSelectBoxes()
	- pause()
	- initLightbox()
	
	Function Calls
	- addLoadEvent(initLightbox)
	
*/
// -----------------------------------------------------------------------------------

//
//	Configuration
//
//var fileLoadingImage = "/sites/all/modules/lightbox2/images/loading.gif";
//var fileBottomNavCloseImage = "/sites/all/modules/lightbox2/images/closelabel.gif";
//var fileBottomNavZoomImage = "/sites/all/modules/lightbox2/images/expand.gif"; //Update to 2.02+

var resizeSpeed = 7;	// controls the speed of the image resizing (1=slowest and 10=fastest)

var borderSize = 10;	//if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

//
//	Global Variables
//
var imageArray = new Array;
var activeImage;

if(resizeSpeed > 10){ resizeSpeed = 10;}
if(resizeSpeed < 1){ resizeSpeed = 1;}
resizeDuration = (11 - resizeSpeed) * 0.15;

// -----------------------------------------------------------------------------------

//
//	Additional methods for Element added by SU, Couloir
//	- further additions by Lokesh Dhakar (huddletogether.com)
//
Object.extend(Element, {
	getWidth: function(element) {
	   	element = $ID(element);
	   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
	   	element = $ID(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $ID(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $ID(element);
    	element.style.top = t +"px";
	},
	setSrc: function(element,src) {
    	element = $ID(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $ID(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $ID(element);
		element.innerHTML = content;
	}
});

// -----------------------------------------------------------------------------------

//
//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()
//
Array.prototype.removeDuplicates = function () {
	for(i = 1; i < this.length; i++){
		if(this[i][0] == this[i-1][0]){
			this.splice(i,1);
		}
	}
}

// -----------------------------------------------------------------------------------

Array.prototype.empty = function () {
	for(i = 0; i <= this.length; i++){
		this.shift();
	}
}

// -----------------------------------------------------------------------------------

//
//	Lightbox Class Declaration
//	- initialize()
//	- start()
//	- changeImage()
//	- resizeImageContainer()
//	- showImage()
//	- updateDetails()
//	- updateNav()
//	- enableKeyboardNav()
//	- disableKeyboardNav()
//	- keyboardNavAction()
//	- preloadNeighborImages()
//	- end()
//
//	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
//
var Lightbox = Class.create();

Lightbox.prototype = {
	
	// initialize()
	// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for 
	// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
	// the function inserts html at the bottom of the page which is used to display the shadow 
	// overlay and the image container.
	//
	initialize: function() {	
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}
		}

		// The rest of this code inserts html at the bottom of the page that looks similar to this:
		//
		//	<div id="overlay"></div>
		//	<div id="lightbox">
		//		<div id="outerImageContainer">
		//			<div id="imageContainer">
		//				<img id="lightboxImage">
		//				<div style="" id="hoverNav">
		//					<a href="#" id="prevLink"></a>
		//					<a href="#" id="nextLink"></a>
		//				</div>
		//				<div id="loading">
		//					<a href="#" id="loadingLink">
		//						<img src="images/loading.gif">
		//					</a>
		//				</div>
		//			</div>
		//		</div>
		//		<div id="imageDataContainer">
		//			<div id="imageData">
		//				<div id="imageDetails">
		//					<span id="caption"></span>
		//					<span id="numberDisplay"></span>
		//				</div>
		//				<div id="bottomNav">
		//					<a href="#" id="bottomNavClose">
		//						<img src="images/close.gif">
		//					</a>
		//				</div>
		//			</div>
		//		</div>
		//	</div>


		var objBody = document.getElementsByTagName("body").item(0);
		
		var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','overlay');
		objOverlay.style.display = 'none';
		objOverlay.onclick = function() { myLightbox.end(); return false; }
		objBody.appendChild(objOverlay);
		
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','lightbox');
		objLightbox.style.display = 'none';
		objBody.appendChild(objLightbox);
	
		var objOuterImageContainer = document.createElement("div");
		objOuterImageContainer.setAttribute('id','outerImageContainer');
		objLightbox.appendChild(objOuterImageContainer);

		var objImageContainer = document.createElement("div");
		objImageContainer.setAttribute('id','imageContainer');
		objOuterImageContainer.appendChild(objImageContainer);
	
		var objLightboxImage = document.createElement("img");
		objLightboxImage.setAttribute('id','lightboxImage');
		objImageContainer.appendChild(objLightboxImage);
	
		var objHoverNav = document.createElement("div");
		objHoverNav.setAttribute('id','hoverNav');
		objImageContainer.appendChild(objHoverNav);
	
		var objPrevLink = document.createElement("a");
		objPrevLink.setAttribute('id','prevLink');
		objPrevLink.setAttribute('href','#');
		objPrevLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
		objHoverNav.appendChild(objPrevLink);
		
		var objNextLink = document.createElement("a");
		objNextLink.setAttribute('id','nextLink');
		objNextLink.setAttribute('href','#');
		objNextLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
		objHoverNav.appendChild(objNextLink);
	
		var objLoading = document.createElement("div");
		objLoading.setAttribute('id','loading');
		objImageContainer.appendChild(objLoading);
	
		var objLoadingLink = document.createElement("a");
		objLoadingLink.setAttribute('id','loadingLink');
		objLoadingLink.setAttribute('href','#');
		objLoadingLink.onclick = function() { myLightbox.end(); return false; }
		objLoading.appendChild(objLoadingLink);
	
		//var objLoadingImage = document.createElement("img");
//  objLoadingImage.setAttribute('src', fileLoadingImage);
//  objLoadingLink.appendChild(objLoadingImage);

		var objImageDataContainer = document.createElement("div");
		objImageDataContainer.setAttribute('id','imageDataContainer');
		objImageDataContainer.className = 'clearfix';
		objLightbox.appendChild(objImageDataContainer);

		var objImageData = document.createElement("div");
		objImageData.setAttribute('id','imageData');
		objImageDataContainer.appendChild(objImageData);
	
		var objImageDetails = document.createElement("div");
		objImageDetails.setAttribute('id','imageDetails');
		objImageData.appendChild(objImageDetails);
	
		var objCaption = document.createElement("span");
		objCaption.setAttribute('id','caption');
		objImageDetails.appendChild(objCaption);
	
		var objNumberDisplay = document.createElement("span");
		objNumberDisplay.setAttribute('id','numberDisplay');
		objImageDetails.appendChild(objNumberDisplay);
		
		var objBottomNav = document.createElement("div");
		objBottomNav.setAttribute('id','bottomNav');
		objImageData.appendChild(objBottomNav);
		
		//Start Close button Placement
		var objBottomNavCloseLink = document.createElement("a");
		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
		objBottomNavCloseLink.setAttribute('href','#');
		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
		objBottomNav.appendChild(objBottomNavCloseLink);
	
		//var objBottomNavCloseImage = document.createElement("img");
		//objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
		//objBottomNavCloseLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
		//objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
		//End Close button Placement
		
		//Start - Update to 2.02+
		var objBottomNavZoomLink = document.createElement("a");
		objBottomNavZoomLink.setAttribute('id','bottomNavZoom');
		objBottomNavZoomLink.setAttribute('href','#');
		objBottomNavZoomLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
		objBottomNavZoomLink.onclick = function() { myLightbox.changeImage(activeImage,'TRUE'); return false; }
		objBottomNav.appendChild(objBottomNavZoomLink);
	
		//var objBottomNavZoomImage = document.createElement("img");
		//objBottomNavZoomImage.setAttribute('src', fileBottomNavZoomImage);
		//objBottomNavZoomLink.appendChild(objBottomNavZoomImage);
		//End - Update to 2.02+
	},
	
	//
	//	start()
	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
	//
	start: function(imageLink) {	

		hideSelectBoxes();

		// stretch overlay to fill page and fade in
		var arrayPageSize = getPageSize();
		Element.setHeight('overlay', arrayPageSize[1]);
		new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });

		imageArray = [];
		imageNum = 0;

		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// if image is NOT part of a set..
		if((imageLink.getAttribute('rel') == 'lightbox')){
			// add single image to imageArray
			imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
		} else {
		// if image is part of a set..

			// loop through anchors, find other images in set, and add them to imageArray
			for (var i=0; i<anchors.length; i++){
				var anchor = anchors[i];
				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
					imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
				}
			}
			imageArray.removeDuplicates();
			while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
		}

		// calculate top offset for the lightbox and display 
		var arrayPageSize = getPageSize();
		var arrayPageScroll = getPageScroll();
		//var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15); //REMed: Update to 2.02+
		var lightboxTop = arrayPageScroll[1] + 4 //Update to 2.02+

		Element.setTop('lightbox', lightboxTop);
		Element.show('lightbox');
		
		this.changeImage(imageNum);
	},

	//
	//	changeImage()
	//	Hide most elements and preload image in preparation for resizing image container.
	//
	changeImage: function(imageNum, zoom) {	
		
		activeImage = imageNum;	// update global var

		// hide elements during transition
		Element.show('loading');
		Element.hide('lightboxImage');
		Element.hide('hoverNav');
		Element.hide('prevLink');
		Element.hide('nextLink');
		Element.hide('imageDataContainer');
		Element.hide('numberDisplay');		
		
		imgPreloader = new Image();
		
		// once image is preloaded, resize image container
		if (zoom=="TRUE"){
		imgPreloader.onload=function(){
			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
			photo.style.width = (imgPreloader.width)+ 'px';
			myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
		}
		Element.hide('bottomNavZoom')
		}else{
		imgPreloader.onload=function(){
			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
			//resize code
			var arrayPageSize = getPageSize();
			var targ = { w:arrayPageSize[2] - (borderSize * 2), h:arrayPageSize[3] - (borderSize * 6) };
		    var orig = { w:imgPreloader.width, h:imgPreloader.height };
		    //// shrink image with the same aspect
		    var ratio = 1.0;
		    Element.hide('bottomNavZoom');
		    if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w){
			    ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h;
			    Element.show('bottomNavZoom');
			}
		    var new_width  = Math.floor(orig.w * ratio);
		    var new_height = Math.floor(orig.h * ratio);
			photo = document.getElementById('lightboxImage');
            		photo.style.width = (new_width)+ 'px';
			
			myLightbox.resizeImageContainer(new_width, new_height);	
		}
	}
		imgPreloader.src = imageArray[activeImage][0];
	},


	//
	//	resizeImageContainer()
	//
	resizeImageContainer: function( imgWidth, imgHeight) {

		// get current height and width
		this.wCur = Element.getWidth('outerImageContainer');
		this.hCur = Element.getHeight('outerImageContainer');

		// scalars based on change from old to new
		this.xScale = ((imgWidth  + (borderSize * 2)) / this.wCur) * 100;
		this.yScale = ((imgHeight  + (borderSize * 2)) / this.hCur) * 100;

		// calculate size difference between new and old image, and resize if necessary
		wDiff = (this.wCur - borderSize * 2) - imgWidth;
		hDiff = (this.hCur - borderSize * 2) - imgHeight;

		if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
		if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }

		// 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 (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
		}

		Element.setHeight('prevLink', imgHeight);
		Element.setHeight('nextLink', imgHeight);
		Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));

		this.showImage();
	},
	
	//
	//	showImage()
	//	Display image and begin preloading neighbors.
	//
	showImage: function(){
		Element.hide('loading');
		new Effect.Appear('lightboxImage', { duration: 0.5, queue: 'end', afterFinish: function(){	myLightbox.updateDetails(); } });
		this.preloadNeighborImages();
	},

	//
	//	updateDetails()
	//	Display caption, image number, and bottom nav.
	//
	updateDetails: function() {
	
		Element.show('caption');
		Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
		
		// if image is part of set display 'Image x of x' 
		if(imageArray.length > 1){
			Element.show('numberDisplay');
			Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
		}

		new Effect.Parallel(
			[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }), 
			  new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ], 
			{ duration: 0.65, afterFinish: function() { myLightbox.updateNav();} } 
		);
	},

	//
	//	updateNav()
	//	Display appropriate previous and next hover navigation.
	//
	updateNav: function() {

		Element.show('hoverNav');				

		// if not first image in set, display prev image button
		if(activeImage != 0){
			Element.show('prevLink');
			document.getElementById('prevLink').onclick = function() {
				myLightbox.changeImage(activeImage - 1); return false;
			}
		}

		// if not last image in set, display next image button
		if(activeImage != (imageArray.length - 1)){
			Element.show('nextLink');
			document.getElementById('nextLink').onclick = function() {
				myLightbox.changeImage(activeImage + 1); return false;
			}
		}
		
		this.enableKeyboardNav();
	},

	//
	//	enableKeyboardNav()
	//
	enableKeyboardNav: function() {
		document.onkeydown = this.keyboardAction; 
	},

	//
	//	disableKeyboardNav()
	//
	disableKeyboardNav: function() {
		document.onkeydown = '';
	},

	//
	//	keyboardAction()
	//
	// Update to 2.02+
	keyboardAction: function(e) {

    if (e == null) { // ie
			keycode = event.keyCode;
		} else { // mozilla
			keycode = e.which;
		}
		
		// Instead of the above code, (starting with 'if ...') Roel replaced it with the code below, 
    // but I see no use for it. Perhaps it has something to do with browsercompatibility, so I 
    // left it here, so you can try whether it works better in case you run in to any problems.

		//keyboardAction: function(e) {
    //var keyCode =
    //document.layers ? e.which :
    //document.all ? event.keyCode :
    //document.getElementById ? e.keyCode : 0;


		key = String.fromCharCode(keycode).toLowerCase();
		
		if((key == 'x') || (key == 'o') || (key == 'c')){	// close lightbox
			myLightbox.end();
		} else if(key == 'p' || keycode == 37 || keycode == 8 || keycode == 100){	// display previous image
			if(activeImage != 0){
				myLightbox.disableKeyboardNav();
				myLightbox.changeImage(activeImage - 1);
			}
		} else if(key == 'n' || keycode == 39 || keycode == 32 || keycode == 102){	// display next image
			if(activeImage != (imageArray.length - 1)){
				myLightbox.disableKeyboardNav();
				myLightbox.changeImage(activeImage + 1);
			}
		}

	},

	//
	//	preloadNeighborImages()
	//	Preload previous and next images.
	//
	preloadNeighborImages: function(){

		if((imageArray.length - 1) > activeImage){
			preloadNextImage = new Image();
			preloadNextImage.src = imageArray[activeImage + 1][0];
		}
		if(activeImage > 0){
			preloadPrevImage = new Image();
			preloadPrevImage.src = imageArray[activeImage - 1][0];
		}
	
	},

	//
	//	end()
	//
	end: function() {
		this.disableKeyboardNav();
		Element.hide('lightbox');
		new Effect.Fade('overlay', { duration: 0.2});
		showSelectBoxes();
	}
}

// -----------------------------------------------------------------------------------

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}

// -----------------------------------------------------------------------------------

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

// -----------------------------------------------------------------------------------

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//
function getKey(e){
	if (e == null) { // ie
		keycode = event.keyCode;
	} else { // mozilla
		keycode = e.which;
	}
	key = String.fromCharCode(keycode).toLowerCase();
	
	if(key == 'x'){
	}
}

// -----------------------------------------------------------------------------------

//
// listenKey()
//
function listenKey () {	document.onkeypress = getKey; }
	
// ---------------------------------------------------

function showSelectBoxes(){
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "visible";
	}
}

// ---------------------------------------------------

function hideSelectBoxes(){
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "hidden";
	}
}

// ---------------------------------------------------

//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
			return;
	}
}

// ---------------------------------------------------



function initLightbox() { myLightbox = new Lightbox(); }
Event.observe(window, 'load', initLightbox, false);

Bob

solimeno’s picture

StatusFileSize
new56.06 KB

I'm having the same issue in my installation. I did install the jquery update module, and copied the supplied jquery.js file as directed, but lightbox still doesn't work after upgrading to this version of the module while it had been working with the previous version. Also, Lightbox2 Lite is disabled.

Starting from the "Home" node on my drupal site and navigating to the image galleries produces the following output in the Firefox (v. 2.0.0.7) error console: see attached file.

(apparently the original post was to lengthy and I resorted to attaching the output - sorry)

Bob

stella’s picture

Well from looking at the attached file, it looks like your "sites/all/modules/lightbox2/js/lightbox.js" is still the old version. I've double-checked the release tarball and it definitely contains the new version of the javascript file. You should check that this file has been updated. You can do this by ensuring that the first lines of the file contain the phase "jQuery Lightbox". If not, you haven't correctly installed the new lightbox2 release. If they are, it's probably a cache issue. Try clearing your cache. If that fails, I find it sometimes helps to open the js file directly in your browser and refresh it there before reloading your site.

Cheers,
Stella

stella’s picture

Oh and you have a similar problem with image_nodes_galleries.js - it's still on the older version.

solimeno’s picture

Yep - it was a cache issue. The lightbox2.js file was indeed the new version with "jQuery Lightbox" - once I cleared the cache it all worked fine.

Thank you for the quick response - and of course for Lightbox - it is so cool!

Bob

stella’s picture

Category: bug » support
Status: Active » Fixed
vacilando’s picture

Works for me now, too. The reason was that I also had the jlightbox module installed and enabled. Once I disabled it, this module started to work perfectly.

stella’s picture

Yes there could be conflicts with the jLightbox module as both modules do something quite similar.

Cheers,
Stella

Anonymous’s picture

Status: Fixed » Closed (fixed)