Question

我遵循了Lokesh Dhakar的指南，如何创建幻灯片显示图片库： https://www.lokeshdhakar.com/projects/lightbox2/#options 而且它仍然对我不起作用，它代替了工作画廊，只是像基本链接一样打开图像。我无法在他的页面上找到任何有用的信息，也无法在stackoverflow故障排除线程中找到任何有用的信息，因为我已经阅读了其他人的一些解决方案，但没有一个对我有用。有什么提示吗？

谢谢您的帮助。

<!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>

Answer 1

好的，谢谢您的帮助。经过更多的故障排除后，我终于找到了我的错误。我快要结束了： <script src="/js/lightbox.js"></script> 而不是<script src="js/lightbox.js"></script>

js / lightbox.js前面的多余斜杠（“ /” ）造成了所有问题，由于我的经验不足，我不知道无法在此处写它。现在看来已经解决了。

Answer 2

使用从您发布（https://www.lokeshdhakar.com/projects/lightbox2/）lightbox到CSS/JS lightbox URL文件的链接，发布的代码可以正常工作。您的lightbox_custom.css代码是什么样的？您是否正在使用该文件覆盖lightbox.css文件？您是否修改了lightbox.js代码？

<!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>

lightbox2图片库根本不起作用

2 个答案: