使用lightGallery和Jekyll:TypeError:$(...)。lightGallery不是函数

时间:2018-10-30 12:28:59

标签: javascript jekyll typeerror lightgallery

我是Jekyll和Javascript的新手,我正在尝试与Jekyll一起由“ sachinchoolur”(在Github上)实施lightGallery。我看了一下前面和在Github上提出的相关问题,并尝试了建议的解决方案 a)将图库的来源从本地更改为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="&lt;h4&gt;Fading Light&lt;/h4&gt;&lt;p&gt;Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.&lt;/p&gt;">
                    <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="&lt;h4&gt;Bowness Bay&lt;/h4&gt;&lt;p&gt;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....&lt;/p&gt;">
                    <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">&copy; 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>

如果有人可以帮助我找到解决方案,那就太好了! 干杯, 劳拉

2 个答案:

答案 0 :(得分:0)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>

在这里加载jQuery。

您不应该在那里做,因为在Doctype之前不允许任何操作(但是由于浏览器中的错误恢复,这不是造成此特定问题的原因)。请注意,2.x分支已终止,您应该使用3.x分支。


    <!-- jQuery version must be >= 1.8.0; -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  </head>

再次在此处加载 jQuery,将现有版本替换为1.11.2,这是降级到另一个不受支持的jQuery版本。


  <script type="text/javascript">
    $(document).ready(function() {
      $('#lightgallery').lightGallery();
    });
  </script>

现在,您设置了事件处理程序。一切都很好。


<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>

接下来,您将加载light gallery并将其附加到jQuery 1.11.2。

这很好。


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

最后,再次加载jQuery ,仍然是1.11.2(过时的,不受支持的,已知的安全漏洞)覆盖绑定了浅色画廊的jQuery副本。 / p>


然后,HTML完成加载,就绪事件触发,并且您尝试从jQuery读取lightGallery……因为它已删除了附加到jQuery的副本,所以它不存在。


  • 仅一次加载一次,即可加载jQuery
  • 在允许的地方(即在<head><body>内做)
  • 之前加载灯库
  • 使用当前受支持的版本

答案 1 :(得分:0)

由于某种原因,它现在可以在本地运行,但无法在线显示图像(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="&lt;h4&gt;3DPrintBoat&lt;/h4&gt;&lt;p&gt;C3D printed boat with motor, accu, rudder and ship wave&lt;/p&gt;">
                    <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="&lt;h4&gt;Construction1&lt;/h4&gt;&lt;p&gt;Glueing the boat top 1&lt;/p&gt;">
                    <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="&lt;h4&gt;Construction2&lt;/h4&gt;&lt;p&gt;Glueing the boat top 2&lt;/p&gt;">
                    <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="&lt;h4&gt;RaspiCam2&lt;/h4&gt;&lt;p&gt;Connecting RasPi-Cam 1&lt;/p&gt;">
                    <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="&lt;h4&gt;RaspiCam2&lt;/h4&gt;&lt;p&gt;Connecting RasPi-Cam 2&lt;/p&gt;">
                    <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">&copy; 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>