Highlighted

Re: Need help with LightGallery

New Here ,
Oct 20, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

 

 

 

Views

34

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Re: Need help with LightGallery

New Here ,
Oct 20, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

 

 

 

Views

35

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 20, 2019 0
Adobe Community Professional ,
Oct 20, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2019 1