如何向灯箱添加标题或描述？

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>