I have a lightbox set up to scroll through images, but after adding forward and back buttons, I lost the caption that used to be displayed. Can anyone help me solve this issue? Your assistance is greatly appreciated.
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();
});
Here's my HTML code:
<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>