This creates a multidimensional array of IDs and src tags from thumbnail images on a page so that when they are clicked on a larger image surrounded in a lightbox appears. It also handles previous/next navigation through the images. Live example at: http://whitetailhabitatconsulting.com/gallery.html

lightbox.js

function buildArray(){
    //build array containing images IDs
    var myArray = [];
    myArray[0] = [];
    myArray[0][0] = [];
    var i = 0;
    $('.img-responsive').each(function(){
            myArray[0].push($(this).attr('id'));
            myArray[0][0].push($(this).attr('src'));
    });
    console.table([(myArray[0])]);
    console.table([(myArray[0][0])]);
    return myArray;
}

function compareID(imgID,obj){
    var id = imgID;
    var imgObj = obj;
    console.log('in compareID');
    //loop through array, get ID of clicked image and get its src
    
    if(jQuery.inArray(id, imgArr[0]) != -1){
        var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)
        root.setAttribute( 'class', 'lb-toggle' )
        var image = imgObj;
        //get src attribute of img clicked
        var imgSrc = $(imgObj).attr("src");
        console.log('source of image clicked = '+imgSrc);
    }
}

function buildLightbox(id,iSrc){
    var imgSrc = iSrc;
    var id = id;
    //remove any pre existing images 
    $('#lbAnchor').children().remove();
    //set position lightbox appears on page
    var dist = $(document).scrollTop() - 34;
    console.log($(document).scrollTop());

    //create lightbox container
    var lbOverlay = $( "<div id='' style='margin-top:"+dist+";' class='lb-Overlay'><div class='navContainer'><span class='icn-prev'>Previous Image</span><span class='icn-nxt'>Next Image</span><span class='icn-close'>Close X</span></div></div>" );
    $('#lbAnchor').prepend(lbOverlay);
    //insert larger verison of thumbnail image clicked over lbOverlay
    $(lbOverlay).append("<img class='img-responsive lb-image' id='"+id+"' alt='' src='"+imgSrc+"'>");
    //call function listing for nav clicks
    watchForClick(id, lbOverlay);
}

function watchForClick(imgID,overlay){
    var id = imgID;
    var lbOverlay = overlay;
    //if next image is clicked
    $('.icn-nxt').click(function() {
        console.log('next clicked!');
        var i;
        for (i = 0; i < imgArr[0].length; ++i) {
            // do something with `substr[i]`
            if(imgArr[0][i] == id){
                //find this place in array and add one
                console.log("position in array ="+imgArr[0][i]);
                
                var nextID = imgArr[0][($.inArray(imgArr[0][i], imgArr[0]) + 1) % imgArr[0].length];
                var nextSrc = imgArr[0][0][($.inArray(imgArr[0][0][i], imgArr[0][0]) + 1) % imgArr[0][0].length];
                console.log('next id val = '+nextID);
                console.log('next id val = '+nextSrc);
                
                //get source that goes with this id
                var iSrc = imgArr[0][0][i];

                buildLightbox(nextID,nextSrc);
            }
        }
    });
    $('.icn-prev').click(function() {
        console.log('previous clicked!');
        console.log('current ID = '+id);
        var i;
        for (i = 0; i < imgArr[0].length; ++i) {
            // do something with `substr[i]`
            if(imgArr[0][i] == id){
                //find this place in array and add one
                console.log("position in array ="+imgArr[0][i]);
                
                var prevID = imgArr[0][($.inArray(imgArr[0][i], imgArr[0]) - 1) % imgArr[0].length];
                var prevSrc = imgArr[0][0][($.inArray(imgArr[0][0][i], imgArr[0][0]) - 1) % imgArr[0][0].length];
                console.log('next id val = '+prevID);
                console.log('next src val = '+prevSrc);
                
                //get source that goes with this id
//                var iSrc = imgArr[0][0][i];

                buildLightbox(prevID,prevSrc);
            }
        }
    }); 
    //if close icon is clicked
    $('.icn-close').click(function() {
        var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)
        $(root).removeClass('lb-toggle');
        $(lbOverlay).detach();

    });
}
$('.img-responsive').click(function() {

    
    //get the clicked image id
    var id = this.id;
    var imgObj = $(this);
    console.log('id of image clicked = '+id);
    var imgSrc = $(imgObj).attr("src");
    compareID(id,imgObj);
    buildLightbox(id,imgSrc);
    
});

var imgArr = buildArray();