Lightbox in Ajax Div

[easinewe]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem:

I am creating a website with a div that loads dynamic data using the above script. I have made a series of php pages which load just fine in the div when clicked.

http://tiny.cc/sXo7t

The problem is that each title loaded in the div has lightbox content. The lightbox is supposed to expand over the page but when in this dynamic div it always loads in a new page instead. Any idea how I could fix this?


If you look at one of the pages loaded separately the lightbox works fine, but not when loaded dynamically in the div.

http://tiny.cc/BvPO9

I appreciate any advice.

[jscheuer1]

Seems to work fine here. What exactly do I have to do to see the problem?

[easinewe]

If you click the link below...

http://tiny.cc/sXo7t

you will see that the dynamic content loads but when you click the cover a lightbox should expand over the existing page rather than loading in a new page. I can't seem to get the javascript to function within the dynamic div

[jscheuer1]

What cover? If I click on:



a lightbox opens. If I click on either of the two other similar but smaller images, a page loads. But as far as I can tell, that's what's supposed to happen. Those links have no lightbox syntax.

However, after playing with it a bit more, I see that if I click on one of the links to the left, and THEN click on the cover, it loads in a new page, not a lightbox.

Here's what I would try, in the Dynamic Ajax Content script replace:

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

with:

function loadpage(page_request, containerid){
	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
		document.getElementById(containerid).innerHTML=page_request.responseText;
		if (typeof myLightbox.updateElementList === 'function'){
			myLightbox.updateElementList();
		}
	}
}

[easinewe]

Thanks very much, that solved it! Works great now.

[jscheuer1]

Great, I just realized looking at that though, if you try to use it on pages without that particular variant of lightbox or one much like it in construction on it, there will be an error. So I'd suggest this refinement (highlighted) to the updated code:

function loadpage(page_request, containerid){
	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
		document.getElementById(containerid).innerHTML=page_request.responseText;
		if (typeof myLightbox !== 'undefined' && typeof myLightbox.updateElementList === 'function'){
			myLightbox.updateElementList();
		}
	}
}

That way the AJAX script may be made external and be used on pages with or without that lightbox script on it.