Results 1 to 6 of 6

Thread: Lightbox in Ajax Div

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

    Default Lightbox in Ajax Div

    1) Script Title: Dynamic Ajax Content

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

    3) Describe problem:

    I am creating a website with a div that loads dynamic data using the above script. I have made a series of php pages which load just fine in the div when clicked.

    http://tiny.cc/sXo7t

    The problem is that each title loaded in the div has lightbox content. The lightbox is supposed to expand over the page but when in this dynamic div it always loads in a new page instead. Any idea how I could fix this?


    If you look at one of the pages loaded separately the lightbox works fine, but not when loaded dynamically in the div.

    http://tiny.cc/BvPO9

    I appreciate any advice.

  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

    Seems to work fine here. What exactly do I have to do to see the problem?
    - John
    ________________________

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

  3. #3
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    If you click the link below...

    http://tiny.cc/sXo7t

    you will see that the dynamic content loads but when you click the cover a lightbox should expand over the existing page rather than loading in a new page. I can't seem to get the javascript to function within the dynamic div

  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

    What cover? If I click on:



    a lightbox opens. If I click on either of the two other similar but smaller images, a page loads. But as far as I can tell, that's what's supposed to happen. Those links have no lightbox syntax.

    However, after playing with it a bit more, I see that if I click on one of the links to the left, and THEN click on the cover, it loads in a new page, not a lightbox.

    Here's what I would try, in the Dynamic Ajax Content script replace:

    Code:
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }
    with:

    Code:
    function loadpage(page_request, containerid){
    	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
    		document.getElementById(containerid).innerHTML=page_request.responseText;
    		if (typeof myLightbox.updateElementList === 'function'){
    			myLightbox.updateElementList();
    		}
    	}
    }
    - John
    ________________________

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

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    easinewe (03-15-2010)

  6. #5
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks very much, that solved it! Works great now.

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

    Great, I just realized looking at that though, if you try to use it on pages without that particular variant of lightbox or one much like it in construction on it, there will be an error. So I'd suggest this refinement (highlighted) to the updated code:

    Code:
    function loadpage(page_request, containerid){
    	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
    		document.getElementById(containerid).innerHTML=page_request.responseText;
    		if (typeof myLightbox !== 'undefined' && typeof myLightbox.updateElementList === 'function'){
    			myLightbox.updateElementList();
    		}
    	}
    }
    That way the AJAX script may be made external and be used on pages with or without that lightbox script on it.
    - 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
  •