Ajax + lightbox

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):

Code:

---

<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.

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

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.

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:

Code:

---

<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:

Code:

---

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

---

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.

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.

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.

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:

HTML Code:

---

<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):

Code:

---

<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:

HTML Code:

---

<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.

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

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

Code:

---

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

---

Add below it like so:

Code:

---

<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:

HTML Code:

---

<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.

<3

No more needs to be said :)

i had to bring this one back from the dead, im using the tabs ajax script here

http://www.dynamicdrive.com/dynamici...tent/index.htm

and my external file for instance test.htm has an image with rel="lightbox" but this wont work inside my dynamic content !

ive tried copying some actions from here but its not even loading my test.htm into the tab now.

if some one cares to have a look here , yee shall see !

http://www.mediapixel.co.uk/portfolio.htm

try clicking "the problem tab" also please refer to my source code to see how im trying to get it working, any help is much appriciated.

This is a little silly because, the ajaxtab script is not executing, even without your call to:

pollContent('1');

Start over. Get ajaxtab and lightbox working on the same page first. Once you have that much working, or are having a problem doing so, get back to us. Forget about (for the time being) having lightbox work on content loaded by ajaxtabs.

Quote:

---

Originally Posted by jscheuer1

This is a little silly because, the ajaxtab script is not executing, even without your call to:

pollContent('1');

Start over. Get ajaxtab and lightbox working on the same page first. Once you have that much working, or are having a problem doing so, get back to us. Forget about (for the time being) having lightbox work on content loaded by ajaxtabs.

---

my other tabs do work , i just havnt made external pages yet , thats why it constantly says refreshing content :D sorry , i can understand how that migh of seemed confusing ! lightbox works on that page and so does the ajax tabs, its just the tab with PROBLEM TAB which im trying to call the test.htm file with lightbox content..

thanks.

OK, then what does your pollContent() function look like? Where is it? What is '1'?

Quote:

---

Originally Posted by jscheuer1

OK, then what does your pollContent() function look like? Where is it? What is '1'?

---

i just copied your code from above !

and put this in my header

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

i didnt have a clue, so i tried it and it didnt work :o

ill edit the page so you can see my dynamic page in that tab that ive tried modifying . 1 sec


i have removed all other tabs to avoid confusion ! you can see the external file loads sussecfully because when you do the stylesheet changes text size slightly

but the picture using rel tag just opens in new window and not lightbox

Your test.htm should look like so:

HTML Code:

---

<html>
<head>
<title>h</title>

</head>
<body>


<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
<span id="test1"></span>


</body>
</html>

---

and your call like so:

<li><a href="javascript:ajaxpage('test.htm', 'ajaxcontentarea');pollContent('test1');">THE PROBLEM TAB</a></li>

i have made changes accordingly but still no joy you can see the page here

http://www.mediapixel.co.uk/portfolio.htm

the external tab works as normal but problem tab still doesnt !

ie gives the javascript error "ParentNode is null or not an object"

Take this off of test.htm:

Code:

---

<link rel="stylesheet" href="lightbox2.css" type="text/css" media="screen" />
        <script src="j/prototype.js" type="text/javascript"></script>
        <script src="j/scriptaculous.js?load=effects" type="text/javascript"></script>
        <script src="j/lightbox.js" type="text/javascript"></script>

        <style type="text/css">
                body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;        }
        </style>

---

There may be other problems.

Quote:

---

Originally Posted by jscheuer1

Take this off of test.htm:

Code:

---

<link rel="stylesheet" href="lightbox2.css" type="text/css" media="screen" />
        <script src="j/prototype.js" type="text/javascript"></script>
        <script src="j/scriptaculous.js?load=effects" type="text/javascript"></script>
        <script src="j/lightbox.js" type="text/javascript"></script>

        <style type="text/css">
                body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;        }
        </style>

---

There may be other problems.

---

i removed that but the page wont load into the ajaxcontentarea using this line

<li><a href="javascript:ajaxpage('test.htm', 'ajaxcontentarea');pollContent('test1');">THE PROBLEM TAB</a></li>

:confused:

I see now. This is different than what we had earlier in this thread because this AJAX script rewrites the link's attributes. You could probably get away with something like so:

HTML Code:

---

<li><a href="test.htm" rel="ajaxcontentarea"><span onclick="pollContent('test1');">External content</span></a></li>

---

But, more work may be needed.

Quote:

---

Originally Posted by jscheuer1

I see now. This is different than what we had earlier in this thread because this AJAX script rewrites the link's attributes. You could probably get away with something like so:

HTML Code:

---

<li><a href="test.htm" rel="ajaxcontentarea"><span onclick="pollContent('test1');">External content</span></a></li>

---

But, more work may be needed.

---

i could kisss you ! BUT that problem where occurs when you return to the tab a second time it doesnt execute

first time loads ok upon return it just opens in new window :(

http://www.mediapixel.co.uk/portfolio.htm

external content 2 tab ^^^

I see why that is happening, it is similar to a problem we had with the other AJAX script. If you go back to internal and then to external, it will work. The problem only arises when you are replacing the external with the same external. To fix that we need to prevent our poll from firing too soon when identical content is loaded, try changing the pollContent() function like so:

Code:

---

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

---

That should take care of it.

Added:

In case you don't already known, you have to use a different (unique) id for each external page's test span, especially not one in use on the 'top' page. With the above change to pollContent, we probably could get away with the same test span id for all external content pages but, best to be on the safe side.

Quote:

---

Originally Posted by jscheuer1

I see why that is happening, it is similar to a problem we had with the other AJAX script. If you go back to internal and then to external, it will work. The problem only arises when you are replacing the external with the same external. To fix that we need to prevent our poll from firing too soon when identical content is loaded, try changing the pollContent() function like so:

Code:

---

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

---

That should take care of it.

Added:

In case you don't already known, you have to use a different (unique) id for each external page's test span, especially not one in use on the 'top' page. With the above change to pollContent, we probably could get away with the same test span id for all external content pages but, best to be on the safe side.

---

works like a dream, i cant thank you enough, have a good weekend :cool:

hi,

i think i'm having the same problem as waynep. when i followed the instructions you have him, it opens a new page instead of running through the ajax script. can you look at it and tell me what i did wrong please?

66mott.com and then click on gallery.

thanks,

Works here.

hi John,

it works now because i bypassed it by pointing gallery to the index.php page. i noticed that the only page capable of playing the lightbox is the index.php page so i had to do that in the meantime. i'll change it back to linking gallery to its own gallery.html page and you will see the problem.

thanks!

here is the ajax code i have currently.
<script type="text/javascript">
function pollContent(id){
if(document.getElementById(id)){
initLightbox();
document.getElementById(id).id="";
}
else
setTimeout("pollContent('"+id+"')", 60)
}
</script>

<li><a href="javascript:ajaxpage('../menufolder/gallery.html', 'contentarea');">Gallery</a></li>
<li><a href="javascript:ajaxpage('../menufolder/press.html', 'contentarea');">Press Review</a></li>
</ul>


i tried changing it to the following like how you advised waynep.


<li><a href="test.htm" rel="ajaxcontentarea"><span onclick="pollContent('test1');">External content</span></a></li>

but this still doesnt work.

This thread was one of several developmental threads. A more complete how to and why is found here:

http://www.dynamicdrive.com/forums/s...ad.php?t=13003

hi John,

after reading the development thread, i still can't figure out how to resolve the problem. when i click on an link to an image, it still shows up on a new page. i cant get lightbox to work on it. is there some changes that i need to make on it?

thanks,

Quote:

---

Originally Posted by willymonster

hi John,

after reading the development thread, i still can't figure out how to resolve the problem. when i click on an link to an image, it still shows up on a new page. i cant get lightbox to work on it. is there some changes that i need to make on it?

thanks,

---

I'm confused. What did you read and what did you do? To sort it out with any hope of certainty, I would need a link to your pages that are having the problem.

hi John,

sorry for the confusion. here's what i am having problems with. ajax menu bar + lightbox. on the site, www.66mott.com - when you click on gallery and click any of the image links, instead on initiating the lightbox feature, it loads the picture on a new page. i noticed that the lightbox feature only works on the index page, maybe because of the ajax menu bar i am using.

here is an example of 2 links on how it looks like on my index.php page:

('../menufolder/gallery.html', 'contentarea');">Gallery</a></li>
<li><a href="javascript:ajaxpage[/COLOR]('../menufolder/press.html', 'contentarea');">Press Review</a></li>


i created a gallery.html page to put the lightbox feature in it, but when i click it, it opens the picture on a new page WITHOUT activating the lightbox feature.



here is what the information i have on my gallery.html page.

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


<script type="text/javascript" src="../root/js/prototype.js"></script>
<script type="text/javascript" src="../root/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../root/js/lightbox.js"></script>

this is to activate the lightbox. i hope this helps.
thanks,

This stuff on your gallery.html is useless, get rid of it:

Code:

---

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

<link type="text/css" rel="stylesheet" href="../index.php"/>
<script type="text/javascript" src="../root/js/prototype.js"></script>
<script type="text/javascript" src="../root/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../root/js/lightbox.js"></script>
<link rel="stylesheet" href="../root/css/lightbox.css" type="text/css" media="screen" />

---

You also need an element on gallery.html - at the end of gallery.html - with a unique id like so:

HTML Code:

---

<a href="../images/01.jpg" rel="lightbox[roadtrip]">Start</a>
<a href="../images/02.jpg" rel="lightbox[roadtrip]">image2</a>
<a href="../images/05.jpg" rel="lightbox[roadtrip]">image3</a>

<span id="unique1"></span>

</body>
</html>

---

That polling function looks OK for use with lightbox but, it belongs on the 'top' page, I believe that is your index.php page. It could do with a little error checking though:

Code:

---

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

---

Also on that page use this:

Code:

---

<li><a href="javascript:ajaxpage('../menufolder/gallery.html', 'contentarea');" onmousedown="pollContent('unique1');">Gallery</a></li>

---

Hi!

I have a question about ajax script.
On this page: http://kensai.php1h.com/test/ajaxtabscontent/demo.htm i have put a ajax script, and when for example i click on dog in ajax script it is bringing a external2.htm page. And there i have a thumbnail picture of dog and when i click on it, it is needed to open with lightbox 2.0 script, but when i click on this thumbnail it will only open picture on a white background without lightbox script effect.

But when i go here to the external2.html page at: http://kensai.php1h.com/test/ajaxtab.../external2.htm and try to click on a picture it is opened with a lightbox srcipt.

I relly dont know how to solve this problem.

Quote:

---

Originally Posted by Kensai_1

Hi!

I have a question about ajax script.
On this page: http://kensai.php1h.com/test/ajaxtabscontent/demo.htm i have put a ajax script, and when for example i click on dog in ajax script it is bringing a external2.htm page. And there i have a thumbnail picture of dog and when i click on it, it is needed to open with lightbox 2.0 script, but when i click on this thumbnail it will only open picture on a white background without lightbox script effect.

But when i go here to the external2.html page at: http://kensai.php1h.com/test/ajaxtab.../external2.htm and try to click on a picture it is opened with a lightbox srcipt.

I relly dont know how to solve this problem.

---

Try reading all of the above posts in this thread.