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.
- 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
Below is the mock up of how the photo gallery will look.
- 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
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.