Lightweight Image Gallery

**Funny Guy** · 01-29-2010 11:14 AM

herro everyone...

I'm working on a website for a fencing company, and I'm in the process of making a custom image gallery so that they can showcase their projects. Right now I've got a table of thumbnails that, when clicked, make a div containing the larger image pop up. (http://www.hessiron.com/gallery.html)

This works fine, except I want to show a loading graphic when the browser loads a new image.

Could someone walk me through how that would work? I'm very new to javascript and I am trying to learn how the gears turn rather than just paste code in.

Thanks!

In addition, I feel like the gallery in general is awkward to use. Any UI-making tips would also be appreciated.

**harrierdh** · 01-29-2010 11:50 AM

Hey Funny Guy,
I went to your site. Impressive, first of all. Very nice layout. I don't know why you think you need a loading image. It seemed to come up for me without any delay. In any event there is no way to do what you want with Javscript and HTML. It can be done in flash. Browsers run sequentially, one line at a time. Images come in one image at a time. There is no way to detect when an image is completely loaded. There are no events that occur.

Best suggestion is to preload your large images with javascript when the page loads. Then they will display onClick more quickly. Like this:

<script>
function loadImages() {
preload_image = new Image();
preload_image.src="http://mydomain.com/image.gif";
}
</script>
<body onLoad="loadImages()">

With the amount of images you have this might make the page load very slowly though.

Maybe someone else has a better solution.

**vwphillips** · 01-29-2010 12:41 PM

Code:

<SCRIPT language="JavaScript">
<!-- Begin
document.onreadystatechange=loadingImage();
function loadingImage() {
	if (document.readyState == "complete") {
    	var imgDest = document.getElementById('test');
		imgDest.style.visibility='hidden';
	}
}
function displayImg(newImg) {
 var newImgSrc=newImg.src;
 newImgSrc = newImgSrc.replace("thumb","medium").replace("gif","png");
 document.getElementById('mainpic').src ='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
 if (newImg.loaded){
     swap(newImgSrc);
 }
 else {
  newImg.loaded=new Image();
  newImgSrc.onload=swap(newImgSrc);
  newImg.loaded.src=newImgSrc;
 }
}
function swap(newImgSrc) {
	var imgDest = document.getElementById('mainpic');
	imgDest.setAttribute("src", newImgSrc);
	imgDest.style.visibility='visible';
}
function hide() {
	var imgDest = document.getElementById('mainpic');
	imgDest.style.visibility='hidden';
}
// End -->
</SCRIPT>

replace
displayImg(this.src)

with
displayImg(this)

Code:

      <td><img src="http://www.hessiron.com/job_photos/thumb/DSC01889.gif" onclick="displayImg(this)"/></td>
    <td><img src="http://www.hessiron.com/job_photos/thumb/DSC01893.gif" onclick="displayImg(this)"/></td>
    <td><img src="http://www.hessiron.com/job_photos/thumb/DSC01899.gif" onclick="displayImg(this)"/></td>
    <td><img src="http://www.hessiron.com/job_photos/thumb/DSC01909.gif" onclick="displayImg(this)"/></td>
    <td><img src="http://www.hessiron.com/job_photos/thumb/DSC01911.gif" onclick="displayImg(this)"/></td>
        </tr>
        <tr>

**harrierdh** · 01-29-2010 02:43 PM

Very cool Vic! I'll keep this one.

**Funny Guy** · 01-29-2010 06:19 PM

Thanks guys, but the problem is I've only seen the loading image once. (I changed it to "placeholder.jpg") Otherwise the image behaves as it did with my first code...

I'm trying to get something to this effect: http://gizmodo.com/5459997/this-week...-apps/gallery/

EDIT: I might have fixed this, just had to expand "document.getElementById('mainpic').src ='placeholder.jpg';" into a new variable declaration.

Thread: Lightweight Image Gallery

Thread Tools

Display

Lightweight Image Gallery

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions