Techdegree Project 5

Interactive Photo Gallery

View on GitHub

Summary

Interactive image galleries are a common feature of many websites, from photo sites to e-commerce applications. Use HTML, CSS, JavaScript and jQuery plugins to create an interactive, searchable gallery of photos.

Details

This project requires creating an interactive photo gallery using JavaScript and jQuery. At the top of the page, users should be able to search for image tags, where photos will hide and show depending on user input.

When the user clicks on a thumbnail, the photo will display in a lightbox. There should be a back and previous arrows to cycle through photos.

Solution

To complete this project I built the web page layout using HTML and CSS, matching the layout in the mockup file. This included a gallery using thumbnail images, and a search box field.

I also researched and implemented a preferred jQuery plugin for the lightbox. The functionality allows users to click on thumbnail images in the gallery and view them in a lightbox (with a background overlay), the ability to view text captions to each image in the lightbox, and back and forward arrows to switch between photos when the lightbox is visible. Also there is a way to close the lightbox and return to the gallery view.

Similarly I researched and implemented a jQuery plugin for the search box. The search box at the top of the page allows users to filter photos based on the photo captions. The photos filter in real-time as the user types, and only display photos that match the search.

I also made sure to check the code was valid by running it through an HTML and CSS validator, and checked for issues with my JavaScript code using JSHint – resolving any warnings or issues raised.

Extra Credit

To gain an 'Extra Credit' grade for this project, I included a mobile-first design for both the gallery page and the lightbox. This required using media queries to make sure that the photos and layout adjust for a mobile-friendly experience. I also wrote my own JavaScript code for the search/content filtering requirement – instead of using a jQuery plugin.

Profile picture of Thomas Moore

Get in touch

I'm always open to hearing about freelance product design and development projects (or if you just want to say hi!)