PDA

View Full Version : LightboxGW + Ajax Script Help (jscheuer1??)



santamonica10
12-23-2007, 11:16 PM
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
12-24-2007, 12:28 AM
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. :p

santamonica10
12-24-2007, 12:51 AM
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. :p


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

Thanks for the help though.

best,

Corey

TimFA
12-24-2007, 12:57 AM
Possibly because the JavaScript does not have a chance to edit the events it needs to.

santamonica10
12-24-2007, 01:22 AM
In this thread - http://www.dynamicdrive.com/forums/showthread.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
12-24-2007, 06:53 AM
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
12-24-2007, 07:59 AM
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
12-25-2007, 09:49 AM
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
12-25-2007, 12:26 PM
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
12-25-2007, 12:55 PM
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.

santamonica10
12-25-2007, 07:35 PM
Thanks for the quick reply. On Christmas no less! Can I assume you are a tribe member too?

Anyways, here is the content i am trying to load:


<div id="l6steps-mod">
<h3>Logic Step 2</h3>
<h2>Application <span class="l6steps-sub-h2">(3 Options)</span></h2>
<p>(50+ Different Product Choices with &quot;T&quot; CMH Lamp)</p>
<p>Reduced replacement lamp cost and up to 33% longer lamp life with &ldquo;T&rdquo; CMH lamp compared with PAR ceramic metal halide lamps</p>
<ul>
<li>Recessed</li>
<li>Multiple</li>
<li>Track</li>
<li>Specialty</li>
<li>Exterior</li>
</ul>
</div>

As you can see, the content that is being loaded is already formatted as you suggested.

Would it have something to do with this block of code?

// 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)
$('l6-lightbox').className = "done";
this.actions();
},

Thanks for all of your help so far.

Best,

Corey

jscheuer1
12-25-2007, 08:56 PM
That content is working fine here when imported as innerHTML - the method of Ajax importation I am most familiar with (oversimplified):


function onReadyStateChange(){
if(page_request.readyState==4 && other_good_stuff)
some_element.innerHTML=page_request.responseText;
}

It could be the code you point out though, the 'post' method being used there and one other place in LBGW's lightbox.js file may need to be changed to 'get' for certain live server configurations, this is an issue with all Ajax implementations that use 'post'. Some servers just don't allow it. However, this shouldn't matter in local testing, or if other LBGW content is working on that server. Another issue could be the Ajax routine used to import the LBGW link in the first place. It could be conflicting with LBGW's Ajax, or just not bringing in the link properly. There could be other issues.

I think we are at the point where I would need to see a live demo of the problem to help further:

Please post a link to a live page that contains the problematic code so we can check it out.

santamonica10
12-25-2007, 09:16 PM
Here is the ajax script i am using:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

The test page is up at:

www-dot-coreymichaelstudio-dot-com/test/736-CMH.php

click on Logic6 Steps and then Step 1 to see the lightbox implementation.

I also tried changing post to get in both places in the lightbox js.

Do you have a donation box?

jscheuer1
12-25-2007, 09:43 PM
I see one major problem, there could be others, let's work at this a bit at a time. But, just taking care of this might do the trick. LBGW needs an anchor tag. However, on your imported page (modules/logic6.php), there is none for it to work with. The specific markup you asked me to click on looks like so:


<li class="product-mod-menu-li l6-lbOn" onclick="page.location = '../modules/logic6/step1.php'" onmouseover="if(!this.init){valid = new lightbox(this);this.init=true;};">
<p>Logic Step 1 - Application</p>
</li>

It should be more like:


<li class="product-mod-menu-li l6-lbOn"><p><a
href="../modules/logic6/step1.php'"
onmouseover="if(!this.init){valid = new lightbox(this);this.init=true;};"
>Logic Step 1 - Application</a></p>
</li>

I'm not sure if the red part is doing any harm, it certainly serves no purpose in this particular case unless it happens to actually be part of your stylesheet, and might be confusing to LBGW.

Notice that an anchor link a tag is used to allow LBGW to have the kind of markup it expects to see.

I do take donations to my charities listed in my sig.

santamonica10
12-25-2007, 10:38 PM
I just sent in a donation to the Ocean Conservancy in your name. You help is truly appreciated.

I went ahead and moved everything into an anchor tag and removing the 'l6-lbOn' class from all of the list items.

Still having the same issue with getting stuck on the loading page.

Also, clicking on "step 2" through "step 6" under "logic 6..." is pointing to a non-existent page, however the page does not get stuck on loading, it shows the error page.

Thanks again!

jscheuer1
12-26-2007, 03:19 AM
Nothing has changed on your live example page since my last look at it. 2 through 6 are doing the same thing as 1, loading - no error page.

The Ocean Conservancy and I thank you.

jscheuer1
12-26-2007, 05:38 AM
OK, I've looked into this a bit more and discovered, remembered actually, that doing:


new lightbox(this);

to an anchor link a tag will remove any onclick event it has hard coded, and replace it with:


onclick="return false;"

so it is senseless to have an onclick event hard coded to any anchor link a tag that is intended to be used with LBGW.

I did discover that repeated insertion of LBGW content that initializes via:


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

will fail in IE because all the LBGW added stuff will disappear on reinsertion, but that init property we created will not. So, a better onmouseover would be:


onmouseover="if(!this.onclick)new lightbox(this);"

Now, add this to the fact that you cannot have an existing onclick event, and that you must use an anchor link a tag, and you are left with a rather limited, but effective means to add in content via Ajax for use with LBGW:


<a href="whatever.htm" onmouseover="if(!this.onclick)new lightbox(this);">Link Text</a>

It must be an anchor link a tag with a valid href attribute, and that onmouseover event, and no onclick event.

santamonica10
12-26-2007, 06:58 AM
That was it. Everything is working fine now.

Thanks for all of your help.

Best,

Corey

kannan
02-23-2008, 06:36 AM
Hi,

I am having problem with lightbox.

The lightbox works find when it is written as ordinary. some if i try to write that one using AJAX menas its not working that is the page runs in new page instead of as lightbox content.

testpage.php codings


<a href="modal_wishlist_create.php" class="lbOn">Create New one</a>

And this is main page


<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<script language="javascript">
function getHTTPObject(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlhttp;
}
function disp__(page){
var xmlH=getHTTPObject();
xmlH.open('GET', page, true);
xmlH.onreadystatechange=function() {
if (xmlH.readyState==4)
{
var content = xmlH.responseText;
try{
if(content){
document.getElementById('d').innerHTML=xmlH.responseText;
}
}catch(e){}
}
}
xmlH.send(null)
return false;
}

</script>
</head>
<body>


<?
//$display='block';
include "testpage.php";
$arg="testpage.php";
?>
<br><label id="test1"><? include "testpage.php";?></label>
<label id="d"></label>
<script language="javascript">

disp__('<?=$arg ?>'); //here i call the testpage.php content through AJAX..
document.write('<br><br><label id="test2">');
document.write('- <a href="modal_wishlist_create.php" class="lbOn">Create New one</a>');
document.write('</label>');
</script>


</body>
</html>


please help me...:confused::confused::confused::confused:

jscheuer1
02-23-2008, 07:38 AM
I am having problem with lightbox.

The lightbox works find when it is written as ordinary. some if i try to write that one using AJAX menas its not working that is the page runs in new page instead of as lightbox content.


<a href="modal_wishlist_create.php" class="lbOn">Create New one</a>



<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Are you sure you are using LBGW? In any case, if you import a link via AJAX for use with LBGW, it needs to be like:


<a href="whatever.htm" onmouseover="if(!this.onclick)new lightbox(this);">Link Text</a>