Light Box
Overview
In this assignment you'll use jQuery to create a lightbox effect on your portfolio page.
Note: You may not use a pre-made light-box script for this assignment. You MUST write the lightbox code from scratch.
Assignment
-
Add a reference to the jQuery library to your portfolio page.
-
Inside jQuery's "ready" event select all image elements on the page that are inside of portfolio items.
-
Attach a click event listener to the selection you made in step 2.
-
Write the necessary code for the function you attached in step 3 to make the image appear in a light box as shown in the example.
-
Submit the url to your github pages site to MySVU. (This should be something like https://USERNAME.github.io/REPOSITORYNAME).
Hints
-
You can earn extra credit on this assignment by going above and beyond the basics. Adding controls to your lightbox that let you navigate between images, using animation, etc...
-
All work must be your own. You may use the internet as a resouce, but copying and pasting code directly is plagerism and will result in a 0 for the assignment.
-
There are multiple ways to accomplish this effect. Most people do something similar to the following:
1. Create a new div in the page.
2. Add an image to that div.
3. Style the div so that it takes up the entire window and has a translucent black background.
4. Style the image so that it is centered inside the div.
5. Add a click handler to the div so that it is removed from the page when it is clicked on.