Question

我已经尝试过为我们的网站使用许多预编写的javascript照片库，但是当它们在源站点上工作时，我无法让它们在我的站点上工作。显然，这是基本的东西，但我只是没有看到。我尝试过的最新的预写脚本为https://codepen.io/maulikdarji/pen/WwqdMO/，我将html如下所示复制到了我的网页中，仅通过删除多余的文本并更改图像来进行了修改：

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class=""><!-- InstanceBegin template="/Templates/newpage.dwt" codeOutsideHTMLIsLocked="false" -->
<!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="Head" -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Dunlaw.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<script src="slide.js"></script>
<!-- InstanceEndEditable -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">

<table width="100%" border="0">
  <tr>
    <td width="8%" align="center" valign="bottom">&nbsp;</td>
    <td width="84%" align="center"><span class="Head1"> </span>
      <p><a href="The Trust.html">The Trust </a>&nbsp;|&nbsp; <a href="Applying.html">Applying</a> &nbsp;|&nbsp; <a href="Awards.html">Awards</a> &nbsp;|&nbsp; <a href="Trustees.html">Trustees</a> &nbsp;|&nbsp; <a href="Links.html">Links</a>&nbsp;|&nbsp; <a href="Contacts.html">Contacts</a> &nbsp;|&nbsp;<a href="index.html">Home</a> </p>
       </p>
       <p><img src="windfarm.jpg" alt="Dun Law windfarm"> </p>
       <p class="Head1">  DUN LAW TRUST </p>

       <!-- InstanceBeginEditable name="Titleregion" -->

       <div id="Titlediv">Image Gallery</div>
       <!-- InstanceEndEditable -->

    <td width="8%" align="right" valign="baseline">
  </tr>
</table>


<div id="LayoutDiv2"><!-- InstanceBeginEditable name="Main_region" -->
<hr>

<div id="gallery" class="container-fluid">  

  <img src="images/1.JPG" class="card img-responsive">
  <img src="images/2.JPG" class="card img-responsive">
  <img src="images/3.JPG" class="card img-responsive">
  <img src="images/1.jpg" class="card img-responsive">
  <img src="images/2.jpg" class="card img-responsive">
  <img src="images/3.JPG" class="card img-responsive">
  <img src="images/1.JPG" class="card img-responsive">
  <img src="images/2.JPG" class="card img-responsive">
  <img src="images/3.JPG" class="card img-responsive">

</div>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
    </div>

  </div>
</div>

我已经将css文本添加到css文件中，并使用js脚本组成了一个文件，该脚本我将其命名为“ slide.js”并从html页面调用（根据其他人的建议，我尝试了调用放在标题，正文和结尾，都没有乐趣）。

该脚本在源站点上运行良好，当您单击图库时会显示较大的图像，但是在我的站点上http://s752783569.websitehome.co.uk/slideshow.html上没有任何作用

如果有任何关于我的新手失败的提示，我将不胜感激...

下载的Javascript照片库在我的网站上不起作用

0 个答案: