I´m new to Jekyll and Javascript and I´m trying to implement lightGallery by "sachinchoolur" (on Github) with Jekyll. I had a look at related questions asked earlier here and on Github and tried the proposed solutions like a) changing the source of lightgallery from local to a web link b) changing the version of lightgallery/jquery c) tried different ways to implement it like: 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 Nothing worked and the error remains.
I downloaded lightGallery from Github and didn´t install it via Bower or npm. I was even wondering if it is possible at all to implement it via Jekyll as it is a >static< website generator but implementing isotope worked fine. So far I didn´t push it on Github as I´m just testing it and I was working locally. Here is my code:
<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="#">[email protected]</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>It would be great if someone could help me find a solution! Cheers, laura
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE HTML>
Here you load jQuery.
You shouldn't do it there, since nothing is allowed before the Doctype (but thanks to error recovery in browsers, that isn't the cause of this particular problem). Note that the 2.x branch has been discontinued and you should use the 3.x branch.
<!-- jQuery version must be >= 1.8.0; --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head>
Here you load jQuery again, replacing the existing one with 1.11.2, a downgrade to another unsupported version of jQuery.
<script type="text/javascript"> $(document).ready(function() { $('#lightgallery').lightGallery(); }); </script>
Now you set up the event handler. All is fine.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
Next you load light gallery and attach it to your jQuery 1.11.2.
This is fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Finally you load jQuery again, still 1.11.2 (obsolete, unsupported, known security holes) overwriting the copy of jQuery which has light gallery bound to it.
Then the HTML finishes loading, the ready event fires, and you try to read lightGallery from jQuery … where it doesn't exist because you trashed the copy of jQuery you had attached it to.
<head> or <body>)