loading lightbox from within Ajax

[snooper]

1) Script Title: Lightbox

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

3) Describe problem:

Hey folks

i am using the above lightbox from with dynamically loaded tabs. when i load the page manually (eg: http://www.torahmitzion.org/dinner/pictures/3.html) the lightbox fires correctly.
but when i try get to it from the parent page (http://www.torahmitzion.org/dinner/p...s/default2.asp - see tab 3, 4 or 5) - it does NOT - even though i have added the relevant scripts there as well

any ideas?

Thanks!

[jscheuer1]

Because you are loading in HTML content to the page after lightbox has initialized, you need to hard code the onclick function to your links on the external pages. For example, wherever you have something like this:

<a href="/images/Dinner/pic550/1024.jpg" rel="lightbox[TMT Dinner]"><img src="/images/Dinner/pic200/1024.jpg"  border="0"></a>

Make it look like so:

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

[snooper]

you mean for esch image link i should add this?

Thanks!

[jscheuer1]

Yes. Use a text only editor with search and replace:

search:

rel="light

replace with:

onclick="myLightbox.start(this); return false;" rel="light

Then hit 'replace all'.

[snooper]

excellent - thanks!

[cantfink]

Excellent, this sorts out the problem straight off, I knew it needed to be reloaded just was not sure how!

Seems to be the only 'working' solution on the net!

[jscheuer1]

Technically (even non-technically) speaking, this is not a reload, rather a sort of preloading. 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. However, if we actually reloaded lightbox, that would create additional lightbox markup for holding the larger image, controls, etc. If we were to do that, it would actually mess things up in many browsers.

We can even do it this way simply by virtue of how lightbox itself currently works. That could change in later versions though. If it does, another workaround method for using lightbox with Ajax would need to be devised.

[Robin_TWD]

Thank you for this post, the solution is just what I needed!!

[koolkedar]

Hi jscheuer1's
After lot of search i found out this forum, which describe my problem correctly but when i tried to solution means by putting

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

even for lightbox still its not working....i m not getting how to solve that problem...please tel me what should be probable answer....
thanking you in advance...

[jscheuer1]

Hi jscheuer1's
After lot of search i found out this forum, which describe my problem correctly but when i tried to solution means by putting

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

even for lightbox still its not working....i m not getting how to solve that problem...please tel me what should be probable answer....
thanking you in advance...

This is an old thread and there are now many more versions of Lightbox and more potential pitfalls associated with their use.

If you want more help, please start a new thread and give us a link to your problem page.