Results 1 to 10 of 10

Thread: loading lightbox from within Ajax

  1. #1
    Join Date
    Jan 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation loading lightbox from within Ajax

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    you mean for esch image link i should add this?

    Thanks!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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'.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    excellent - thanks!

  6. #6
    Join Date
    Dec 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wink Sollution Found

    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!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for this post, the solution is just what I needed!!
    Last edited by Robin_TWD; 12-14-2007 at 09:23 PM.

  9. #9
    Join Date
    Apr 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default lightbox now working after ajax loading....

    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
    Code:
    "<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...

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by koolkedar View Post
    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
    Code:
    "<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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •