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;}