Interactive Image Gallery

This project is intended for you to show that you can use jQuery, AJAX, and JSON to dynamically change the content and structure of an HTML page.

Many people want to upload their photos to the web so they can share them with friends. In social networks such as Facebook and Flickr, the standard way to do this is to implement a database-backed web application that allows users to upload files, and then lays them out dynamically using some heuristics. A different approach, taken by most professional photographers, is to make their own website using an application which allows them to select a template, adjust the appearance and set various parameters, and then export a "static" website that can be uploaded to any host. The website is considered static because it is implemented only in HTML and CSS, with JavaScript added to improve the user experience.

Create a website that displays an image gallery of a collection of images tagged with multiple categories. The exact look of your website is up to you to design but, at the very least, it should:

1. Represent a collection of images using a JavaScript data structure to generate a responsive HTML layout from just that data structure
2. Categorize images based on some basic set of tags so users can restrict their view to a subset of the images, using check boxes so they can view one or more categories at a time
3. Display an image slideshow or carousel at the top of the page using one image from each category that the user can traverse forwards or backwards, clicking on an image is one way of viewing that subset (instead of using the checkbox)
4. Display an enlarged version of an image with a caption when a user clicks on it

To test the first point above, your website should be able to dynamically switch between different JSON files, loaded using AJAX, that describe one or more image collections and their categories to display, i.e., the actual images displayed in the gallery are determined by the JSON data structure. How you organize the JSON data structure to represent the image data you need to support your site is up to you. Nothing about the images to be displayed should be hard coded in the HTML file itself, e.g., not the number of images to display nor the number or name of the categories in which the images belong.

Since the point of this assignment to practice JavaScript, build the code yourself using JavaScript or jQuery rather than a library that already handles the interaction for you (like Bootstrap's Carousel plug-in). You do not have to use jQuery for this project, but it is recommended since it simplifies many things. You are welcome to use Flexbox or Bootstrap to make the grid of images, but not to solve interactive aspects of the requirements given above. The HTML and CSS for this site can be fairly basic since the focus is on the site's interactivity and generality rather than its style and appeal.

You are welcome to use your own, properly attributed, images for this project or a collection of freely available images like these or these, or you can use this image generator to find random images of specific types. Finally, if you are not feeling creative, you can download this set.

Resources

1. Adding arbitrary data to HTML elements
2. Accessing Images within HTML document
3. Image slideshow
4. Modal images

Of course, you are encouraged to go beyond these basic examples as make your gallery (for example, adding animation).

Submission: Adding your Pages to your Portfolio

This project will be added to your assignments-portfolio-GIT_SCREEN_NAME repository so there is one single place we can go to find your work during the semester.

To submit this project

• create a new folder within your assignments-portfolio-GIT_SCREEN_NAME folder named gallery
• within that folder put
  • HTML page, CSS style file(s), JavaScript file(s), and JSON data files
  • any local images used to make your page
  • a README file (in plain text or Markdown format) describing your work on the project
• then add a very obvious link on your Portfolio web site to the page you have made

Your files must display the way you expect in the latest version of Chrome. You are expected to follow the standard coding conventions for HTML, CSS, and JavaScript (within reason). Your code must validate using the W3C HTML, CSS, JavaScript (within reason), and JSON validators online.

Only what is in your assignments-portfolio-GIT_SCREEN_NAME repository on GitHub at the deadline will be considered for your submission.