LightboxGW + Ajax Script Help (jscheuer1??)

[santamonica10]

I am working with a script called Lightbox Gone Wild (http://particletree.com/examples/lightbox/)

I am having the same issue as many people have had with the original Lightbox script where i am loading content using ajax that include Lightbox links. I understand that i need to manually initialize the light box script using something similar to

onclick="myLightbox.start(this); return false;"

I understand that this will not work with Lightbox Gone Wild because it is coded differently. Could anyone (perhaps even the great jscheur1) assist me in how i should trigger the script?

Here is the lightbox gone wild js

Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
Event.observe(window, 'unload', Event.unloadCache, false);

var lightbox = Class.create();

lightbox.prototype = {

	yPos : 0,
	xPos : 0,

	initialize: function(ctrl) {
		this.content = ctrl.href;
		Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
		ctrl.onclick = function(){return false;};
	},
	
	// Turn everything on - mainly the IE fixes
	activate: function(){
		if (browser == 'Internet Explorer'){
			this.getScroll();
			this.prepareIE('100%', 'hidden');
			this.setScroll(0,0);
			this.hideSelects('hidden');
		}
		this.displayLightbox("block");
	},
	
	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
	prepareIE: function(height, overflow){
		bod = document.getElementsByTagName('body')[0];
		bod.style.height = height;
		bod.style.overflow = overflow;
  
		htm = document.getElementsByTagName('html')[0];
		htm.style.height = height;
		htm.style.overflow = overflow; 
	},
	
	// In IE, select elements hover on top of the lightbox
	hideSelects: function(visibility){
		selects = document.getElementsByTagName('select');
		for(i = 0; i < selects.length; i++) {
			selects[i].style.visibility = visibility;
		}
	},
	
	// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
	getScroll: function(){
		if (self.pageYOffset) {
			this.yPos = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){
			this.yPos = document.documentElement.scrollTop; 
		} else if (document.body) {
			this.yPos = document.body.scrollTop;
		}
	},
	
	setScroll: function(x, y){
		window.scrollTo(x, y); 
	},
	
	displayLightbox: function(display){
		$('overlay').style.display = display;
		$('lightbox').style.display = display;
		if(display != 'none') this.loadInfo();
	},
	
	// Begin Ajax request based off of the href of the clicked linked
	loadInfo: function() {
		var myAjax = new Ajax.Request(
        this.content,
        {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
		);
		
	},
	
	// Display Ajax response
	processInfo: function(response){
		info = "<div id='lbContent'>" + response.responseText + "</div>";
		new Insertion.Before($('lbLoadMessage'), info)
		$('lightbox').className = "done";	
		this.actions();			
	},
	
	// Search through new links within the lightbox, and attach click event
	actions: function(){
		lbActions = document.getElementsByClassName('lbAction');

		for(i = 0; i < lbActions.length; i++) {
			Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
			lbActions[i].onclick = function(){return false;};
		}

	},
	
	// Example of creating your own functionality once lightbox is initiated
	insert: function(e){
	   link = Event.element(e).parentNode;
	   Element.remove($('lbContent'));
	 
	   var myAjax = new Ajax.Request(
			  link.href,
			  {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
	   );
	 
	},
	
	// Example of creating your own functionality once lightbox is initiated
	deactivate: function(){
		Element.remove($('lbContent'));
		
		if (browser == "Internet Explorer"){
			this.setScroll(0,this.yPos);
			this.prepareIE("auto", "auto");
			this.hideSelects("visible");
		}
		
		this.displayLightbox("none");
	}
}

/*-----------------------------------------------------------------------------------------------*/

// Onload, make all links that need to trigger a lightbox active
function initialize(){
	addLightboxMarkup();
	lbox = document.getElementsByClassName('lbOn');
	for(i = 0; i < lbox.length; i++) {
		valid = new lightbox(lbox[i]);
	}
}

// Add in markup necessary to make this work. Basically two divs:
// Overlay holds the shadow
// Lightbox is the centered square that the content is put into.
function addLightboxMarkup() {
	bod 				= document.getElementsByTagName('body')[0];
	overlay 			= document.createElement('div');
	overlay.id		= 'overlay';
	lb					= document.createElement('div');
	lb.id				= 'lightbox';
	lb.className 	= 'loading';
	lb.innerHTML	= '<div id="lbLoadMessage">' +
						  '<p>Loading</p>' +
						  '</div>';
	bod.appendChild(overlay);
	bod.appendChild(lb);
}

Any help is greatly appreciated.

Happy Holidays!

Corey

[TimFA]

From what I can see,

<li><a href="link" class="lbOn">Lightbox Gone Wild</a></li>

Appears to activate it, sorry to disappoint you hes not here.

[santamonica10]

From what I can see,

<li><a href="link" class="lbOn">Lightbox Gone Wild</a></li>

Appears to activate it, sorry to disappoint you hes not here.

That works but not when the link appears on a page that is loaded with Ajax.

Thanks for the help though.

best,

Corey

[TimFA]

Possibly because the JavaScript does not have a chance to edit the events it needs to.

[santamonica10]

In this thread - http://www.dynamicdrive.com/forums/s...ad.php?t=25671
the user is having the same problem as me.

The solution was that:

The script adds these onclick events to each rel="lightbox" link on the page, when the page loads. Since your Ajax content wasn't there when the page loaded, you must put these events on manually.

The solution is to change

<a href="/images/Dinner/pic550/1024.jpg" rel="lightbox[TMT Dinner]"><img src="/images/Dinner/pic200/1024.jpg"  border="0"></a>

to

<a href="/images/Dinner/pic550/1024.jpg" onclick="myLightbox.start(this); return false;" rel="lightbox[TMT Dinner]"><img src="/images/Dinner/pic200/1024.jpg"  border="0"></a>

Now this code doesn't work exactly for LBGW (lightbox gone wild)

This refers to the original lightbox code i assume:

	// 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;}
			}
		}

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

LBGW is coded with:

initialize: function(ctrl) {
		this.content = ctrl.href;
		Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
		ctrl.onclick = function(){return false;};
	},

I hope this helps explain my problem.

Thanks for the help.

[jscheuer1]

If the way you are importing the Ajax content is via LBGW, you don't need to worry about all of that. LBGW already has that functionality built in:

Linking to a Another Lightbox within a Lightbox

If you want to load a different lightbox within an already open lightbox set the rel attribute to insert and your href to the file you want to load instead.

<a href="confirm.html" class="lbAction" rel="insert">Go to Another Lightbox</a>

However, I've found in testing that you must have an inner tag:

<a href="confirm.html" class="lbAction" rel="insert"><span>Go to Another Lightbox</span></a>

If you are importing via Ajax, but not via LBGW do this instead - add this onmouseover event to the link:

onmouseover="if(!this.init){valid = new lightbox(this);this.init=true;};"

ex:

<a href="some.htm" onmouseover="if(!this.init){valid = new lightbox(this);this.init=true;};">Something</a>

[santamonica10]

Thanks so much for the fix. This worked

<a href="some.htm" onmouseover="if(!this.init){valid = new lightbox(this);this.init=true;};">Something</a>

You are amazing. I would have never figured that out on my own. I am not sure how exactly that works but it works great!

Thanks again. You are a lifesaver!

Corey

[santamonica10]

Hi Jscheur1,

Thanks for your help so far. It seems i am having another issue. When i use a link such as:

<a href="index.php" onmouseover="if(!this.init){valid = new lightbox(this);this.init=true;};">Logic Step 1 - Application</a>

...the lightbox gone wild script is triggered, but gets stuck on the loading page. When i insert a URL that doesn't exist, I am able to see the error page, but I am unable to load pages that exist.

Is there something else that has to be triggered?

Thanks again and Happy Holidays!

Corey

[jscheuer1]

At the moment, I'm stumped. It works in Opera, which usually is one of the more finicky browsers. But not in FF or IE. And, since all I'm doing is initializing the new content, not adding any additional lightbox markup to the page, doing it exactly the way that the script initializes its class="lbOn" links onload, it will be hard to figure out. I tried some of the obvious things, none of them worked. I will look at it some more when I get more time.

[jscheuer1]

I figured it out. Unlike normal Ajax routines that I am used to, the one used by LBGW to fetch its external pages requires that the external page not have anything on it other than the intended fetched content. At least not in FF and IE. In other words, having nothing to do with the addition we made, if a page fetched with LBGW looks like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#field1 {
width:20em;
font:95% arial, sans-serif;
}
#field1 p {
margin-bottom:0;
}
</style>
<script type="text/javascript">

/* URL Picker ©2007 John Davenport Scheuer
 * This notice must remain for legal use */

document.write('<style type="text/css">.noscript {display:none;}<\/style>');
function grabUrl(f, r){
if(!document.getElementsByName){
alert('Your Browser is too old for this form!')
return;
}
for (var e=document.getElementsByName('urlpick'), i = e.length-1; i > -1; --i)
if((typeof r=='number'&& i==Math.floor(r*e.length))||(typeof r!='number'&&e[i].checked))
f.reset(),e[i].checked=true,window.location=e[i].value;
}
</script>
</head>
<body>
<div class="noscript">
Javascript Required for the following form:
</div>
<form action="#" onsubmit="grabUrl(this);return false;">
<fieldset id="field1">
<legend>Pick Destination or hit "Go Random"</legend>
<input type="radio" name="urlpick" value="http://www.google.com/">Google<br>
<input type="radio" name="urlpick" value="http://www.yahoo.com/">Yahoo<br>
<input type="radio" name="urlpick" value="http://www.dynamicdrive.com/">Dynamic Drive<br>
<p><input type="submit" value="Go"> <input type="button" value="Go Random" onclick="grabUrl(this.form, Math.random());"></p>
</fieldset></form>
</body>
</html>

It will mess things up. The above example would need to look like so:

<div class="noscript">
Javascript Required for the following form:
</div>
<form action="#" onsubmit="grabUrl(this);return false;">
<fieldset id="field1">
<legend>Pick Destination or hit "Go Random"</legend>
<input type="radio" name="urlpick" value="http://www.google.com/">Google<br>
<input type="radio" name="urlpick" value="http://www.yahoo.com/">Yahoo<br>
<input type="radio" name="urlpick" value="http://www.dynamicdrive.com/">Dynamic Drive<br>
<p><input type="submit" value="Go"> <input type="button" value="Go Random" onclick="grabUrl(this.form, Math.random());"></p>
</fieldset></form>

And its scripts and styles would need to be on the 'top' page. To try this out for yourself, try loading the page that is giving you trouble with it hard coded as a normal LBGW link on the page.