Image Slider

A project I have been working on recently is a website that presents information a series of games.

It has:

  • a graphical header for each game,
  • a box with text about the game and image of the actual game box,
  • a back and forward button to move between games
  • A mini picture of each game box at the bottom of the page, that can be clicked to view each page
The concept I had for this was simple, load everything up front and hide it with CSS, and on a button click use JavaScript to show and hide divs. This worked fine, and using jQuery I could simplify this and add fading.
The only problem I have is that the entire page is rendered and downloaded, when this includes a number of pictures it could take a while, so the easy solution is to make the images as small as possible, the harder solution I haven’t sorted yet is to use ajax or other methods to load them and show a loading animation during this.