Jump to content

Image Gallery


jnf555
 Share

Recommended Posts

There are a lot of ways to do it. Probably the best way is to start off with thumbnail images of the real images. These are smaller versions of the images you want to display, no more than 100-200px in either dimension. That way they load fast. Many designers find it convenient to store thumbnail images in a directory separate from the full-sized images.It is common to have an area for the full-sized image already designated on the page when the page first loads. It might simply be a bordered <img> whose initial src is a low-rez dummy image, like a solid gray gif. So that part of the page might look like this:

<img src="dummy.gif" id="specimen">

Your thumbnails would all be links, like this:

<a href="fullsize/any.jpg" onclick="return showme(this.href)"><img src="thumbs/any.jpg"></a>

Having the thumbnail in a link means that if a user does not have javascript, s/he can still see the image.Now the script:

function showme(href) {	document.getElementById("specimen").src = href;	return false;}

You'll probably want some CSS to keep the ugly blue border off your thumbnails:

a img { border: 0}

You'll also be positioning your specimen image somehow, and if you need help with that, give us a shout.I haven't tested this exact code. I may have made a dumb mistake, but it's a common technique, so easily fixed if I have. Try it out.

Link to comment
Share on other sites

Now, if you really want to be slick, you'll start preloading the gallery images in the background. Javascript can handle that, but so can CSS. Add this class to your stylesheet:

img.off {	position: absolute;	top: -5000;}

Having the ridiculously huge negative coordinate keeps these images from being visible or interrupting the flow of your page, but also ensures that the images will be loaded. At the top of your HTML, just add an image tag for all your full-sized images, like so:

<img src="fullsize/any0.jpg" class="off"><img src="fullsize/any1.jpg" class="off"> <img src="fullsize/any2.jpg" class="off"> <img src="fullsize/any3.jpg" class="off"> etc.

Depending on how impatient your user is, some the images may not have fully loaded themselves into memory by the time s/he clicks on a thumbnail, but after a few seconds, all these images will be in memory, so clicking on a thumbnail will let the full-sized image appear in the specimen div instantly. This makes for a much better user experience.

Link to comment
Share on other sites

<html><title></title><head><style type="text/css">function showme(href) {document.getElementById("specimen").src=href;return false;}</style></head><body><img src="dummy.gif" id="specimen"><a href="fullsize/tablebig.jpg" onclick="return showme(this.href)"><img src="thumbs/tablethumbnail.jpg"></a></body></html>i think i may have missed something outthanksjnf555

Link to comment
Share on other sites

<html><title></title><head><style type="text/css">a img {border: 0}</style></head><body><script type="text/javascript">function showme(href) {document.getElementById("specimen").src=href;return false;}</script><div style="position:absolute;left:300px;top:100"><img src="dummy.gif"id="specimen"></div><div style="position:absolute;left:10px;top:100px"><a href="tablebig.jpg" onclick="return showme(this.href)"><img src="tablethumbnail.jpg"></a></div><div style="position:absolute;left:10px;top:210px"><a href="tablebig.jpg" onclick="return showme(this.href)"><img src="tablethumbnail.jpg"></a></div></body></html>arrrrrrrrrrr thats better :) jnf555

Link to comment
Share on other sites

  • 8 months later...

hi my page works ok, but i would like the img's to load faster i have tried using img.off { position: absolute; top: -5000;but i am not sure where the class goes<div style="position:absolute;top:70px;left:400px"class="largepicture"><img src="galleryword3.png" alt="galleryword3" width="462" height="300"id="specimen"></div><div style="position:absolute;top:400px;left:600px" class="galleryclose"><a href="galleryword3.png" onclick="return showme(this.href)" onmouseover="return showme(this.href)">close</a></div>can anyone helpjnf555

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...