为什么我的图像不弹出？

Question

单击图片后，我希望弹出图片并显示消息。但我不知道该怎么做。

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet">

<a href="Images/royalpalace.jpg" data-lightbox="image-1" data-title="RoyalPalace">
  <img src="Images/royalpalace.jpg" width="19.7%" height="200px">
</a>

Answer 1

您需要 link 给定顺序的适当文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" rel="stylesheet">

并确保图像路径有效。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" rel="stylesheet">

<a href="https://cdn.pixabay.com/photo/2015/08/11/10/41/royal-palace-883800_960_720.jpg" data-lightbox="image-1" data-title="RoyalPalace">
<img src="https://cdn.pixabay.com/photo/2015/08/11/10/41/royal-palace-883800_960_720.jpg" width="200px">
</a>

Answer 2

这是一种方法：

首先，将<img>移出<a>标签，否则会将用户重定向到另一个页面，然后将图像弹出，在js脚本中编写：

document.getElementsByTagName("img")[0].addEventListener("click", function () { 
  this.style.display = "none";
  alert("Your message here");
})

您可以通过给 <img> 一个 id 属性然后使用 document.getElementById("<Your img id>") 访问它来增强它。

为什么我的图像不弹出？

Why does my image not pop out?

html

css

lightbox