Simple Javascript photogallery

In this assignment the programmers will develop a Simple Javascript photogallery to let users browse through different photos on your website.

Photo gallery is a basic need in any website or web based project. The project will help you utilize your basic logic and coding skills.

Simple Javascript photogallery – requirements

  • Generate the thumbnails from the photo details stored in a javascript or JSON object
  • Load the first photo by default
  • On clicking the thumb nails the respective image should load
  • On clicking on next/prev icons the next and previous image should load
  • If you are on the last photo, the next arrow should load the first image
  • If you are on the first image the previous arrow should load the last image

Simple Javascript photogallery – mock up

Below is the mock up of how the photo gallery will look.

Simple Javascript photogallery  – hints

  • Create a json object that stores the path of the thumbnail image and the large image
  • Run a for loop to generate thumbnails depending on the number of records in the json object

Simple Javascript photogallery  – html prototype

Download the attached zip file that has all the assets that you need to complete the project. The zip file has the following files:

  • html page
  • CSS are internal
  • html5shiv to support html5 tags for ie8 browser
  • large photos
  • thumbnail photos
  • next/prev icons

Download the files and start coding. Happy java script coding.  Comment and share with your friends.

Find this challenging? Give it a spin.

Trying solving this using any of the online editors and send me an email if you need any help or feedback on your code.