I notice that you have two Juicebox galleries embedded in your web page.
When embedding multiple Juicebox galleries, the 'juicebox.js' file should be loaded only once per page rather than once per gallery (and your page currently loads the 'juicebox.js' file twice).

Try removing the following line of code from your page (and clear your browser's cache before reloading your web page) to see if this helps:

<script src="img/fishkill/jbcore/juicebox.js"></script>

You're welcome. I'm glad you've got it working.
Thank you for letting me know.

It's probably by design (by Apple) due to the iPad having a larger screen than the iPhone and, therefore, being able to display more information without having to hide the address bar to give the page content as much space as possible.
Unfortunately, I do not have an iPad on which to test so this is just speculation on my part, although this seems to be the general consensus of opinion in this (old) Apple forum thread: https://discussions.apple.com/thread/5528272

Are your iPad and iPhone running the same version of iOS? (What version is it?)
Apple have changed the way Mobile Safari works (with regard to full screen content and hiding toolbars) several times over the years.
For example, they introduced the 'mimimal-ui' viewport property in iOS 7 and removed it from iOS 8. (Try a web search for 'Apple minimal-ui' for more information.)

Also, it might help to know if you are referring to a full-browser Juicebox gallery page (a 100% x 100% gallery with no other content) or a web page with an embedded Juicebox gallery and other content (including vertical scrollbars).
Try viewing both types of pages (and also a page not containing a Juicebox gallery) to see if what you are reporting happens with all page types.

I suspect it's just the way that Mobile Safari works on the iPad, though.

That's right. As of v1.5.0, the Juicebox configuration fie can be JSON instead of XML (noted in this blog post).

It looks like you were just about there... just change your "image" to "images".

Here's a sample JSON configuration file to show the format required:

{
    "useFlickr": "FALSE",
    "galleryTitle": "Gallery Title",
    "textColor": "rgba(255,255,255,1.0)",
    "thumbFrameColor": "rgba(255,255,255,0.5)",
    "showOpenButton": "TRUE",
    "showExpandButton": "TRUE",
    "showThumbsButton": "TRUE",
    "useThumbDots": "TRUE",
    "useFullscreenExpand": "TRUE",
    "images":[
        {
            "imageURL": "images/IMG_0386.jpg",
            "thumbURL": "thumbs/IMG_0386.jpg",
            "linkURL": "images/IMG_0386.jpg",
            "linkTarget": "_blank",
            "title": "IMG_0386",
            "caption": "Caption Text"
        },
        {
            "imageURL": "images/IMG_0156.jpg",
            "thumbURL": "thumbs/IMG_0156.jpg",
            "linkURL": "images/IMG_0156.jpg",
            "linkTarget": "_blank",
            "title": "IMG_0156",
            "caption": "Caption Text"
        },
        {
            "imageURL": "images/IMG_0214.jpg",
            "thumbURL": "thumbs/IMG_0214.jpg",
            "linkURL": "images/IMG_0214.jpg",
            "linkTarget": "_blank",
            "title": "IMG_0214",
            "caption": "Caption Text"
        }
    ]
}

Just be sure to name your JSON file with a .json file extension and point towards it in your gallery's embedding code using the configUrl configuration option, such as:

configUrl: "config.json"

I'm glad you've got it working.

You're welcome!

You're welcome.
I'm glad the workaround is a suitable solution until the bug is fixed.

Unfortunately, Juicebox-Pro does not support mouse wheel scrolling.

Juicebox-Pro was written from the ground-up (and is not just SimpleViewer-Pro ported to HTML 5).
As such, the two applications do not feature exactly the same functionality and there are not always direct translations between SimpleViewer-Pro's configuration options and those of Juicebox-Pro.
Please see this SimpleViewer blog entry for more information on the differences between SimpleViewer and Juicebox.

You might like to post your idea in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
I do not know the likelihood of any suggestions being implemented but this is certainly the best place for all ideas.
Thank you.

Otherwise, you could perhaps implement mouse wheel functionality manually using JavaScript and the Juicebox-Pro API (to determine the current image, the total number of images in the gallery and to show the previous or next image in the gallery when the mouse wheel is scrolled).
To see this in action, create a sample gallery in JuiceboxBuilder-Pro and use the following HTML code as the gallery's 'index.html' file. If you want to be able to loop through the images (rather than stop at the first and last images), set var loop = true;.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    var jb = new juicebox({
        containerId: 'juicebox-container'
    });
    // Run following when gallery is ready
    jb.onInitComplete = function() {
        // Wheel handler function
        function wheelHandler(e) {
            var current = jb.getImageIndex(); // Get current image index number
            var loop = false; // Set to 'true' to loop through images with mouse wheel 
            if (e.deltaY > 0) { // If mouse wheel is scrolled down...
                if (current > 1) {
                    jb.showImage(current - 1); // Show previous image in gallery
                } else {
                    if (current === 1 && loop) {
                        jb.showImage(maximum); // Show last image if currently displaying first image and looping is enabled
                    }
                }
            }
            if (e.deltaY < 0) { // If mouse wheel is scrolled up...
                if (current < maximum) {
                    jb.showImage(current + 1); // Show next image in gallery
                } else {
                    if (current === maximum && loop) {
                        jb.showImage(1); // Show first image if currently displaying last image and looping is enabled
                    }
                }
            }
        }    
        var maximum = jb.getImageCount(); // Get total number of images in gallery
        document.getElementById('juicebox-container').addEventListener('wheel', wheelHandler); // Add 'wheel' event function
    };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

I've tested this in Chrome, Edge and Firefox and it seems to work well.

Thank you for reporting this problem.
It looks like the problem happens when the image is dynamically cropped to fill the viewport. If the entire width of the image is visible, the problem cannot be seen.
I have logged a bug report with the developers and it should hopefully be fixed in the next version.
In the meantime, a workaround would be to set the image navigation position to be relative to the stage rather than the image by setting imageNavPosition="STAGE" (in JuiceboxBuilder-Pro's 'Customize -> Main Image section').

Thank you for sharing your code.
Hopefully it will help others who want to achieve the same thing (to hide navigation buttons in the combination of Large Screen Mode and Touch Input Mode).

That's correct. Instead of saying "in Small Screen Mode/Touch Input Mode" I should probably have said "in Small Screen Mode and Touch Input Mode (the combination used on an iPhone which you referred to)".

For other users reading this thread, more information about Screen and Input Modes can be found in the Gallery Tour.

I'm not sure if you are specifically referring to thumbnail or main image navigation buttons but the current configuration options which change the visibility of the navigation buttons are:
showImageNav (which affects the main image nav buttons in both Small and Large Screen Modes) HOVER/ALWAYS/NEVER
showSmallThumbNav (which shows or hides the thumbnail nav buttons in Small Screen Mode) - TRUE/FALSE

Unfortunately, there's no configuration option available which would allow you to change the visibility of the navigation buttons for a specific Input Mode.

If you wanted to try to hide navigation buttons when they would normally be visible (for example), then you could perhaps detect which Screen Mode is currently being used (via the Juicebox-Pro API getScreenMode() method) and then implement some custom CSS and JavaScript to override Juicebox-Pro's own handling of the nav button visibility.
This might be fraught with difficulty (there are often unforeseen knock-on problems with such modifications) and I would not recommend it but you are free to try it if you like.
Please note that there is no Juicebox-Pro API method to determine which Input Mode is currently being used. You'd need to write your own routine to detect whether a touch screen is in use (if you wanted to).

Thank you for posting your suggestion in the Feature Requests forum thread.
It will certainly be seen by the developers there.

It looks like your gallery's Splash Page image is being squashed by the following custom CSS code from line 154 of your 'style.css' page:

.content-box .item img{display: block;width: 100% !important;height: auto;-webkit-transition: all .5s ease; /* Safari and Chrome */-moz-transition: all .5s ease; /* Firefox */-ms-transition: all .5s ease; /* IE 9 */-o-transition: all .5s ease; /* Opera */transition: all .5s ease;}

... specifically the width: 100% !important; entry.
This custom CSS rule is being applied to all <img> tags within .content-box .item (which is where your gallery is) including those in your gallery.
Normally, Juicebox center-crops the Splash Page to fill the viewport but your custom CSS overrides this and forces the image to be displayed with 100% width no matter what size the Splash Page is.

First of all, try removing !important from width: 100% !important; to see if this helps. (This might be all that is required to solve your problem.)

You could also target your custom CSS to only those elements on your web page that require them using further CSS selectors.

Another possible solution might be to use the following CSS:

.jb-splash-holder img {
    width: auto !important;
}

Add it to your web page after your 'style.css' file is loaded (maybe at the end of your gallery's 'jbcore/classic/theme.css' file) so that it is used in preference to your own custom CSS for the Splash Page image.

The only problem I can think of at the moment is that your PNG image will not be scaled when navButtonIconSize is used.

However, if navButtonIconSize is used, then the navigation button background (the semi-transparent grey circle) will be scaled and, if it is large enough, it will become visible behind your PNG image.
To counteract this, you can make the navigation button background completely transparent by setting navButtonBackColor="rgba(0,0,0,0)" (in JuiceboxBuilder-Pro's 'Customize -> Color' section).

Otherwise, as long as your PNG image looks OK in both Small Screen Mode and Large Screen Mode, I do not see any other obvious problems or pitfalls.