SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Javascript Lightbox problem

    hi guys!

    i used this lightbox from this url for my project.. http://www.huddletogether.com/projects/lightbox2/ Its working if i used it normally. But I'm trying to apply it to a search pop-up i did.

    on the first launch, the div is empty. now after the search, only the div will refresh (a bit of basic ajax in there) and the result will appear. each row has a small button on the far right where when clicked, should activate the lightbox, but it doesn't work(it opens the image on a new page). But since it works on normal pages, it must have something to do with loading the javascript for the lightbox, or initializing. I tried asking for help on their site, but it has been a week, and i need this really soon.

    how will i make this code work? please help..
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Lightbox is setup to initialise all links with rel="lightbox" on page load. This is when it initialises and setups the listeners.

    I think you can rerun this initialisation by calling the updateImageList() function after you've finished updating your code in in the page.

  3. #3
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Code:
    function search_images() {		
       resultbox.innerHTML = '<div style="margin-top:60px;"><center><img src="img/load.gif" /></center></div>';
    	
       http.open('post', 'ajax_script.php?action=search_image&where='+search_form.where.value+'&field='+search_form.field.value+'&name='+search_form.name.value+'&original_name='+search_form.original_name.value+'&pagename='+search_form.pagename.value);
       http.onreadystatechange = handleResponse;
       http.send(null);
       updateImageList();
    }
    function handleResponse() {
    	if(http.readyState==4 && http.status==200){
    		var data = http.responseText;
    		var container = new Array();
    		
    		container = data.split('`');
    		document.getElementById(container[0]).innerHTML = container[1];
        }
    }
    this is what i have for my javascript. I inserted your code after the http request thing, but it doesn't work. Maybe you can take a quick look at the code.

    thanks!
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hello,

    You have it in the wrong spot.
    You have it directly after you make the request - you need to wait for the response, and wait for the DOM to be updated with the content before you call the function.

    Try it at the end of the handleResponse() function.

  5. #5
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Code:
    function handleResponse() {
    	if(http.readyState==4 && http.status==200){
    		var data = http.responseText;
    		var container = new Array();
    		
    		container = data.split('`');
    		document.getElementById(container[0]).innerHTML = container[1];
        }
    	
       alert("hey");
       updateImageList();
    }
    it doesn't work. notice i place an alert code? when i place it there before the updateImageList(), it alerts, but if I place it after updateImageList, it doesnt. meaning it doesnt know the function.. i have my ajax scripts at ajax.js and the lightbox js at lightbox.js. would that help?
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Try Lightbox.prototype.updateImageList(); I'm not sure about prototype classes like they have used..

  7. #7
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi!

    what happened was the greying of the parent page started, but the image didn't appear. but im sure i gave them the rel="lightbox" property, coz when i right click the button/image the property box says so..

    if its doesn't work with all this effort, ill just refresh the whole page..forget ajax.. but thanks for your help!
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.


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
  •