Confused with JavaScript/HTML shadowbox for photos

Question

I am new to web design/coding and am working on a personal website. I'm trying to create a shadowbox in JavaScript... I copied code from shadowbox-js.com but am throwing up an error on line 8 in Dreamweaver. On top of that I'm confused on how to code the photos in on the HTML file. I have a thumbnail photo that I would like to be able to be clickable so you can enlarge it in a popup window. I created a enlarged version of the photo (named it differently than the thumbnail, will correct that later) but am confused on how to code them into the HTML file. Any help is greatly appreciated!

Here is a codepen of the files:

https://codepen.io/AJ2021/pen/pQzmOR#=

Line 100 of the CSS is in a new file called shadowbox.css.

The line in the HTML I'm confused with is:

<section> 
    <font face="Lucida Bright">
    <center><h1 id="pagename">Gallery</h1></center>


    <div id="gallery">
    <!-- Here are the gallery thumbnails -->
    <a href="_images/php_family_marina.png"
    rel="shadowbox[picture]" title="My family at Sunbury Marina"
    <img src="tmb_Lawton_Family.png">

    </div>

</section>

Answer 1

you missing > and </a> for <a> tag and call it with shadowbox() not Shadowbox.init()

shadowbox();

#gallery img {padding: 10px; margin: 5px;background: green}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/source/shadowbox.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/source/shadowbox.min.js"></script>

<div id="gallery">

  <a href="https://i.postimg.cc/Kjn5GpVF/full-a.jpg" rel="shadowbox[picture]" title="a">
    <img src="https://i.postimg.cc/mZMjyhrq/thumb-a.jpg">
  </a>

  <a href="https://i.postimg.cc/PrQM0cYQ/full-b.jpg" rel="shadowbox[picture]" title="b">
    <img src="https://i.postimg.cc/4Ng5LZ73/thumb-b.jpg">
  </a>
  
</div>