0

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.

Edited by MissMolly

1
Contributor
1
Reply
16
Views
3 Years
Discussion Span
Last Post by MissMolly
0
$(".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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.