なぜ私のイメージが飛び出さないのですか？

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

それを行うための一つの方法です：<a>タグの外に<img>を移動し、

まず、またはそうでなければポップ、その後、別のページにユーザーをリダイレクトします画像うち、jsのスクリプトでこれを書く：

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

<img>にid属性を指定してから、document.getElementById("<Your img id>")を使用してアクセシビリティを向上させることができます。