- Ensure that the "lightbox.css" file is saved in the "css" folder
- Add this code in the <head> tag under the code that links the other CSS files:
- Ensure that the "lightbox.js" and "lightbox-plus-jquery.min.js" files are saved in the "js" folder
- Add this code in the <head> tag:
- Insert text in the #footer that includes the resource websites you used for the project research.
- To add a link to a website (the Target dictates whether a new “blank” page opens, or if you want the link to replace the page “self”):
- To add a link, you may add it directly inside the #footer tag:
- HTML to define the content of web pages
- CSS to specify the layout of web pages
- JavaScript to program the behavior of web pages
- Show or hide more information with the click of a button
- Change the color of a button when the mouse hovers over it
- Slide through a carousel of images on the homepage
- Zooming in or zooming out on an image
- Displaying a timer or count-down on a website
- Playing audio and video in a web page
- Displaying animations
- Using a drop-down hamburger menu
JavaScript "Lightbox" Gallery
You will create an image gallery (lightbox) by using CSS and JavaScript.
The code needed is provided to students and is required in order to make this effect work.
Example
Add Javascript <head>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<!--Javascript-->
<script src="js/lightbox.js"></script>
<script src=
"js/lightbox-plus-jquery.min.js"></script>
Adding a link to a website
<div id="footer">
Your Name © All Rights Reserved
<br>
SOURCES:
<a href="http://color-wheel-artist.com/primary-colors.html" target="_blank">color-wheel-artist.com</a>
<!--Closing Tag for footer--></div>
JavaScript
JavaScript is one of the 3 languages all web developers must learn:
Adds interactive behavior to web pages
JavaScript allows users to interact with web pages. There are almost no limits to the things you can do with JavaScript on a web page – these are just a few examples:
Special Characters
Some characters require a different HTML tag called a Symbol Entity Names (i.e. “&” instead of just “&”).
To learn more Symbol Entity Names, visit: W3Schools
