using lightGallery and Jekyll: TypeError: $(...).lightGallery is not a function
Question
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++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>
It would be great if someone could help me find a solution! Cheers, laura
2 answers
solution1
0 ACCPTED 2018-10-30 13:39:40
<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.
- Load jQuery once and only once
- Do it somewhere it is allowed (ie inside
<head>or<body>) - Do it before you load light gallery
- Use a currently supported version
solution2
0 2018-10-31 14:27:01
for some reason it´s now working locally but not showing the images online ( http://www.mr-turtle.ml/WorkinProg.html ). I was checking all pathes but they look allright. This is the git-repo with the images: https://github.com/lgiese/lgiese.boat.io . This is my 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> <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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
TypeError: $(...).lightGallery(...).destroy is not a function
Uncaught TypeError: $(…).lightGallery is not a function
video gallery getting Uncaught TypeError: $(...).lightGallery is not a function
lightgallery typeError images not loading?
$ is not defined lightgallery
using same same selector for Query lightGallery + smoothdivscroll,
Lightgallery not working (using jade and loading page separately)
lightGallery not loading images
lightgallery is not working correctly
lightGallery (jQuery plugin) in AngularJS
Related Tags