Lightbox on images loaded using Ajax?

[blizeH]

Hi,

I'm currently using Litebox (http://www.doknowevil.net/litebox/)on a few pages of my site, called in via a Javascript if statement, checking if the item 'profilepic' is on the page:


function checklightbox() {
if(document.getElementById('profilepic')) { initLightbox(); }
}

This is fine, except on one of the pages there's a list of links that'll change the picture that's displayed, so as soon as you click the link, and the ajax calls in the new picture, the Litebox script doesn't work at all, as if it isn't initialised on that page, and Firebug says:


myLightbox is not defined
[Break on this error] anchor.onclick = function () {myLightbox.start(this); return false;}

Any help or advice on how to get this working would be fantastic.

Cheers

[jscheuer1]

First off, the litebox script and its resources files should be on the top page. And you should initialize lightbox onload once, just as you would with a normal non-AJAX page. Now on your page that is imported via AJAX, with the new lightbox links on it, make them all look like so:


<a href="some.jpg" rel="lightbox" onclick="myLightbox.start(this);return false;">

This works well with the original lightbox, and from looking at the script for litebox, should work fine for it too. You don't want repeated initializations of lightbox anyway. In some browsers this will mess up the lightbox display or cause other problems.

[blizeH]

Many thanks for the reply, I've currently got the Litebox files included at the top of the page, and then this further down:


<a onclick="myLightbox.start(this);return false;" rel="lightbox[emp]" href="../users/010000P.JPG"><img id="profilepic" src="../users/010000P.JPG"/></a>

<script type="text/javascript">initLightbox();</script>
For some reason it still isn't working, and it's bringing up the exact same error as earlier :(

[jscheuer1]

According to the litebox instructions, you should only initLightbox(); once, in the body tag's onload event. If you want more help:

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

Explain all of what I must do, and in what browser, to duplicate the problem.

[blizeH]

Many thanks for the reply, unfortunately it just doesn't seem to initialise properly. I tried slimbox, and that didn't work either, but the code to do it manually worked a treat when I used onclick with the image. Only drawback is that it doesn't work without Javascript, but in all honesty, the entire page is shoddily built and won't work without Javascript anyway, so it shouldn't matter too much :D

Thanks again for your help John, really appreciate it.