a JS image gallery that caches all images while the user views one

there has to be a script out already there that does this

[partha]

I was thinking it would be nice to have an image gallery that "caches" an entire directory of pictures in the background while the user is viewing one of them, thus making navigating the gallery seem nearly instant in most cases.

In other words, as soon as the page is loaded, javascript could start downloading all the pics from a directory and save them in memory or disk or something and then make it so when you click "next picture", it just loads what it's already saved instead of waiting until you click to download the picture.

It seems like somebody ought to have already written a script to do this, but I can't seem to find it....maybe my eyes are just skipping over it or something.

>>Do you know of one?

[Bernard Marx]

//!* replace [b][red]¦¦[/red][/b] with unbroken pipe characters.
//
preloads = ['one','two','three'];
preloads.baseURL = '../images/';
preloads.ext = '.jpg';
preloadArray(preloads)
//
function preloadArray(arr)
{
    var base = arr.baseURL[red]¦¦[/red]'';
    var ext = arr.ext[red]¦¦[/red]'';
    var img;
    for(var k=0,src;src=arr[k];k++)
    {
        img = new Image();
        img.src = base+src+ext;
        arr[k] = img;
    }
}

If the baseURL or extension vary, put it into the array strings, and give
that property an empty string, or leave it out entirely.

The function replaces the src strings with image objects.

[partha]

thanks bernard, and cheer up, you ARE an alpha-plus, despite the rumors.

that code is pretty nice, but I was hoping to find something that will actually display the first image as soon as it's loaded and then keep chaching the others *in the background*.
then when I want to go to the next image in the set, I click a "next image" link and the image src is replaced with the next one in the array without reloading the page. If it's already cached, great, but in case I click "next image" to quickly and the next image is NOT in cache, the script should be able to handle that too.

[RobinC]

An alternative is to use the DOM and CSS to do it - have the page with all the <img id="..." src="..." class="gallery"> tags there, then when someone wants to view a specific image, just use javascript to change the display attribute of the one you're viewing to "none", and one you want to view to "block" or "inline"...

Just remember to add a style="display:inline" to the first img so it can be seen...

CSS -

img.gallery { display:none; }

Javascript -

function showImg(id)
{
var x=document.getElementsByTagName('img');
for(var i=0;i<x.length;i++){
if(x[i].className=='gallery'){
if(x[i].id==id)x[i].style.display='inline'; // Could use "block"
else x[i].style.display='none';
}}}

The downside to this is it obviously needs a browser capable of supporting it ;-)

Robin

[Bernard Marx]

Rumours?!