Question

I am currently coding a gallery which until now has been combining AJAX and Javascript with an xml-file to load all images. Now I have come to the fun part where I click an image to enter the inner gallery. (On the first page they load one image of each session and when one image is pressed it will continue to the rest of the images of that session.)

The problem that I have with AJAX (I’m sure there is a neat hack for this as well!) is that when the page is reloaded it automatic goes back to the session index since there is no URL-change.

What I have done now, so far is to put one javascript-function in one document where it loads only the gallery index. This works flawless.

In the other file I got just about the same code, but instead it loads the function that loads the rest of the session-images, but I don’t get it to work.

Here is the script that should load the specific session-images.

<script type="text/javascript">
    window.onload = displayGallery(<?php echo $_GET['session']; ?>);
</script>

<div id="gallery">

</div>

When I just only javascript and an “onload” in the link it worked just fine, but then I had the problem to reload the page. Now I just php to include this file and $_GET the variable for “displayGallery()”

function displayGallery(sessionAtt)

So in an attempt to make this clear, I’m rubbish explaining stuff, I need help with making the displayGallery(sessionAtt) actually run after grabbing the essential variable from the url.

I am VERY fresh on Javascript. Done most scripts in php up until now.

EDIT:

To explain the site a bit: It’s a gallery I’m making for a friend of mine. There is no login for anyone else but her and all sub-pages (Start, Gallery, About, etc.) is loaded through php “include”.

The XML:

<gallery>
    <session>
        <sessionName>Beauty</sessionName>
        <path>gallery/beauty/</path>
        <item>
            <file>_DSC2331.jpg</file>
            <name>Picture 1</name>
        </item>
        <item>
            <file>_DSC2339.jpg</file>
            <name>Picture 2</name>
        </item>
        <item>
            <file>_DSC2350.jpg</file>
            <name>Picture 3</name>
        </item>
        <date>2011-08-03</date>
    </session>
    <session>
        <sessionName>Red</sessionName>
        <path>gallery/red/</path>
        <item>
            <file>_MG_6227-web.jpg</file>
            <name>Picture 1</name>
        </item>
        <item>
            <file>_MG_6235-web.jpg</file>
            <name>Picture 2</name>
        </item>
        <item>
            <file>_MG_6240-cropped-web.jpg</file>
            <name>Picture 3</name>
        </item>
        <date>2011-08-03</date>
    </session>
</gallery>

The js:

function displayGallery(sessionAtt)
{
    var xmlDoc = loadDoc("gallery/gallery.xml");
    var sessions = xmlDoc.getElementsByTagName("session");
    var txt = getGallery(sessions, sessionAtt);
    document.getElementById("gallery").innerHTML = txt;
}

function getGallery(sessions, sessionAtt) {
    var items = null,
    i = 0,
    j = 0,
    sessionName = "",
    link = "",
    img = "",
    path = "",
    file = "",
    txt = "";
    for (i = 0; i < sessions.length; i++) { 
        sessionName = sessions[i].getElementsByTagName("sessionName")[0].childNodes[0].nodeValue;
        if(sessionName == sessionAtt)
        {
            items = sessions[i].getElementsByTagName("item");
            path = sessions[i].getElementsByTagName("path")[0].childNodes[0].nodeValue;
            for (j = 0; j < items.length; j++) {
                file = items[j].getElementsByTagName("file")[0].childNodes[0].nodeValue;
                link = '<a href="' + path + file + '" rel="lightbox[' + sessionName + ']" title="' + sessionName + '">';
                img = '<img src="' + path + file + '" class="thumb" onclick="displayImage();" /></a>';
                txt += link + img;
            }
        }
    }
    return txt;
}

I have tried to run the script with sessionAtt set in the function and it works.

window.onload = displayGallery;

But when changing it to

window.onload = displayGallery('Red');

both manually and with php… Nothing.

Answer 1

Your code is working fine for me. The only thing I did differently is I used <body onload="displayGallery('Red')"> rather than window.onload = displayGallery('Red');

As Martin pointed out, using window.onload tries to find <div id='gallery'> before the page is loaded, giving an error: document.getElementById(“gallery”) is null

Using <body onload="displayGallery('Red')"> waits for the page to finish loading before calling displayGallery.