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?
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:
You should find what you need.