20.2
Loading the Lightbox files
To make Lightbox work, we have to load two files: lightbox.js that runs the JavaScript and jQuery and lightbox.css that load the classes that are manipulated by the JavaScript.
These are both done in the <head> section:
Loading Lightbox
Loading Lightbox JavaScript files html <html lang="en"> <!-- Declare language --> <head> <!-- Start of head section --> <meta charset="utf-8"> <!-- Use unicode char set--> <!-- ************************************************************************** HEAD SCRIPT AREA ***********************************************************************--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="21-global/05-js/jquery.waypoints.min.js"></script> <script src="21-global/05-js/hyphenator.js"></script> <script src="21-global/05-js/lightbox.js"></script> <script src="11-resources/05-js/script.js"></script> <script src="01-pages/99-00-typicals/05-local-js/99-00-scroll.js"></script> <!-- ************************************************************************** HEAD CSS LOAD ***********************************************************************--> <link rel="stylesheet" type="text/css" href="21-global/03-fonts/ps-fonts.css"> <link rel="stylesheet" type="text/css" href="21-global/01-css/normalise.css"> <link rel="stylesheet" type="text/css" href="21-global/01-css/lightbox.css"> <link rel="stylesheet" type="text/css" href="11-resources/01-css/grid.css"> <link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css"> <!-- ************************************************************************** TITLE ***********************************************************************--> <title>Website template typicals | PracticalSeries: Web Development</title> </head>
Code 20.2 Loading Lightbox
It’s straight forward stuff, a <link> to load the CSS and a <script> to load the JavaScript.
And that is it. The general format for the anchor <a>, <img> and <figcaption> is:
