javascript - 使用 lightGallery 和 Jekyll：TypeError: $(...).lightGallery is not a function
问题描述
我是 Jekyll 和 Javascript 的新手，我正在尝试通过 Jekyll 的“sachinchoolur”（在 Github 上）实现 lightGallery。我查看了之前在此处和 Github 上提出的相关问题，并尝试了建议的解决方案，例如 a) 将 lightgallery 的来源从本地更改为 web 链接 b) 更改 lightgallery/jquery 的版本 c) 尝试不同的方法来实现它，比如： https ://github.com/sachinchoolur/lightGallery/blob/master/demo/index.html https://olivierpieters.be/blog/2016/02/26/creating-a-jekyll-image-gallery#adding- some-styling-with-scss https://www.npmjs.com/package/lightgallery/v/1.2.6 没有任何效果，错误仍然存在。
我从 Github 下载了 lightGallery，并没有通过 Bower 或 npm 安装它。我什至想知道是否有可能通过 Jekyll 实现它，因为它是一个 >static< 网站生成器，但实现同位素工作得很好。到目前为止，我没有在 Github 上推送它，因为我只是在测试它并且我在本地工作。这是我的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<!--
Editorial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Mr. Turtle</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!--[if lte IE 8]><script src="/assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="/assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="/assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="/assets/css/ie8.css" /><![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.css" />
</head>
<head>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
<a href="http://www.gis-ma.org/" class="logo"><strong>Gis Lab Marburg</strong> Physical Geography and Geoarcheology of Philipps University Marburg</a>
<ul class="icons">
<li><a href="https://www.facebook.com/GeographieMarburg/?__xts__[0]=68.ARByJXKgoGm67n00NuEP-DDyz0d4PSCu6Xyd6cmr2NkgpFWDaCtrxLNh8lVMlsMa4Msa_39XkkKgX0XEPqCUq8Mr5jsoskUMFNMKZ9vJXzNSS4DxY6TlBBuTyjWcbRQx0CzAQFwR5wkBcKY8CyRvfP5thquDOxNYPQl3YAfyf-SNVCAhVeeZ"
class="icon fa-facebook" target="_blank"><span class="label">Facebook</span></a></li>
<li><a href="https://github.com/lgiese/lgiese.boat.io" class="icon fa-github" target="_blank"><span class="label">GitHub</span></a></li>
</ul>
</header>
<!-- Content -->
<section>
<header class="main">
<h1>Gallery</h1>
</header>
<head>
<style type="text/css">
body {
background-color: #152836
}
.demo-gallery>ul {
margin-bottom: 0;
}
.demo-gallery>ul>li {
float: left;
margin-bottom: 15px;
margin-right: 20px;
width: 200px;
}
.demo-gallery>ul>li a {
border: 3px solid #FFF;
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
float: left;
}
.demo-gallery>ul>li a>img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery>ul>li a:hover>img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery>ul>li a:hover .demo-gallery-poster>img {
opacity: 1;
}
.demo-gallery>ul>li a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery>ul>li a .demo-gallery-poster>img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery>ul>li a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .justified-gallery>a>img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery .justified-gallery>a:hover>img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery .justified-gallery>a:hover .demo-gallery-poster>img {
opacity: 1;
}
.demo-gallery .justified-gallery>a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery .justified-gallery>a .demo-gallery-poster>img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery .justified-gallery>a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .video .demo-gallery-poster img {
height: 48px;
margin-left: -24px;
margin-top: -24px;
opacity: 0.8;
width: 48px;
}
.demo-gallery.dark>ul>li a {
border: 3px solid #04070a;
}
.home .demo-gallery {
padding-bottom: 80px;
}
</style>
<!-- jQuery version must be >= 1.8.0; -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<section>
<body>
<header class="major">
<h2>Test Runs</h2>
</header>
<!-- Container for the image gallery -->
<div class="demo-gallery">
<ul id="lightgallery" class="list-unstyled row">
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="assets/images/TestRun/TR1.jpg 375, assets/images/TestRun/TR2.jpg 480, assets/images/TestRun/TR3.jpg 800" data-src="http://localhost:4002/assets/images/TestRun/TR1.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
<a href="assets/images/TestRun/TR2.jpg">
<img class="img-responsive" src="assets/images/TestRun/TR2.jpg" />
</a>
</li>
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="assets/images/TestRun/TR4.jpg 375, assets/images/TestRun/TR5.jpg 480, assets/images/TestRun/TR6.jpg 800" data-src="http://localhost:4002/assets/images/TestRun/TR7.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
<a href="assets/images/TestRun/TR5.jpg">
<img class="img-responsive" src="assets/images/TestRun/TR5.jpg" />
</a>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#lightgallery').lightGallery();
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>
<!-- lightgallery plugins -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-thumbnail/1.1.0/lg-thumbnail.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-fullscreen/1.0.1/lg-fullscreen.min.js"></script>
</body>
<section>
</section>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Search -->
<section id="search" class="alt">
<form method="post" action="#">
<input type="text" name="query" id="query" placeholder="Search" />
</form>
</section>
<!-- TurtleIcon -->
<span style="float:right;" class="image object">
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNTY5LjM0MiA1NjkuMzQyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NjkuMzQyIDU2OS4zNDI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNy44MjksMzI3LjMzNWMxMi45Ny0wLjY1NywyNS4yNTUtNC41MzcsMzcuNTIzLTguMzgxYzEwLjY5OC0zLjM1NCwyMC4zMzktOC44NjEsMjkuNTcyLTE1LjEyNCAgICBjOC4yMTMtNS41NjksMTUuNzY1LTExLjczOCwyMC44MjgtMjAuNTc1YzMuNjM1LTYuMzQ1LDcuNzE1LTEyLjQzNywxMS43MTgtMTguNTY0YzAuNTcxLTAuODczLDIuMDkzLTIuMDUyLDIuNjcyLTEuODIzICAgIGMyLjAyNCwwLjgwNCw0LjI5NiwxLjc4Miw1LjYwMiwzLjQwMmMxLjc5MSwyLjIyOCwzLjg2OCwzLjQ5Niw2LjQ5MSw0LjA5MmM2Ljc1NiwxLjUzOCwxMy41NTQsMi45MDUsMjAuMjYxLDQuNjE1ICAgIGMxLjY0LDAuNDIsMy43OTgsMS41ODMsNC4zNjEsMi45NThjMS44NzcsNC41OSw1LjQ3Niw1LjM2NSw5LjY5NCw1LjUyYzkuMjUzLDAuMzM5LDE4LjUxMSwwLjcxOSwyNy43NiwxLjE3MSAgICBjMS4wODUsMC4wNTQsMi40MTEsMC4zNzYsMy4xNjYsMS4wNzNjMy4zNSwzLjA4OSw3LjQwOSw0LjY1NSwxMS43NDIsNC41NjJjMTEuMDgyLTAuMjQsMjIuMTU1LTAuOTYzLDMzLjIzMi0xLjM5MiAgICBjMS4wNjEtMC4wNCwyLjM5NSwwLjM0OCwzLjE3NCwxLjAyNGMyLjI0NCwxLjk2Myw0LjQ0NywyLjkwNSw3LjY1NCwyLjUyOWMxMC4yLTEuMTk1LDE5LjgwNC00LjU0OSwyOS40OTktNy41ODkgICAgYzIuMjU2LTAuNzEsMy45NTQtMC44MzYsNS4wMSwxLjcwMmMwLjczOCwxLjc2NywyLjAwMywyLjAyLDMuODExLDEuMzUxYzExLjc1NS00LjM1NCwyMy41NTgtOC41ODUsMzUuMzA5LTEyLjk1ICAgIGMxLjY5Ny0wLjYyOSwyLjc5LTAuNDA0LDMuNjcyLDEuMTI2YzEuNDExLDIuNDQ4LDIuODQ4LDQuODc2LDQuMjUxLDcuMzI3YzAuOTY3LDEuNjg5LDEuOTM4LDMuMzc5LDIuODIzLDUuMTEyICAgIGMxLjkzNSwzLjc5OSw1LjM5LDUuNDI3LDEwLjIyOSw2LjU2NWMtMi42MDYsMy42MDYtNC44MjIsNi41MjMtNi44NzQsOS41NTFjLTIuNTYyLDMuNzc0LTUuNTczLDcuMzg5LTcuMzY5LDExLjUxOCAgICBjLTQuMDAyLDkuMjA5LTcuMTA3LDE4LjgwNS0xMS4wNTMsMjguMDQyYy03LjczNSwxOC4xMjQtMTUuODU4LDM2LjA4NC0yMy43LDU0LjE2MmMtNi4xNjksMTQuMjI4LTExLjk2MywyOC42MTctMTUuODcyLDQzLjY1NiAgICBjLTEuNzkxLDYuODc5LTMuMTc4LDEzLjg3Mi00LjQ1MSwyMC44NjljLTAuNTQ3LDIuOTk5LDAuNDUzLDMuOTEzLDMuNTM4LDMuOTQ5YzQuNTk0LDAuMDQ5LDkuMDI1LTEuMDUzLDEyLjY4MS0zLjc5OCAgICBjMTAuOTgzLTguMjU0LDIyLjA3Ny0xNi40MDIsMzIuNTkxLTI1LjIzNWM5LjE2NC03LjY5NCwxOC4yNzQtMTUuNjU5LDI2LjE5Ny0yNC41NzhjMTMuMjYxLTE0LjkyNCwyNS42MjMtMzAuNjU3LDM4LjI1NS00Ni4xMzcgICAgYzEzLjEyOS0xNi4wOTEsMjMuMDM1LTMzLjgxMSwyNi45NzctNTQuNDgzYzEuMDMyLTUuNDIzLDEuOTQ2LTEwLjc5Ni0wLjUyMi0xNi4wNzFjLTEuNjExLTMuNDM5LTMuMjkyLTYuODQ3LTQuOTUzLTEwLjI2NiAgICBjLTMuNDE5LTcuMDM4LTYuNjEzLTE0LjE3OC03LjA5MS0yMi4xMjZjLTAuMzE0LTUuMTk4LDEuNjQxLTkuNjI5LDYuNDkxLTExLjgwNGMzLjQyOC0xLjUzMyw2LjM2LTMuNTk0LDkuMDctNS45MzYgICAgYzkuMTk2LDYuNzg5LDE5LjMzMSwxMi4wOCwzMC4yMjUsMTUuNzY5YzE2LjUxMiw4LjYxMywzMi4yMDcsMTguNTg1LDQ2Ljk3NywzMC4wNzRjMTEuMTM1LDguNjY2LDIxLjk1OSwxNy43MzEsMzMuMDQ4LDI2LjQ1OSAgICBjMS4zNDcsMS4wNjEsMy45MDUsMi4wNDgsNS4wOCwxLjQ1MmMxLjIzMi0wLjYyNCwyLjAwNy0zLjE5OSwyLjAxNi00LjkyNWMwLjAxMi0yLjQ2LTAuNTMtNS4wNDctMS40MTItNy4zNiAgICBjLTMuMzEyLTguNzMxLTYuNTg1LTE3LjQ5NS0xMC4zOTItMjYuMDE0Yy00Ljg3MS0xMC45MDItMTEuOTY3LTIwLjI5NC0yMS4xMDUtMjguMDM0Yy05LjA3NC03LjY4My0xOC4yNDYtMTUuMjQ3LTI3LjQxOC0yMi44MTIgICAgYy0wLjA0MS0wLjAzMi0wLjEwMi0wLjA0OS0wLjE0Ni0wLjA3N2MtMC42OTQtMC44MzItMS40NTMtMS42MjgtMi4zMjItMi4zNDZjNC4xMTctMC4wMjUsOC4yMzgtMC4wMzcsMTIuMzU0LTAuMDg2ICAgIGM0Ljk3LTAuMDU4LDEwLjAyMS0wLjY0NSwxNC44OTYsMC4wMTJjMTEuNjUyLDEuNTcxLDIzLjE5OCwwLjgzMywzNC43LTAuODI4YzguMDc0LTEuMTY3LDE2LjI1MS0yLjM5NSwyMy45ODItNC44NTEgICAgYzQuNTUzLTEuNDQ0LDcuOTgtMi4xMTgsMTEuNDIsMS40NzNjMC4xMDUsMC4xMSwwLjM2MywwLjA4MSwwLjgyNCwwLjE2N2MzLjUtNi42Myw2LjIxNC0xMy4wMDcsNC4wMzktMjEuMjMyICAgIGMtMy40MzktMTMuMDE1LTEwLjE2My0yMi43NTgtMjIuNDExLTI4LjYzOGMtOS4yMjYtNC40MjctMTguOTI0LTYuNTcyLTI5LjA4Ny02LjkzOWMtMTEuMzAyLTAuNDA0LTIyLjY0Ny0wLjQ5LTMzLjU2Ni00LjA3MiAgICBjLTE2LjQ5NS01LjQxNC0zMS4yMi0xNC4xNDktNDUuMjk2LTI0LjEwNGMtMTIuMTE3LTguNTY4LTI0LjIwNi0xNy4yMDEtMzguNDMtMjIuMDYxYy0yMC40NjUtNi45ODktNDEuMzc5LTEyLjM3NS02My4wMTEtMTMuNTcgICAgYy0yMC4wMzctMS4xMDUtNDAuMTQ0LTEuMzQ2LTYwLjIxNy0xLjMwNmMtMTUuNTIsMC4wMjktMzEuMDMyLDEuNDUzLTQ2LjA2Nyw1LjYxNGMtOC4yNDIsMi4yODEtMTYuMjM5LDUuNDUxLTI0LjMwMSw4LjM0OCAgICBjLTEyLjAxNiw0LjMxMi0yNC4wMzksOC42MDEtMzUuOTY1LDEzLjE0MmMtMTYuNTg1LDYuMzEyLTMyLjU4MywxMy45My00OC4zMjMsMjIuMTE4Yy0xMy4zNzUsNi45NTYtMjYuODYzLDEzLjY5Mi00MC4zOCwyMC4zNzEgICAgYy02Ljg5MSwzLjQwNy0xMy44NTIsNi43MDgtMjAuOTYzLDkuNjEyYy00LjY5NiwxLjkxOC01LjY5MiwzLjI1Ni0zLjk4Niw4LjA3OWMwLjE2MywwLjQ2MSwwLjM3MiwwLjkwNSwwLjU1MSwxLjM1OCAgICBjMi4xODcsNS41OSwxLjYxMiw3LjQ0Ni0zLjMwNSwxMC44MmMtMC44LDAuNTUxLTEuNTU5LDEuMTYyLTIuMzM0LDEuNzU0Yy0xLjY4OSwxLjI4NS0xLjkyMSwyLjkxNy0wLjg2MSw0LjY0NCAgICBjMC43MDYsMS4xNDYsMS41ODcsMi4yMTUsMi41NDIsMy4xN2M0Ljc1Nyw0Ljc1Myw5LjU5Niw5LjQyNSwxNC4zNDUsMTQuMTg3YzMuMTE3LDMuMTI1LDYuMTM2LDYuMzQ4LDkuMTkyLDkuNTIyICAgIGMtMS40MTIsMC43My0yLjgwMywxLjI1Ny0zLjk3OCwyLjA4OWMtNi43NDQsNC43NzMtMTMuNzk0LDkuMTk2LTIwLjA2OSwxNC41MjljLTE1Ljg3MiwxMy40OTItMzAuMjI5LDI4LjQ5NC00Mi42NjEsNDUuMjU5ICAgIGMtNC44NTksNi41NTMtOS4wNzQsMTMuMzc5LTkuODY1LDIxLjg0MUMtMC40OTksMzI1LjU0LDEuMTksMzI3LjY3LDcuODI5LDMyNy4zMzV6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
</span>
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li><a href="http://localhost:4002/index.html">Home</a></li>
<li><a href="http://localhost:4002/abstract.html">Abstract</a></li>
<li><a href="#">Who is Mr. Turtle?</a></li>
<li>
<span class="opener">Platform</span>
<ul>
<li><a href="#">3D Printed Boat</a></li>
<li><a href="#">Floating Platform</a></li>
</ul>
</li>
<li>
<span class="opener">Sensors</span>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="http://localhost:4002/sonarsensor.html">Sonar</a></li>
<li><a href="#">Lidar</a></li>
<li><a href="http://localhost:4002/cam.html">Cameras</a></li>
<li><a href="#">Temperature</a></li>
</ul>
</li>
<li>
<span class="opener">Control</span>
<ul>
<li><a href="#">Telecontrol</a></li>
<li><a href="#">Automatic Mode</a></li>
</ul>
</li>
<li>
<span class="opener">Results</span>
<ul>
<li><a href="#">Sonar</a></li>
<li><a href="#">Lidar</a></li>
<li><a href="#">Cameras</a></li>
<li><a href="#">Temperature</a></li>
</ul>
</li>
<li>
<span class="opener">Gallery</span>
<ul>
<li><a href="http://localhost:4002/TestRunscopy.html">Work in Progress</a></li>
<li><a href="http://localhost:4002/TestRuns.html">Test runs</a></li>
</ul>
</li>
<li><a href="#">Who We Are</a></li>
<li><a href="generic.html">Generic</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
</nav>
<!-- Section -->
<section>
<header class="major">
<h2>Ante interdum</h2>
</header>
<div class="mini-posts">
<article>
<a href="#" class="image"><img src="assets/images/pic07.jpg" alt="" /></a>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>
</article>
<article>
<a href="#" class="image"><img src="assets/images/pic08.jpg" alt="" /></a>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>
</article>
<article>
<a href="#" class="image"><img src="assets/images/pic09.jpg" alt="" /></a>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>
</article>
</div>
<ul class="actions">
<li><a href="#" class="button">More</a></li>
</ul>
</section>
<!-- Section -->
<section>
<header class="major">
<h2>Get in touch</h2>
</header>
<p>Sed varius enim lorem ullamcorper dolore aliquam aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin sed aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>
<ul class="contact">
<li class="fa-envelope-o"><a href="#">information@untitled.tld</a></li>
<li class="fa-phone">(000) 000-0000</li>
<li class="fa-home">1234 Somewhere Road #8254<br /> Nashville, TN 00000-0000</li>
</ul>
</section>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Untitled. All rights reserved. Demo Images: <a href="https://unsplash.com">Unsplash</a>. Turtle-/Sensor-/Control-Icon made by: <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://localhost:4002/assets/js/skel.min.js"></script>
<script src="http://localhost:4002/assets/js/util.js"></script>
<!--[if lte IE 8]><script src="http://localhost:4002/assets/js/ie/respond.min.js"></script><![endif]-->
<script src="http://localhost:4002/assets/js/main.js"></script>
</body>
</html>如果有人可以帮助我找到解决方案，那就太好了！干杯，劳拉
解决方案
由于某种原因，它现在可以在本地工作，但不能在线显示图像（http://www.mr-turtle.ml/WorkinProg.html）。我正在检查所有路径，但它们看起来还不错。这是带有图像的 git-repo：https ://github.com/lgiese/lgiese.boat.io 。这是我的脚本：
<!DOCTYPE HTML>
<!--
Editorial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Mr. Turtle</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!--[if lte IE 8]><script src="/assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="/assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="/assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="/assets/css/ie8.css" /><![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.css" />
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
...
</header>
<!-- Content -->
<section>
<header class="main">
<h1>Gallery - Work In Progress</h1>
</header>
<head>
<style type="text/css">
.demo-gallery>ul .justified-gallery {
display: block;
overflow: hidden;
position: left;
float: left;
margin: 1em 0.5em 1em 1em;
padding-right: 3em;
border: solid 1px rgba(210, 215, 217, 0.75);
border-top: 0;
border-left: 0;
border-bottom: 0;
}
.demo-gallery>ul {
margin-bottom: 0;
}
...
</style>
<!-- jQuery version must be >= 1.8.0; -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<section>
<body>
<!--style="width: 600px; height: 400px; top: 6px; left: 700px; opacity: 1;" -->
<!-- Container for the image gallery -->
<div class="demo-gallery">
<ul id="lightgallery" class="list-unstyled row">
<div class="justified-gallery" style="width: 680px; height: 340px; top: 6px; left: 4px;" data-responsive="assets/images/WorkInProg/WIP1.jpg 375, assets/images/WorkInProg/WIP1.jpg 480, assets/images/WorkInProg/WIP1.jpg 800" data-src="http://localhost:4002/assets/images/WorkInProg/WIP1.jpg"
data-sub-html="<h4>3DPrintBoat</h4><p>C3D printed boat with motor, accu, rudder and ship wave</p>">
<a href="assets/images/WorkInProg/WIP1.jpg">
<img class="fit-left" src="assets/images/WorkInProg/WIP1.jpg" />
</a>
</div>
<div class="justified-gallery" style="width: 680px; height: 340px; top: 6px; left: 4px;" data-responsive="assets/images/WorkInProg/WIP2.jpg 375, assets/images/WorkInProg/WIP2.jpg 480, assets/images/WorkInProg/WIP2 800" data-src="http://localhost:4002/assets/images/WorkInProg/WIP2.jpg"
data-sub-html="<h4>Construction1</h4><p>Glueing the boat top 1</p>">
<a href="assets/images/WorkInProg/WIP2.jpg">
<img class="fit-right" src="assets/images/WorkInProg/WIP2.jpg" />
</a>
</div>
<div class="justified-gallery" style="width: 680px; height: 340px; top: 6px; left: 4px;" data-responsive="assets/images/WorkInProg/WIP3.jpg 375, assets/images/WorkInProg/WIP3.jpg 480, assets/images/WorkInProg/WIP3.jpg 800" data-src="http://localhost:4002/assets/images/WorkInProg/WIP3.jpg"
data-sub-html="<h4>Construction2</h4><p>Glueing the boat top 2</p>">
<a href="assets/images/WorkInProg/WIP3.jpg">
<img class="fit-left" src="assets/images/WorkInProg/WIP3.jpg" />
</a>
</div>
<div class="justified-gallery" style="width: 680px; height: 340px; top: 6px; left: 4px;" data-responsive="assets/images/WorkInProg/WIP4.jpg 375, assets/images/WorkInProg/WIP4.jpg 480, assets/images/WorkInProg/WIP4.jpg 800" data-src="http://localhost:4002/assets/images/WorkInProg/WIP4.jpg"
data-sub-html="<h4>RaspiCam2</h4><p>Connecting RasPi-Cam 1</p>">
<a href="assets/images/WorkInProg/WIP4.jpg">
<img class="fit-right" src="assets/images/WorkInProg/WIP4.jpg" />
</a>
</div>
<div class="justified-gallery" style="width: 680px; height: 340px; top: 6px; left: 4px;" data-responsive="assets/images/WorkInProg/WIP5.jpg 375, assets/images/WorkInProg/WIP5.jpg 480, assets/images/WorkInProg/WIP5.jpg 800" data-src="http://localhost:4002/assets/images/WorkInProg/WIP5.jpg"
data-sub-html="<h4>RaspiCam2</h4><p>Connecting RasPi-Cam 2</p>">
<a href="assets/images/WorkInProg/WIP5.jpg">
<img class="fit-left" src="assets/images/WorkInProg/WIP5.jpg" />
</a>
</div>
</ul>
</div>
<h1>Videos</h1>
<script type="text/javascript">
$(document).ready(function() {
$('#lightgallery').lightGallery();
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>
<!-- lightgallery plugins -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-thumbnail/1.1.0/lg-thumbnail.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-fullscreen/1.0.1/lg-fullscreen.min.js"></script>
<script src="http://localhost:4002/assets/js/skel.min.js"></script>
<script src="http://localhost:4002/assets/js/util.js"></script>
<!--[if lte IE 8]><script src="http://localhost:4002/assets/js/ie/respond.min.js"></script><![endif]-->
<script src="http://localhost:4002/assets/js/main.js"></script>
</body>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
...
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Untitled. All rights reserved. Demo Images: <a href="https://unsplash.com">Unsplash</a>. Turtle-/Sensor-/Control-Icon made by: <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>
</div>
</div>
</body>
</html>推荐阅读
- css - How to fix problem “Clickable elements too close together” in Google Search Console
- python - What's the correct type hint for a type hint?
- python - 如何在张量流中设置随机种子
- javascript - replaceData 后自动拟合数据
- javascript - 仅在 div 被“显示”后运行 Javascript，显示：块
- javascript - 使用反应路由器时切换状态
- sql - PostgreSQL 可以使用索引进行逐行比较吗？
- python - 如何使用 pymongo 将具有空值的文档插入 mongodb？
- python - 单独文件中的 FastAPI / Pydantic 循环引用
- performance - 如何在 Kotlin 的多个属性初始化中使用计算？