lightbox2圖片庫根本不起作用
[英]lightbox2 image gallery doesnt work at all
問題描述
我遵循了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>
2 個解決方案
解決方案1
1 2019-07-05 19:59:29
好，謝謝您的幫助。 經過更多的故障排除后，我終於找到了我的錯誤。 快要結束了，我有了： <script src="/js/lightbox.js"></script>而不是<script src="js/lightbox.js"></script>
js / lightbox.js前面的多余斜杠（ “ /” ）造成了所有問題，由於我的經驗不足，我不知道無法在此處編寫它。 現在看來已經解決了。
解決方案2
0 2019-07-05 19:00:58
使用從您發布的lightbox URL （ https://www.lokeshdhakar.com/projects/lightbox2/ ）到lightbox CSS/JS文件的鏈接，發布的代碼可以正常工作。 您的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不安全的數據圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.