到达终点后，回到灯箱中的第一张图像

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

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

function getPrevImage() {
imageParent = $(thisImage).parent().prev();
if(imageParent.length!=0){
  thisImage = $(imageParent).children("a");
// imageLocation = $(thisImage).attr("href");
// $image.attr("src", imageLocation);
}
getCurrentImage(thisImage);

}

function getNextImage() {
imageParent = $(thisImage).parent().next();
if(imageParent.length!=0){
thisImage = $(imageParent).children("a");
  // imageLocation = $(thisImage).attr("href");
  // $image.attr("src", imageLocation);
}
getCurrentImage(thisImage);
}

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

和hres的样本

   <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>

   <a name="channelLetters"></a> 
  <h1>Channel Letters </h1>
   <ul id="channelLetters">
<% csv.each do |row|%>
    <%   if row[3] == "Channel" && row[2] == "Active"%>
        <li><a href="<%= row[0]%>"><img src=<%= row[0] %> width="120"    height="120"alt="<%=row[1]%>"></a></li>

    <% end %>
    <% end %>
    </ul>