CODEWITHSUNDEEP
javascriptjquerycsslightboxlightbox2
maxiobor
maxiobor

Reputation: 11

lightbox2 image gallery doesnt work at all

I followed this Lokesh Dhakar's guide how to create slide show image gallery: https://www.lokeshdhakar.com/projects/lightbox2/#options and it still doesnt work for me and instead of a working gallery it just opens the images like basic link. I cant find anything useful on his page nor stackoverflow troubleshooting threads because I've read some solutions from other people but none worked for me. Any tips please?

Thanks for any help in advance.

<!DOCTYPE html>
<html>
<head style="background-color:powderblue;">
<title>Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/lightbox_custom.css">
</head>

<body>
<div>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/lightbox.js"></script>
</body>
</html>

Upvotes: 0

Views: 1023

Answers (2)

maxiobor
maxiobor

Reputation: 11

Alright thanks for your help. After even more troubleshooting I finally found my mistake. Near the end I had: <script src="/js/lightbox.js"></script> instead of <script src="js/lightbox.js"></script>

That extra slash ("/") in front of js/lightbox.js created all the problems and I didnt know I cant write it there due to my inexperience. It looks solved now.

Upvotes: 1

Woodrow
Woodrow

Reputation: 2832

Using the links to the lightbox CSS/JS files from the lightbox URL you have posted (https://www.lokeshdhakar.com/projects/lightbox2/), your posted code works. What does your lightbox_custom.css code look like? Are you using that file to overwrite the lightbox.css file? Have you modified the lightbox.js code?

<!DOCTYPE html>
<html>

<head style="background-color:powderblue;">
  <title>Title</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
</head>

<body>
  <div>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
    <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://www.lokeshdhakar.com/projects/lightbox2/js/lightbox-plus-jquery.min.js"></script>
</body>

</html>

Upvotes: 0

Related Questions