using js to preload then show pictures

[silvertine]

I just spent 3 hours analyzing tons of lightboxes, image galleries, jQuery plugins. Now I'm a bit frustrated.
I don't want a snazzy animation effect.
I don't want a pre-made layout.


This is what I want:

On page load, 12-15 bigger images are preloaded into browser cache.
Div#container contains a default image.
When user clicks a thumbnail link, the corresponding (bigger) preloaded image shows inside #container.


A jQuery solution would be good. Any assistance is mmmmmuch appreciated.

[tr.andrus]

i'd use this:

<div id="container>
     <img src="/path/to/image1.jpg">
</div>
<div class="thumbs">
<a href="/" rel="/path/to/image1.jpg">image 1</a>
<a href="/" rel="/path/to/image2.jpg">image 2</a>
<a href="/" rel="/path/to/image3.jpg">image 3</a>
</div>

jquery:

$('.thumbs a').click(funtion(evt)
{
     evt.preventDefault();
     $('#container img').attr('src', $(this).attr('rel'));
});

why do you want the images to preload? its a waste of bandwidth if the user never clicks on a thumbnail