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

Question

So I'm new to jquery.

I am trying to make several galleries on one page. On another page, I have a div and some links. Depending on which link you click on the gallery, which will be displayed in the div, it should change.

All my links have different identifiers and all my galleries.

I know there must be a way to do this using jQuery. Can someone tell me how I can do this.

Thank:)

Answer 1

Assuming the href of each link points to a 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"));
    });
});

, URL load, :

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

Answer 2

, AJAX. : http://jqueryui.com/demos/tabs/#ajax

Answer 3

When my user clicks the purchase button, you want to download another page from my site with the image of the product that they have chosen to insert in the div on purchase.html. (first page of html)

<td width="203"><img src="images/chocoImage4.png" width="190" height="206" class="birthpic1"/> Hershey Bouquet Mix $32</td>
<td width="211"><img src="images/chocoImage5.png" width="190" height="206" class="birthpic2"/>Chocolate Strawberry $52</td>
<td width="203"><img src="images/chocoImage6.png" width="190" height="200" class="birthpic3"/>Chocolate Strawberry $42</td>

  

(second page of html purchase.html)

<div class="aside">
  <div class="hours"><!-- TemplateBeginEditable name="hours" -->
    <p><strong>North Las Vegas</strong> Coming Soon!!!<br />
      <strong>Monday-Friday:</strong> 9:00 am — 5:00 pm<br />
      <strong>Saturday: </strong>8:00am — 2:00 pm</p>
  <!-- TemplateEndEditable --></div>
  <div id="imagePicked">
  <p>Hello</p>
  </div>

JavaScript (code)

function load_Product () {
var theDomain = window.location.assign("purchase1.html");
var d = document.getElementById("imagePicked");
var p = d.childNodes[0];
var imageContent = p.innterHTML;
var productImage = '<img    src="http://flowersbyreginalv.com/chocoImage1.png">';
imageContent = productImage;
loadSum = imageContent + theDomain;
}