In this project, you will create an interactive photo gallery using JavaScript and jQuery. Thumbnails and photos will be provided with descriptions. At the top of the page, you'll have a search area 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.
To complete this project, follow the instructions below:
-
Create a web page using HTML and CSS. The page should have a title, a search box, and a place where a photo gallery will be placed.
-
Add the provided images to the gallery using the design in the gallery_mockup.png file.
-
The numbers and dotted lines in the mockup provide size information to help you build the project -- don't include them in your final design.
-
Find a jQuery plugin for creating a photo gallery or write your own script.
-
The gallery must include the ability to click on photos and view them in a lightbox (see the photo_lightbox.png file for the design).
-
Add text captions to the images when viewed in the lightbox.
-
See the photo_lightbox.png file for the design.
-
Add back and forward buttons when the lightbox is visible to switch between photos.
-
Implement the search box at the top of the page that filters photos based on the captions.
-
The photos should filter in real-time as you type.
-
This could be a jQuery plugin that you find on the web, or code that you write yourself.
-
Make sure to check your code is valid by running it through an HTML and CSS validator. Links to the validators can be found in the Project Resources. This will help you spot any errors that might be in your code.
-
There are a few exceptions that you don’t need to fix:
- Don’t worry about any warnings, we just need you to check any errors that might be there.
- If CSS validator flags use of calc, vendor prefixes or pseudo-elements/pseudo-classes these errors should be ignored.
- If HTML validator flags use of pipe (‘|’) in Google font links/URLs this error can also be ignored.
-
You should also check for issues with your JavaScript code using JSHint, linked in the Project Resources. JSHint may show you some warnings, so make sure to check through those for any potential problems. You do not need to fix every warning listed but reviewing them can be useful.
-
NOTE: A good practice is to check your project for cross browser compatibility. Making sure that it looks and functions correctly in multiple (at least three) browsers is an important part of being a top-notch developer.