Ajax + lightbox

[Spafe]

1) Script Title: Dynamic Ajax Content and Lightbox v2

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...jaxcontent.htm
http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:

My problem is that when I use the Ajax content script - even with the 'loadobjs' function - any <img rel="lightbox" /> in the external file won't display the lightbox :x

I have edited the HTML code slightly on the mainpage to look like something like this (for multiple onclick effects that don't seem to work together):

<a href="#" onclick="blablablabla" onmouseup="ajaxpage('test.htm', 'contentarea');">test</a>
<div id="contentarea"></div>

And the external file is simple HTML.

I was wondering - how can I make it so that it is possible to make the lightbox work when the external file is displayed on the page.

[jr_yeo]

can u provide us with a link to ur problematic page? tnx

[Spafe]

Well. The server I would use has (conveniently ¬.¬) gone down. But here's a RAR file with a much simpler version of what I want to do (with the original ferrari content ^_^).

http://www.megaupload.com/?d=W2KDMKV8

The image that is showing on load is part of index.htm. The image inside the 'blinding' div is essentially the same but doesn't work.

I have tried the loadobjs function before but to no avail.

Basically. When the div scrolls down I want to be able to show the content of the external file with the lightbox working. At the moment all that happens is it goes to a new page without any cool lightbox effects.

[jscheuer1]

I can't seem to get your example file by clicking that link. I see it listed but, if I click on the listing, nothing happens. Anyways, lightbox needs to init its content after it it is parsed by the browser. With the ordinary setup for lightox, this is done onload but, with ajax added content, it would have to be done after the ajax content is loaded. The loadobjs() function isn't designed for this, so, what you could do is set up a polling function and have it run at the same time as the ajax content is loaded. Something like:

<a href="javascript:ajaxpage('test.htm', 'contentarea');pollContent('someID');">test</a>

Where someID is the unique id of an element in the loaded content after all of the rel="lightbox" stuff in the loaded content. You would need to have a function like this on or linked to the top page:

function pollContent(id){
if(document.getElementById(id))
initLightbox();
else
setTimeout("pollContent('"+id+"')", 1000)
}

[Spafe]

Wow. Thank you very much!

It's working very nicely now. I have a question though:

The script you suggested didn't work in firefox, so I set the timeout to 1 instead of 1000 which seemed to fix it. Will this have any drastic effects on anything else or do anything weird generally?

Also. With the megaupload thing you had to put in some 3 letter code at the top right. Then it should start a countdown to let you download. Oh well, no need to now. Thanks again.

[jscheuer1]

I'm not sure why it won't work in FF with the 1000 millisecond poll. It should, and I've just tested the general principal and it does. Setting that value to 1 millisecond only increases the frequency of the polling. All that should do is speed up recognition and initialization of the new content. For a short poll this is fine but, if the browser has problems loading the new content, polling every millisecond could cause some computers to bog down or even to lock up.

What exactly happens in FF if you leave the frequency at 1000 milliseconds? It should still work. Locally there should only be a 1 second delay before initialization, live it could be a little longer.

[jscheuer1]

So I got your demo and the problem is that you are doing more than loading in an ajaxpage and you are (potentially) repeatedly loading in the same ajaxpage. More work is needed to get this to go smoothly, I'll get back to you.

[jscheuer1]

OK, the problem arises if you replace the same ajaxpage with itself. What happens then is that the polled for element exists but, is then later replaced by itself. Each time lightbox type content is replaced or changed, lightbox needs to init. So, the first time everything works. The second time, since the polled for content is there from before, lightbox inits on the existing ajaxpage content, then said content is replaced by itself but, since the poll is already finished, lightbox does not init again. I found two workable solutions but will only show the more economical (from the point of view of the work the browser has to do). I used this on your external2.htm to be the polled for element:

<p id="poll1">The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari. 
  The name, which mea . . .

I added this script to the head of the 'top' page (index.htm in your example):

<script type="text/javascript">
function pollContent(id){
if(document.getElementById(id))
initLightbox();
else
setTimeout("pollContent('"+id+"')", 1000)
}
</script>

and altered your trigger events to look like so:

<a href="#" onclick="Effect.toggle('d2','BLIND'); return false;" onmouseup="if(!document.getElementById('poll1')){ajaxpage('ajaxfiles/external2.htm', 'test');pollContent('poll1');};">Toggle blind</a>

This way, the ajaxpage is only loaded and polled for if it isn't already a part of the 'top' page. If it is already there, it is already available and initialized.

[Spafe]

Looks Good.

PS. The previous script DID work, it was me just being dumb. I was clicking the image too quickly and not allowing for the 1 second 'timeout'.

However, if this is optimized and better I can't see why I shouldn't use this version.

Just one last thing. The anchor with the trigger events is rather long. Is there any way this can be put into the head / linked .js file so that there doesn't have to be such a huge chunk of html each time I want to load an eternal page?

If there is but involves lots of work, you don't have to since i've already asked a lot of you anyway, if not I would grateful. Thanks once again.

I wish I had all your knowledge on all this :x

[jscheuer1]

You can simplify it somewhat by using a front-end function. So where we had:

<script type="text/javascript">
function pollContent(id){
if(document.getElementById(id))
initLightbox();
else
setTimeout("pollContent('"+id+"')", 1000)
}
</script>

Add below it like so:

<script type="text/javascript">
function pollContent(id){
if(document.getElementById(id))
initLightbox();
else
setTimeout("pollContent('"+id+"')", 1000)
}

function polJax(url, containerid, pollid){
if(!document.getElementById(pollid)){
ajaxpage(url, containerid);
pollContent(pollid);
}
}
</script>

Now your events can look like so:

<a href="#" onclick="Effect.toggle('d2','BLIND'); return false;" onmouseup="polJax('ajaxfiles/external2.htm', 'test', 'poll1');">Toggle blind</a>

Added: Since you say that the 1 second delay seems too long, you can change the 1000 value to 60. 60 milliseconds is pretty quick but, as a poll, shouldn't give many, if any, computers problems like a 1 millisecond poll could.