How do I get images from outside the DOM using jQuery?

Question

I'm using jQuery to control an image gallery that will display any of several different sets of photos.

On an earlier version of the page, a single hidden div held all the images, which would load in the background, and a div called #content into which I would clone() the img:first-child, and then eq(1), eq(2), etc. I could also count the img elements in the hidden div to give me a number of images to cycle through. Great.

Now, I'm working with multiple, much larger sets of pictures, and I simply can't have all the images present in the HTML, glomming up the browser in the background. I thought of simply numbering the image files and incrementally changing the src attribute, but I can't count the images if they're not in the DOM.

Ideally, I'd like to grab the contents of a single gallery, like from another html file called gallery_1.html and drop it into that same hidden div, then use the same technique as before.

Is there a way to do this?

Answer 1

Sounds like you might need some kind of server-side code to count the images (in a directory or databse) and render that back to the client.

Answer 2

You could do an asynchronous postback to fetch a list of image src locations using the jquery.getJSON(url, data, cb). There are many examples for this construct around on the web.

http://api.jquery.com/jQuery.getJSON/

The idea is that you make a call to the webserver which will return the data you require on the client. The method to return the information on the server is implemented in whatever serverside language you prefer (PHP, Python, ASP, ASP.Net, ....).

If you google like this:

jquery return json from <your programming language e.g. PHP>

You should find what you need.

Answer 3

You should animate a background image instead and store the images in an array of which you can then get the length from.

Then it's as simple as doing

$("#gallery").fadeOut(400, function() {
  $(this).css('background-image', nextImage');
  setTimeout('$(this).fadeIn(400)', 100);
});

You can follow this example http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html