为什么我的图像没有弹出？

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

您需要按给定顺序链接相应的文件：

<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>")来访问它来增强此功能。