First you should preload your images into a browser cache. By doing this you will eliminate any delays is seeing your gallery. Here is a simple javascript code that can be used for preloading your images:
| var slides = new Array(3); // the number in brackets defines how many images your gallery has got var j=0; for(var i=1; i<=3; i++) { slides[i] = new Image(); slides[i].src = "images/big_" + i + ".jpg"; } |
This code should be placed between the <head>...</head> and <body>...</body> blocks. Your images should be placed into the 'images' folder and named in the following format: big_1.jpg, big_2.jpg and so on.
Each of your thumbnails should be wrapped in <a>...</a> tags. The href attribute of the <a> tag should refer to the javascript function that will swap images in your gallery. Here's an example of this code:
| <a href="javascript:Swap(1)"><img src="one.jpg" border="0"></a> <a href="javascript:Swap(2)"><img src="two.jpg" border="0"></a> <a href="javascript:Swap(3)"><img src="three.jpg" border="0"></a> |
The Swap() function should be seen just under the preloader code. It will accept a parameter. Here is an example of this function:
| function Swap(number) { document.slide.src = slides[number].src; } |
This function changes the src attribute of a fullsize image every time it is called. This fullsize image has a name="slide" attribute to refer to it from the Swap() function:
| <img name="slide" src="big_1.jpg" width="300" height="300"> |
Related Articles
- The Key To Effective Web Site DesignThe key to effective web site design is good planning. Without planning and organisation, you will end up with chaos. Once you have a design plan, content is the next consideration. This applies equally to new and existing web sites. To create your plan for a new or existing site, sit down and co...
- Design like no-one's watchingWeb designers frequently suffer under the illusion that other people look at their web pages the way we do. This is wrong. Designers need to develop the skill of looking at their designs through na
- The Right PortfolioRecently I was overwhelmed with literally thousands of resume packages from young graphic designers, responding to our job ope.....
- Seven Tips To A Top SiteAs a web site owner, I spend a lot of time online. I also spend a lot of time at other sites. These are the top seven tips I have discovered make or break a web site other than its design appeal. 1. WHERE ARE YOU? When creating a web site, tell people where you are, or whom you are targeting. I...
- Visual HierarchyHierarchy. Creating website navigation, dear friends, is all about establishing hierarchy. This tutorial will teach you how it
- Common Sections for Your WebsiteIve focused in the past on some individual sections of your website that you should consider implementing. What Im going to do now is give a brief overview of a number of pages and sections that are common in websites.
- 20 Tips for Artists for a Good WebsiteThe internet is a natural place for artists to gravitate - a visual product for a visual buyer in a visual medium. This article will give you 20 excellent tips, not just for artists, that make a gallery online a super experience.
- Banner Rotation Using PHPCreating a simple ad-rotator, the ads are stored in a text file and picked randomly by this PHP code. Most of the webmaster use banner ads, we will be creating a very simple banner rotator, which picks up randomly one ad from the banner file and displays it, this file can be called in any other page...
- PHP LinksEver wonder how to make navigation where you stay on the index page, but the content changes? Im sure you have seen the URL of pages like this, they often look similar to this: index.php?content=Home.
- Creating a BIG Image with a SMALL BusinessIn this age of mega-corporations, many shoppers feel bigger is better. Looking BIG is easy on the Internet. And it doesnt cost you much more than looking small. When Walmart wants to look big, they spend millions...