here is the way the gallery is put together - the css for this is in ff.css

build-array.php

<?php

/* instead of this build array of images from the secondary images */
$dir    = $_SERVER['DOCUMENT_ROOT'] . '/sites/default/files/path/to/images/';
$files1 = scandir($dir);
/* instead of this build array of images from the secondary images */

$imgArr = array();

foreach ($files1 as $key => $file) {
  if (strpos($file, 'jpg') !== false || strpos($file, 'png') !== false || strpos($file, 'gif') !== false) {
    array_push($imgArr, '/sites/default/files/path/to/images/'.$file);
  }
}

$imgArr = json_encode($imgArr);
?>

<div id="media-overlay" class="hidden">
    <div id="media-overlay-content">
        <section>
            <a id="close" class="close"><i class="fa fa-times-circle-o" aria-hidden="true"></i></a>
        </section>
        <section class="offset90">
            <div id="imageWrap"></div>
        </section>
        <section class="offset40 bottomRight">
            <a id="next" class="next"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
            <a id="prev" class="prev"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
        </section>
    </div>
</div>

<script>
<?php print 'var images ='.stripslashes($imgArr).';'; ?>
var webpages = [];
  for (var i = 0; i < images.length; i++) {
  webpages.push({
    'id':i,
    'img':'https://www.nhm.org'+images[i]
  });
}
</script>

<script type="text/javascript" src="/site/sites/all/themes/zen_nhm_theme/js/ff.js?b"></script>

ff.js

var body = document.querySelector("body"),
    image = document.getElementById("imageWrap"),
    titles = document.getElementById("title"),
    sitinfo = document.getElementById("description"),
    link = document.getElementById("link"),
    c = 0,
    close = document.getElementById("close"),
    next = document.getElementById("next"),
    prev = document.getElementById("prev"),
    back = document.getElementById("background-content"),
    preloadImages = function(srcs, imgs, callback) {
        var img;

        var remaining = srcs.length;
        for (var i = 0; i < srcs.length; i++) {
            img = new Image;
            img.onload = function() {
                --remaining;
                if (remaining <= 0) {
                    callback();
                }
            };
            img.src = srcs[i];
            imgs.push(img);
        }
    };

var images = [];
var imageSrcs = [];

for (var i = 0; i < webpages.length; i++) {
    imageSrcs.push(webpages[i].img);
}

//preloadImages(imageSrcs, images, function() {
//    image.style.backgroundImage = 'url(' + webpages[0].img + ')';
//});

window.onload = function() {
    preloadImages(imageSrcs, images, function() {
        image.style.backgroundImage = 'url(' + webpages[0].img + ')';
    });
};

next.addEventListener('click', function(event) {
    c++;
    if (c >= webpages.length) {
        c = 0;
    }
    for (var i = 0; i < webpages.length; i++) {
        if (webpages[i].id === c) {
            image.style.backgroundImage = 'url(' + webpages[i].img + ')';
        }
    }
    return false;
});

image.addEventListener('click', function(event) {
    c++;
    if (c >= webpages.length) {
        c = 0;
    }
    for (var i = 0; i < webpages.length; i++) {
        if (webpages[i].id === c) {
            image.style.backgroundImage = 'url(' + webpages[i].img + ')';
        }
    }
    return false;
});

prev.addEventListener('click', function(event) {
    c--;
    if (c <= 0) {
        c = webpages.length - 1;
    }
    for (var i = 0; i < webpages.length; i++) {
        if (webpages[i].id === c) {
            image.style.backgroundImage = 'url(' + webpages[i].img + ')';
        }
    }
    console.log(c, webpages.length);
    return false;
});

document.getElementById("close").addEventListener('click', function(event) {
    body.className = body.className.replace(new RegExp('(?:^|\\s)' + 'show-media-overlay' + '(?:\\s|$)'), ' ');
    return false;
});

document.getElementById('showGallery').addEventListener('click', function(event) {
    body.className += " show-media-overlay";
    return false;
});