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