Question

[First, I’m an absolute beginner. I tried to express myself as good as I could – please correct me on any issue… Now: I have the following problem:]

I am loading a div element, which class always is “.gallery” from a couple of pages (in this example “the page index.php?page=orange”) into another page’s div (in this case with the ID “orange”) using the following code:

$("#orange").load("http://example.com/index.php?page=orange .gallery");

Each div.gallery I load in, is a set of a few images. Between them, you can switch (there are “previous”- and “next”-links in “.imgnavi”).

$(".imgnavi a").live("click", function(ev) {
ev.preventDefault();
ev.stopPropagation();
$(".gallery").load($(this).attr("href"));
return false;
})

What happens now: Loading the different div.gallery into the new page is no problem, but as soon as I start to navigate inside those divs (each div is a little gallery, where you can switch between images), the div.gallery I am switching in is suddenly loaded into EVERY other div.gallery in the document! How do I prevent that?

Answer 1

Use iframes. that will remove the problem of repeated elements as the iframe encapsulates (isolates) your loaded html.