我正在尝试在网页上添加iframe，该网页在点击图片时会在精美的框中打开。它正在另一个测试页面上工作，但是当我尝试将其与另一个页面结合在一起时，我无法使其正常工作。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Test</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script> !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#various3").fancybox({
'width' : '95%',
'height' : '95%',
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
</script>
<style>
.ImageMain {display:none}
.demo {cursor:pointer}
</style>
</head>
<body>
<div id="content">
<div id=MainPicture class="w3-content">
<table class="center">
<a id="various3" class="fancybox.iframe" href="https://placeholder.com/Interactive-Thing">
<img class="ImageMain" alt="" src="https://placeholder.com/thing.jpg"
</table>
</div>
</div>
<style media="screen" type="text/css">
.w3-content {
border-style: dotted;
width: 90%;
max-width: 900px;
height: 50.625vw;
max-height: 506.25px;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;}
.ImageMain {
max-width: inherit;
height: auto;
margin: auto;}
</style>
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://placeholder.com/thing.jpg"
style="Max-width:75px" onclick="currentDiv(1)">
</div>
</div>
<style media="screen" type="text/css">
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{
float: ;width:100%}
.w3-row-padding.w3-section {
margin: auto;
display: flex;
justify-content: center}
.w3-col.s4{
width: 30%;
max-width: 300px;
height: 27vw;
max-height: 81px;
display: flex;
flex-direction: column;
justify-content: center;
border-style: dotted;}
.demo.w3-opacity.w3-hover-opacity-off {
max-width: inherit;
height: auto;
margin: auto;}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not allowed;opacity:0.3}
.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{
background-color:#000;
color:#fff;
display:inline-block;
padding-left:8px;
padding-right:8px;
text-align:center}
.w3-badge{border-radius:50%}
.w3-ul{list-style-type:none;padding:0;margin:0}
.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}
.w3-ul li:last-child{border-bottom:none}
.w3-tooltip,.w3-display-container{position:relative}
.w3-tooltip .w3-text{display:none}
.w3-tooltip:hover .w3-text{display:inline-block}
.w3-ripple:active{opacity:0.5}
.w3-ripple{transition:opacity 0s}
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.w3-animate-fading{animation:fading 10s infinite}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}
@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}
.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}
.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}
.w3-opacity-min{opacity:0.75}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}
.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
</style>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);}
function currentDiv(n) {
showDivs(slideIndex = n);}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("ImageMain");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";}
for (i = 0; i < dots.length; i++) {dots[i].className = dots[i].className.replace(" w3-opacity-off", "");}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";}
</script>
</body>
</html>
我一般来说对编码还是比较陌生的，所以如果我犯了一些菜鸟错误，请原谅我，而且因为我什至不真正了解编码的基本知识，所以将不胜感激