ライトボックスにタイトルや説明を追加するには？

Question

ギャラリーがありますが、ライトボックスを置いていますが、ライトボックスに画像のタイトルや説明を表示する方法がわかりません。今度は 'タイトル'がライトボックスの 'mouseenter'にのみ表示されます。私は絵の下のテキストを並べています。私は何をすべきか？

HTML：

 <a href="../img/animals/1_korytnacka.jpg" title="Turtle - 50 x 50 x 3,5 cm"> 
      <img src="../img/animals/1_thumb.jpg" alt="Korytnacka"> 
     </a> 

JS：

var overlay = $('<div>', { 
    id: 'overlay' 
}).appendTo('body'); 
overlay.hide(); 

$('.gallery-set a').on('click', function(e) { 
    e.preventDefault(); 
    overlay.empty().show(); 
    $('<img>', { 
    src: $(this).attr('href'), 
    alt: $(this).attr('alt'), 
    title: $(this).attr('title') 
    }).appendTo(overlay); 
}); 

overlay.on('click', function() { 
    $(this).hide(); 
}); 

$(document).on('keydown', function(e) { 
    if(e.which == 27) { 
    overlay.hide(); 
    } 
}); 

Answer 1

はon clickイベント機能で画像の後の段落を追加します。

var overlay = $('<div>', { 
 
    id: 'overlay' 
 
}).appendTo('body'); 
 
overlay.hide(); 
 

 
$('.gallery-set a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    overlay.empty().show(); 
 
    $('<img>', { 
 
    src: $(this).attr('href'), 
 
    alt: $(this).attr('alt'), 
 
    title: $(this).attr('title') 
 
    }).appendTo(overlay); 
 
    $('<p>', { 
 
    text: $(this).attr('title') 
 
    }).appendTo(overlay); 
 
}); 
 

 
overlay.on('click', function() { 
 
    $(this).hide(); 
 
}); 
 

 
$(document).on('keydown', function(e) { 
 
    if (e.which == 27) { 
 
    overlay.hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gallery-set"> 
 
    <a href="../img/animals/1_korytnacka.jpg" title="Turtle - 50 x 50 x 3,5 cm"> 
 
    <img src="../img/animals/1_thumb.jpg" alt="Korytnacka"> 
 
    </a> 
 
</div>