Need help understanding shadowboxes

I’m stuck on creating a shadowbox for my gallery page. So far I’ve got some code and 1 picture both as a php file (the enlarged file) and a thumbnail (for the main page) though they are named differently (I will correct that later). I have 2 different CSS files, so I don’t know how to create a codepen using 2 so I’ve added the various code here. Any help is greatly appreciated as I’m lost!!!

html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jackson Lawton_homePage</title>
<link href="_CSS/main.css" rel="stylesheet" type="text/css">
	
<!--This is the gallery javascripts --->
	<link rel="stylesheet" type="text/css" href="http://www.susquweb.com/_shadowbox/shadowbox.css">
	<script type="text/javascript" src="http://www.susquweb.com/_shadowbox/shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init();
    </script> <!-- end shadow box -->
	
	
	
</head>

<body>
	</body>
<nav>
  <header>
    <h1>Jackson Lawton and Family</h1>
  </header>
  <div id="nav-links">
    <a href="#">Home</a>
    <a href="#">Contact</a>
    <a href="#">Media</a>
    <a href="#">Gallery</a>
    <a href="#">Resume</a>
  </div>
</nav>
	
<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>

</div><!-- end of wrapper -->
	
</body>
</html>

main.css:

@charset "utf-8";
/* CSS Document */
 
body {
  margin: 0;
}

nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position:relative;
  background-color: #808080;
  color: white;
  padding: 0 15px 10px;
  font-family: "Lucida Bright";
}
#nav-links {
  flex: 1 1;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
}
nav header {
  flex: 1 1 55%;
}

#nav-links a {
  display: flex;
  align-items: center;
  min-height: 30px;
  text-decoration: none;
  color: white;
  padding: 15px;
}

#nav-links a:hover {
  background-color: #606060;
}

main {
  margin: 0 5vw;
}

/* Style inputs with type="text", select elements and textareas */

input[type="text"],
select,
textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type="submit"] {
  background-color: #4caf50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type="submit"]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  max-width: 600px;
  margin: 35px auto;
}

@media (max-width: 660px) { 
  .container{
    border-radius:0;
    margin:auto;
  }
  #nav-links{
    position:absolute;
    flex-direction:column;
    justify-content:flex-start;
    top:100%;
    left:0;
    background-color: #808080;
  }

}

shadowbox.css:

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png);}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}

Here is my Javascript code in a codepen since it wont fit here.