PDA

View Full Version : loading lightbox from within Ajax



snooper
10-13-2007, 07:19 PM
1) Script Title: Lightbox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/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/pictures/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
10-13-2007, 09:29 PM
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
10-13-2007, 11:38 PM
you mean for esch image link i should add this?

Thanks!

jscheuer1
10-14-2007, 05:59 AM
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
10-14-2007, 07:02 AM
excellent - thanks!

cantfink
12-07-2007, 11:41 AM
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! :D

jscheuer1
12-07-2007, 11:51 AM
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
12-14-2007, 09:02 PM
Thank you for this post, the solution is just what I needed!!

koolkedar
04-09-2012, 01:09 PM
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
04-09-2012, 04:05 PM
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.