Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Lightbox2+Dynamic Ajax content

  1. #1
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Lightbox2+Dynamic Ajax content

    1) Script Title: Lytebox2 && Dynamic Ajax content

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

    3) Describe problem:
    I tried loading the lytebox veiwer with the ajax routine's "loadobjs" function, but the loading div goes blank, and if the windows is resided it also goes blank.
    thumbnails are briefly shown before the window goes blank.

    happens in FF2, K-Melon, loads but lightbox doesn't function in Opera and IE7.

    heres the link to load the veiwer.
    <a href="javascript:ajaxpage('album.html', 'contentarea');loadobjs('js/prototype.js','js/scriptaculous.js?load=effects','js/lightbox.js')">Photo Album</a>

    Only just started playing around with javascript, dunno what the problem would be.

    DEMO AT: http;//www.freewebs.com/boxxertrumps
    i also noticed that a strange FWThumbnails directory showed up after i ran the script... most likely pure coincidence... but if it helps...
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  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

    That's not what loadobjs() is for. It loads scripts and/or css once and only once onto the page if they are not already there. It does not initialize imported content to scripts.

    Locally, once the scripts and css are loaded to the 'top' page (which you could do from the outset just by placing them on the 'top' page as would normally be done without Ajax content), you could just add an onmouseup event to your link:

    Code:
    <a href="javascript:ajaxpage('album.html', 'contentarea');" onmouseup="initLightbox();">Photo Album</a>
    However, with a live page, there is no way of knowing if the content is available to be initialized that soon or not, probably not. That's where:

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

    comes in.
    - John
    ________________________

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

  3. #3
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Ive set up the scripts to load with the rest of the document, but lightbox doesn't function at all.

    http://www.freewebs.com/boxxertrumps/indexv2.html
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  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

    I don't see any attempt on your page to determine when the added content is available nor any attempt to initialize it to lightbox.
    - John
    ________________________

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

  5. #5
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    <?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "XHTML1-f.dtd">
    <html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" ><head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>BoxxerTrumps</title><link rel="stylesheet" type="text/css" href="css.css" />
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>


    so when you open indexv2.html the scripts are already there, and when you chose photo album from the drop down menu you see the gallery, but when you click on the thumbnails the lightbox script doesn't kick in. it just loads the picture like a new document.
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

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

    Have you even looked at this yet:

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

    ?
    - John
    ________________________

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

  7. #7
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    yes i did, thats why i hard coded the scripts into the top of the page, and lightbox doesn't need any specific initialization...
    (Section "practices" B/1)
    and i already read the page...

    so unless im terribly misunderstanding you, i think it should work.
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

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

    No, that's OK, I guess you weren't really paying real close attention:

    Quote Originally Posted by jscheuer1 View Post
    Locally, once the scripts and css are loaded to the 'top' page (which you could do from the outset just by placing them on the 'top' page as would normally be done without Ajax content), you could just add an onmouseup event to your link:

    Code:
    <a href="javascript:ajaxpage('album.html', 'contentarea');" onmouseup="initLightbox();">Photo Album</a>
    However, with a live page, there is no way of knowing if the content is available to be initialized that soon or not, probably not. That's where:

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

    comes in.
    A script can have an initialization without it being readily apparent (it is at the end of the lightbox.js file though hard to tell, I suppose). In the above quoted section I thought I had made clear what lightbox required to initialize but, I admit it was subtle. Also, the above is not a solution for a live page.

    For a live page you will need to set up the poll function, the polled for element(s) and add the events to use them to your link(s) as described in:

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

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

  9. #9
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    I'll have to admit to you, I Fail Hard.
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  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

    I just had a brainstorm. Keep the external scripts as we have them on the 'top' page (indexv2.html). Forget about the polling function and the polled for id etc. Here is a simpler method that should work. For your link that loads the album have this:

    Code:
    <a href="javascript:ajaxpage('album.html', 'contentarea');" onmousedown="window.albumInit=false;">Photo Album</a>
    Then, on the external album page (album.html), have each lightbox link include this event:

    Code:
    onmouseover="if(!window.albumInit){initLightbox();window.albumInit=true;};"
    Example:

    Code:
    <a href="http://i119.photobucket.com/albums/o141/boxxertrumps/fall.png" rel="lightbox" title="Caution: Falling HTML Tags" onmouseover="if(!window.albumInit){initLightbox();window.albumInit=true;};">
    <img src="http://s119.photobucket.com/albums/o141/boxxertrumps/th_fall.png" /></a>
    - 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
  •