The Module Pattern - Project 1
In this project, you'll build an image gallery JavaScript widget. Use the Module Pattern to hide all of the internal implementation details of the image gallery:
- Expose only the global variable
Gallery
(an object). - Expose one public method,
init(el, images)
to initialize the module. (el is the element to render into, images is an array of image objects)
When you click on the link, you'll see the image preview. You can build your image gallery to look any way you like, but the functionality should include the following features:
- Clicking on a link to open the image preview.
- The image preview should appear in the same page (that is, you should not navigate to a new page).
- No links should be clickable while the image is showing.
- Provide a way to close the image preview, so you can get back to the main part of the page and click on another image link. This could be a button or simply an action (like clicking on the image preview).
Here is a link you can use to start
Here is what the completed project should look like:
And clicking on a link displays the following: