我的灯箱标题存在问题。我想用我当前的javascript灯箱来设置字幕。如果您需要预览，可以访问我的网站maialedesigns.com。我已经启动并运行但我无法弄清楚如何在那里获取我的标题。我把我的灯箱设置到基本上是幻灯片的地方。我只需要在每张图片下面都有字幕。我在CSS中创建了两个类来解释我需要的东西（一方是标题，另一方是工作描述）。此外，这只是一个奖励，但我怎么能在我的灯箱中获得箭头键功能？
灯箱的当前Javascript：
function lightbox(e, event){
if($(event.target).get(0).tagName == "A"){
return;
}
var ww = $(window).width();
var wh = $(window).height();
var img = new Image();
var clickedImage = e.getElementsByTagName("IMG");
currentArray = $(clickedImage).attr("alt") //Not defined using var so the variable would be global
img.src = $(clickedImage).attr("src");
var iw = img.width;
var ih = img.height;
var maxHeight = wh * 0.85;
var targetWidth = ww * 0.75;
var targetHeight = (targetWidth / iw) * ih;
if(targetHeight > maxHeight){
for(i=targetHeight; i > maxHeight; i = i - 20){
targetHeight = i;
}
targetWidth = (targetHeight / ih) * iw;
}
$("#lightboxImage").attr("src", img.src);
$("#lightbox").css("display", "block");
$("#lightboxOverlay").css("display", "block");
setTimeout(function(){
$("#lightbox").css("opacity", 1);
$("#lightboxOverlay").css("opacity", 1)
}, 1)
}
function closeLightbox(){
$("#lightbox").css("opacity", 0);
$("#lightboxOverlay").css("opacity", 0)
setTimeout(function(){
$("#lightbox").css("display", "none");
$("#lightboxOverlay").css("display", "none");
}, 1000)
}
function nextSlide(direction){
var oneArray = [
//This is the first array
{
path: "http://maialedesigns.com/images/websites.png",
caption: ""
},
{
path: "http://maialedesigns.com/images/website/home_desktop.png",
caption: ""
},
{
path: "http://maialedesigns.com/images/website/funfacts_desktop.png",
caption: ""
},
{
path: "http://maialedesigns.com/images/website/home_mobile.png",
caption: ""
}
];
var twoArray = [
//This is the second array
{
path: "http://maialedesigns.com/images/illustrations.png",
caption: ""
},
{
path: "http://maialedesigns.com/images/Illustrations/illustration2.jpg",
caption: "Test 1"
},
{
path: "http://maialedesigns.com/images/Illustrations/illustration3.jpg",
caption: "Test 2"
},
{
path: "http://maialedesigns.com/images/Illustrations/illustration7.png",
caption: ""
},
{
path: "http://maialedesigns.com/images/Illustrations/illustration8.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/images/Illustrations/illustration4.png",
caption: ""
},
{
path: "http://maialedesigns.com/images/Illustrations/illustration6.png",
caption: ""
}
];
var threeArray = [
//This is the third array
{
path: "http://maialedesigns.com/images/Photography.png",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/night1.jpg",
caption: "Night Photography"
},
{
path: "http://maialedesigns.com/Photographs/night2.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/night3.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/night4.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/night5.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/night6.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/night7.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/genre1.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/genre2.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/genre3.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/genre4.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/genre5.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/portrait1.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/portrait2.jpg",
caption: ""
},
{
path: "http://maialedesigns.com/Photographs/portrait3.jpg",
caption: ""
},
];
var currentImage = $("#lightboxImage").attr("src");
if(currentArray == "Websites"){
for(n = 0; n < oneArray.length; n++){
if(oneArray[n].path == currentImage){
if(direction =="right") {
if(currentImage == oneArray[oneArray.length-1].path){
$("#lightboxImage").attr("src", oneArray[0].path);
$("#lgihtboxCaption").html = oneArray[0].caption;
//If true, the currently displayed image is the last of the array
//Restart cycle to beginning
break;
}
else{
$("#lightboxImage").attr("src", oneArray[n+1].path);
$("#lgihtboxCaption").html = oneArray[n+1].caption;
break;
}
}
if(direction =="left") {
if(currentImage == oneArray[0].path){
$("#lightboxImage").attr("src", oneArray[oneArray.length-1].path);
$("#lgihtboxCaption").html = oneArray[oneArray.length-1].caption;
//If true, the currently displayed image is the last of the array
//Restart cycle to beginning
break;
}
else{
$("#lightboxImage").attr("src", oneArray[n-1].path);
$("#lgihtboxCaption").html = oneArray[n-1].caption;
break;
}
}
}
}
}
else if(currentArray == "Illustrations"){
for(n = 0; n < twoArray.length; n++){
if(twoArray[n].path == currentImage){
if(direction =="right") {
if(currentImage == twoArray[twoArray.length-1].path){
//If true, the currently displayed image is the last of the array
//Restart cycle to beginning
$("#lightboxImage").attr("src", twoArray[0].path);
$("#lgihtboxCaption").html = twoArray[0].caption;
break;
}
else{
$("#lightboxImage").attr("src", twoArray[n+1].path);
$("#lgihtboxCaption").html = twoArray[n+1].caption;
break;
}
}
if(direction =="left") {
if(currentImage == twoArray[0].path){
$("#lightboxImage").attr("src", twoArray[twoArray.length-1].path);
$("#lgihtboxCaption").html = twoArray[oneArray.length-1].caption;
//If true, the currently displayed image is the last of the array
//Restart cycle to beginning
break;
}
else{
$("#lightboxImage").attr("src", twoArray[n-1].path);
$("#lgihtboxCaption").html = twoArray[n-1].caption;
break;
}
}
}
}
}
else if(currentArray == "Photography"){
for(n = 0; n < threeArray.length; n++){
if(threeArray[n].path == currentImage){
if(direction =="right") {
if(currentImage == threeArray[threeArray.length-1].path){
$("#lightboxImage").attr("src", threeArray[0].path);
$("#lgihtboxCaption").html = threeArray[0].caption;
//If true, the currently displayed image is the last of the array
//Restart cycle to beginning
break;
}
else{
$("#lightboxImage").attr("src", threeArray[n+1].path);
$("#lgihtboxCaption").html = threeArray[n+1].caption;
break;
}
}
if(direction =="left") {
if(currentImage == threeArray[0].path){
$("#lightboxImage").attr("src", threeArray[threeArray.length-1].path);
$("#lgihtboxCaption").html = threeArray[oneArray.length-1].caption;
//If true, the currently displayed image is the last of the array
//Restart cycle to beginning
break;
}
else{
$("#lightboxImage").attr("src", threeArray[n-1].path);
$("#lgihtboxCaption").html = threeArray[n-1].caption;
break;
}
}
}
}
}
var arrayCaption = [
{src: "John", caption: "Smith"},
{src: "Tyler", caption: "Smith"}
]
}