使用 lightGallery 和 Jekyll：TypeError: $(...).lightGallery is not a function
[英]using lightGallery and Jekyll: TypeError: $(...).lightGallery is not a function
问题描述
I´m new to Jekyll and Javascript and I´m trying to implement lightGallery by "sachinchoolur" (on Github) with Jekyll.
我是 Jekyll 和 Javascript 的新手，我正在尝试通过“sachinchoolur”（在 Github 上）和 Jekyll 来实现 lightGallery。 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.我查看了之前在此处和 Github 上提出的相关问题，并尝试了建议的解决方案，例如 a) 将 lightgallery 的来源从本地更改为 web 链接 b) 更改 lightgallery/jquery 的版本 c) 尝试了不同的方法来实现它，例如: https://github.com/sachinchoolur/lightGallery/blob/master/demo/index.html https://olivierpieters.be/blog/2016/02/26/creating-a-jekyll-image-gallery#adding- some-styling-with-scss https://www.npmjs.com/package/lightgallery/v/1.2.6没有任何效果，错误仍然存在。
I downloaded lightGallery from Github and didn´t install it via Bower or npm.我从 Github 下载了 lightGallery 并且没有通过 Bower 或 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.我什至想知道是否有可能通过 Jekyll 实现它，因为它是一个 >static< 网站生成器，但实现 isotope 效果很好。 So far I didn´t push it on Github as I´m just testing it and I was working locally.到目前为止，我没有在 Github 上推送它，因为我只是在测试它并且我在本地工作。 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 个解决方案
解决方案1
0 已采纳 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.在这里加载 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).你不应该在那里这样做，因为在 Doctype 之前什么都不允许（但由于浏览器中的错误恢复，这不是这个特定问题的原因）。 Note that the 2.x branch has been discontinued and you should use the 3.x branch.请注意，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>
Here you load jQuery again , replacing the existing one with 1.11.2, a downgrade to another unsupported version of jQuery.在这里，您再次加载 jQuery，用 1.11.2 替换现有的 jQuery，降级到另一个不受支持的 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.接下来加载灯光画廊并将其附加到您的 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.最后，您再次加载 jQuery，仍然是 1.11.2（过时的、不受支持的、已知的安全漏洞）覆盖了 jQuery 的副本，该副本绑定了 Light Gallery。
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.然后 HTML 完成加载，ready 事件触发，您尝试从 jQuery 读取lightGallery ......因为您删除了附加到的 jQuery 副本，所以它不存在。
- Load jQuery once and only once加载 jQuery一次且仅一次
- Do it somewhere it is allowed (ie inside
<head>or<body>)在允许的地方进行（即在<head>或<body>） - Do it before you load light gallery在加载灯光画廊之前执行此操作
- Use a currently supported version使用当前支持的版本
解决方案2
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 ).出于某种原因，它现在在本地工作，但没有在线显示图像（ 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 .这是带有图像的 git-repo： 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
类型错误：$(...).lightGallery(...).destroy 不是函数 - TypeError: $(...).lightGallery(...).destroy is not a function
未捕获的TypeError：$（...）。lightGallery不是一个函数 - Uncaught TypeError: $(…).lightGallery is not a function
视频库得到 Uncaught TypeError: $(...).lightGallery is not a function - video gallery getting Uncaught TypeError: $(...).lightGallery is not a function
lightgallery typeError图片无法加载？ - lightgallery typeError images not loading?
$ 未定义灯廊 - $ is not defined lightgallery
使用相同的选择器来查询lightGallery + smoothdivscroll， - using same same selector for Query lightGallery + smoothdivscroll,
Lightgallery不起作用（分别使用翡翠和加载页面） - Lightgallery not working (using jade and loading page separately)
lightGallery未加载图像 - lightGallery not loading images
lightgallery无法正常工作 - lightgallery is not working correctly
AngularJS中的lightGallery（jQuery插件） - lightGallery (jQuery plugin) in AngularJS
相关标签