используя lightGallery и Jekyll: TypeError: $ (...). lightGallery не является функцией - PullRequest
Новая
       20

используя lightGallery и Jekyll: TypeError: $ (...). lightGallery не является функцией

0 голосов
/ 30 октября 2018

Я новичок в Jekyll и Javascript, и я пытаюсь реализовать lightGallery с помощью "sachinchoolur" (на Github) с помощью Jekyll. Я посмотрел на связанные вопросы, заданные ранее здесь и на Github, и попробовал предложенные решения, такие как а) изменение источника lightgallery с локального на веб-ссылку б) изменение версии lightgallery / jquery в) пробовал разные способы его реализации, такие как: 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 Ничего не сработало и ошибка остается.

Я скачал lightGallery с Github и не установил его через Bower или npm. Мне даже было интересно, возможно ли вообще реализовать его через Jekyll, так как это> статический <генератор сайтов, но реализация изотопа работала нормально. До сих пор я не давил его на Github, я просто тестировал его и работал на месте. Вот мой код: </p> 

<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 голосов
/ 31 октября 2018

по какой-то причине он теперь работает локально, но не показывает изображения в Интернете (http://www.mr -turtle.ml / WorkinProg.html ). Я проверял все пути, но они выглядят хорошо. Это git-репо с изображениями: 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>
0 голосов
/ 30 октября 2018 
<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>

Затем вы загружаете световую галерею и прикрепляете ее к вашему 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, с которой связана световая галерея.

Затем HTML завершает загрузку, запускается событие ready, и вы пытаетесь прочитать lightGallery из jQuery… там, где его нет, потому что вы удалили копию jQuery, к которой вы его прикрепили.

  • Загрузка jQuery один раз и только один раз
  • Сделайте это где-нибудь, где это разрешено (то есть внутри <head> или <body>)
  • Сделайте это до вы загружаете галерею света
  • Использовать текущую поддерживаемую версию
...