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

我无法将我的标题显示在我的灯箱中

2 个答案: