灯箱Javascript标题

Question

我的灯箱标题存在问题。我想用我当前的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"}
]
}