You currently have two lots of embedding code (the new juicebox() section) on your web page (the code from my example above and your original code) and your original gallery is the one which is initially being loaded into the 'juicebox-container' div on your web page, essentially overriding the gallery from my example. You would need to integrate your own gallery into the rest of the code from my example. Also, your web page currently loads the 'juicebox.js' file after the custom JavaScript code. Try loading the 'juicebox.js' file before the custom JavaScript code.
Try the following in your web page as your complete embedding code:
<script src="/wp-content/uploads/juicebox/journalism/jbcore/juicebox.js"></script>
<script type='text/javascript'>
var fii = 1;
var sm = 'AUTO';
var thresholdWidth = 600;
var jb;
function loadGallery(fii, sm) {
jb = new juicebox({
baseUrl : "/wp-content/uploads/juicebox/journalism/",
containerId : "juicebox-container",
galleryWidth : "100%",
galleryHeight : "100%",
backgroundColor: "#000000",
firstImageIndex: fii,
screenMode: sm
});
}
function setScreenMode() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var mode = windowWidth < thresholdWidth ? 'SMALL' : 'LARGE';
if (sm !== mode) {
sm = mode;
fii = jb.getImageIndex();
loadGallery(fii, mode);
}
}
$(document).ready(function() {
$(window).resize(setScreenMode);
loadGallery(fii, sm);
setTimeout(function() {
sm = jb.getScreenMode();
if (sm === 'LARGE') {
setScreenMode();
}
}, 500);
});
</script>
<div id="juicebox-container"></div>Hopefully this will help.