How to load a gallery from another page into a div on my page?

Question

Ok so I am new to jquery.

What I am trying to do is to have multiple galleries in one page. The in another page I have a div and some links. Depending in which link you click on the gallery to be displayed in the div should change.

All my links have different Ids and all my galleries too.

I know there should be a way to do it with Jquery. Can anybody tell me how I can do this.

Thanks :)

Answer 1

You could do tabs for each gallery, and the gallery content is loaded via AJAX. I would recommend checking out: http://jqueryui.com/demos/tabs/#ajax

Answer 2

Assuming the href of each link points to the gallery of interest, you can do something like the following:

$(document).ready(function() {

    // bind to the click event of each link with class 'gallery'
    $("a.gallery").click(function() {

        // load the HTML at the href of the clicked link into a div
        $("#galleryDiv").load($(this).attr("href"));
    });
});

If you only want to load in a portion of the target page, just add the appropriate selector to the URL parameter of load, e.g.:

// only fetch <div id="galleryDiv"> from target page
$("#galleryDiv").load($(this).attr("href") + " #galleryDiv");