Add Close, Next, Previous To Function

[MissMolly]

I have this script which is calling 10 divs indavidually from an external file.

HTML:

<a id="load1" href="#" data-id="1" class="load">
    <img>
</a>

<a id="load2" href="#" data-id="2" class="load">
    <img>
</a>

Javascript:

$(".load").click(function () {
    $("#projects").html("");
    $("#loading").show();
    $("#projects").load("projects.html #"+$(this).data('id'), function () {
        $("#loading").hide()
    })
})

If load1 is clicked, it loads div1 from projects.html. If load2 is clicked, loads div2 etc... It works great but I'm wanting to add three buttons.

• Next Project - loads the next div in projects.html (if you're viewing project1 and click 'next project', it will load project2).
• Previous Project - Loads the previous div in projects.html.
• Close - Closes whatever project your're on.

So I'm guessing the markup would look something like this:

<a id="load1" href="#" data-id="1" class="load">
    <img>
</a>

<a id="load2" href="#" data-id="2" class="load">
    <img>
</a>

<div>
    <p class="next">Next Project</p>
    <p class="close">Close</p>
    <p class="previous">Previous Project</p>
</div>

Just wondering how to link them all up with the function I have already.

[MissMolly]

$(".exit").click(function () {
    $("#projects").hide();
})

Just wanted to point out I did try this to close the projects, and although it does work you then can't view any more projects after you've exit.