Let’s say you have a page with multiple thumbnails that can be clicked to load the full-sized image in a specific area of the page. In the old days, we would have done this in one of two ways: 1) Make the link actually lead to a different page with that new image shown or 2) Load all of the images at once, hiding them with CSS, slowing down the initial load time of the page.
<img id="fullsize" /> <ul id="thumbs"> <li id="thumb1"><img src="thumb1.jpg" /></li> <li id="thumb2"><img src="thumb2.jpg" /></li> <li id="thumb3"><img src="thumb3.jpg" /></li> </ul>
<img id="fullsize" /> <ul id="thumbs"> <li id="thumb1"><a href="" onclick="return switchFull(1)"><img src="thumb1.jpg" /></a></li> <li id="thumb2"><a href="" onclick="return switchFull(2)"><img src="thumb2.jpg" /></a></li> <li id="thumb3"><a href="" onclick="return switchFull(3)"><img src="thumb3.jpg" /></a></li> </ul>
This type of function can be used in conjunction with AJAX to switch out images and content and much more.
I’ve uploaded a ZIP archive with an example HTML file and some images to use with it. The images were downloaded from Google Images search. I claim no ownership or rights to any of the images in the archive.