我无法让我的字幕显示在我的灯箱中

Question

我有一个灯箱，它能够从一个图像滚动到另一个图像，但是由于添加了前进和后退按钮，我失去了曾经存在的标题。如果有人能帮我弄清楚，我将不胜感激。

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

//An image to overlay
$overlay.append($image);

var $leftArrow = $("<div id='leftArrow'></div>");
var $rightArrow = $("<div id='rightArrow'></div>");
var $closeLightbox = $("<div id='closeLightbox'></div><div style='clear:both'></div>");

$image.before($closeLightbox);
$image.before($leftArrow);
$image.after($rightArrow);

//A caption to overlay
$overlay.append($caption);

//Add overlay
$("body").append($overlay);

//Capture the click event on a link to an image
$("#boxCabinet a,#channelLetters a, #customSignage a, #postandpanel a").click(function(event){
event.preventDefault();

getCurrentImage(this);

//Show the overlay.
$overlay.show();
});

$leftArrow.click(function(){
getPrevImage();
 });

$rightArrow.click(function(){
getNextImage();
});

function getCurrentImage (currentImage) {  
thisImage = currentImage;
var imageLocation = $(currentImage).attr("href");
//Update overlay with the image linked in the link
$image.attr("src", imageLocation);

//Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
 }

function getPrevImage() {
imageParent = $(thisImage).parent().prev();
if(imageParent.length!=0){
  thisImage = $(imageParent).children("a");

 }
getCurrentImage(thisImage);

 }

function getNextImage() {
imageParent = $(thisImage).parent().next();
if(imageParent.length!=0){
thisImage = $(imageParent).children("a");

}
getCurrentImage(thisImage);
 }

//When overlay is clicked
$closeLightbox.click(function(){
//Hide the overlay
$overlay.hide();
});

这是我的 html

  <div id="slideshow">

  <a name="featured" id="featured"></a>

  <h1>Featured Work</h1>
  <div id="ssouter">
  <% csv.each do |row|%>
    <% if row[2] == "Active" && row[4] == "Featured" %>   
    <img class="slideshow" src=<%= row[0]%> >

    <% end %>

   </div>

   </div>

    <div id="portfolio">
 <a name="boxCabinet"></a>
 <h1>Box Cabinet </h1>

    <ul id="boxCabinet">

    <% csv.each do |row|%>
    <%   if row[3] == "Box" && row[2] == "Active" %>
    <li><a href="<%= row[0]%>"><img src=<%= row[0]%> width="120" height="120"alt="<%=row[1]%>"></a></li>

       <% end %>
       <% end %>

    </ul>

Answer 1

我解决了我的问题。

//Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
}

我不小心把 $(this).children 改成了 $(currentImage).children currentImage 是需要调用标题的时间/位置，所以我现在看到了我的错误。它在我睡梦中出现，完全忘记了，直到几分钟前我开始编写我的代码。

Answer 2

您所要做的就是让图片链接的标题属性使用图片标题而不是链接标题。我猜这需要对您的主题进行一些修改，但最终结果应该是这样的：

<a href="..." title="The caption of an image"><img src="..."></a>

为您的附件获取图片标题的描述非常好：here