Скачанная фотогалерея 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"> </td>
<td width = "84%" align = "center"><span class = "Head1"> </span>
<p><a href = "The Trust.html">The Trust </a> | <a href = "Applying.html">Applying</a> | <a href = "Awards.html">Awards</a> | <a href = "Trustees.html">Trustees</a> | <a href = "Links.html">Links</a> | <a href = "Contacts.html">Contacts</a> | <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
Буду признателен за любые указания относительно моих новичков в недоработках ...
Вам нужен jquery
mplungjan и Jeremiah Cabigting правы. Вам нужно добавить jQuery, а затем открыть консоль и искать ошибки. Если вы не можете понять, как исправить конкретную ошибку, сообщите нам об этом. Если вы это сделаете, обязательно опубликуйте точную ошибку, которая отображается в консоли. Также, как часть вашего вопроса, разместите свой javascript в slide.js.
Вы красивые люди. Спасибо всем за это - все в значительной степени исправлено, не считая некоторого прихорашивания, добавив <script src = "ajax.googleapis.com/ajax/libs/jquery/3.3.1/…> в заголовок веб-страницы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Нажмите F12 и исправьте ошибки консоли