时间戳

首页 > 解决方案 > 下载的 Javascript 照片库在我的网站上不起作用

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

问题描述

我尝试为我们的网站使用一些预先编写的 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 文件中，并用我命名为“slide.js”并从 html 页面调用的 js 脚本组成了一个文件（根据其他人的建议，我尝试在标题，正文，最后，没有欢乐）。

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

对于我的新手失败的任何指示，我将不胜感激...

标签： javascripthtmlcss

解决方案

推荐阅读