javascriptjqueryhtmlcssruby

I having trouble getting my caption to show up in my lightbox


I have a lightbox and i have it able to scroll from one image to another, but since adding the forward and back buttons i lost my caption that used to be there. If anyone could help me figure it out i would appreciate it.

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();
});

And heres my 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>

Solution

  • I fixed it my problem was here.

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

    I accidentally changed $(this).children when it should be $(currentImage).children currentImage is when/where the caption is needing to be called so I see my error now.It came to me in my sleep, totally forgot til I started working on my code a few minutes ago.