Skip to main content
M
MarshallAbrams
Participant
October 20, 2019
Answered

Re: Need help with LightGallery

  • October 20, 2019
  • 1 reply
  • 305 views

I'm a real novice looking for an idiot-proof way to get started with lightGallery. I was thinking that I could use a demo as a starting point and edit it to make my page. I use BlueGriffon.

   I downloaded the lightGallery-master from Github. I have no idea what Bower or npm are. I can run the demo contained in the download. I guess I could build in up, but thought I'd try the demo at https://sachinchoolur.github.io/lightgallery.js/demos/ since it has a lot of thumbnails, which is my situation. I tried running it loaded into a new directory on my computer. That didn't work. I next tried loading it into the demo directory and it didn't work either.

  I would appreciate a suggestion of how to get started.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    LightGallery is a jQuery plugin. It won't work without the jQuery Library. 

    Copy & paste this working demo into a new, blank document.

     

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LightGallery Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css">
<style>
body {
width: 75%;
background: #222;
margin: 0 auto;
color: #FFF;
}
</style>
</head>

<body>
<h1>LightGallery jQuery Plugin</h1>

<div id="lightgallery"> 
<a href="https://dummyimage.com/900x900" title="full size image 1"><img src="https://dummyimage.com/200x200" alt="thumbnail"> </a> 
<a href="https://dummyimage.com/900x900" title="full size image 2"><img src="https://dummyimage.com/200x200" alt="thumbnail"> </a> 
<a href="https://dummyimage.com/900x900" title="full size image 3"><img src="https://dummyimage.com/200x200" alt="thumbnail"> </a> 
<a href="https://dummyimage.com/900x900" title="full size image 4"><img src="https://dummyimage.com/200x200" alt="thumbnail"> </a>
</div>


<!--latest jQuery 3--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--LightGallery 1.6.12-->
<script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.12/dist/js/lightgallery.min.js"></script> 
<!--jQuery Mousewheel-->
<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/lg-thumbnail/1.1.0/lg-thumbnail.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-fullscreen/1.1.0/lg-fullscreen.min.js"></script> 
<script>
/**invoke LightGallery on page load**/   $(document).ready(function(){
$("#lightgallery").lightGallery({
download: false,
  }); 
});
</script>
</body>
</html>

     

     

     

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    October 20, 2019

    LightGallery is a jQuery plugin. It won't work without the jQuery Library. 

    Copy & paste this working demo into a new, blank document.

     

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LightGallery Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css">
<style>
body {
width: 75%;
background: #222;
margin: 0 auto;
color: #FFF;
}
</style>
</head>

<body>
<h1>LightGallery jQuery Plugin</h1>

<div id="lightgallery"> 
<a href="https://dummyimage.com/900x900" title="full size image 1"><img src="https://dummyimage.com/200x200" alt="thumbnail"> </a> 
<a href="https://dummyimage.com/900x900" title="full size image 2"><img src="https://dummyimage.com/200x200" alt="thumbnail"> </a> 
<a href="https://dummyimage.com/900x900" title="full size image 3"><img src="https://dummyimage.com/200x200" alt="thumbnail"> </a> 
<a href="https://dummyimage.com/900x900" title="full size image 4"><img src="https://dummyimage.com/200x200" alt="thumbnail"> </a>
</div>


<!--latest jQuery 3--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--LightGallery 1.6.12-->
<script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.12/dist/js/lightgallery.min.js"></script> 
<!--jQuery Mousewheel-->
<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/lg-thumbnail/1.1.0/lg-thumbnail.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-fullscreen/1.1.0/lg-fullscreen.min.js"></script> 
<script>
/**invoke LightGallery on page load**/   $(document).ready(function(){
$("#lightgallery").lightGallery({
download: false,
  }); 
});
</script>
</body>
</html>

     

     

     

    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices