如何向燈箱添加標題或描述？

Question

我有一個畫廊，我放了一個燈箱，但我不知道如何在燈箱中顯示圖片的標題或描述。現在，「標題」僅顯示在Lightbox中的「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>