I am not overly familiar with the Drupal module but it is my understanding that Pro Options should be entered into the 'Juicebox Library - Pro / Manual Config' section of your Drupal Dashboard ('Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings').
I'm not sure if this helps.

That's great to hear! Thank you for letting me know.

That's very kind of you!

Both of the elements in your screenshot (the image number and the entire caption area) can be removed only in Juicebox-Pro but not in Juicebox-Lite (the free version).

The image number can be removed by setting showImageNumber="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Caption' section).

The entire caption area can be removed by setting captionPosition="NONE" (also in JuiceboxBuilder-Pro's 'Customize -> Caption' section).

Alternatively, you could set the caption area's background to be completely transparent by setting captionBackColor="rgba(0,0,0,0)" and captionBackTopColor="rgba(0,0,0,0)" (both in JuiceboxBuilder-Pro's 'Customize -> Color' section). (Again, these configurations are supported by Juicebox-Pro but not Juicebox-Lite.)

You're welcome!

Try adding the following code to the bottom of your gallery's 'jbcore/classic/theme.css' file:

.jb-caption {
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
}

You can change the individual CSS padding values to whatever you like. Please note that you will need CSS !important to prevent the custom values being overwritten by values set internally via the JavaScript 'juicebox.js' file.

Hopefully a future 'jbcore' upgrade will solve the problem but I'll post back here if and when I have any more news on this issue.

@biped

Thank you for your suggestions.

With regard to your first suggestion, perhaps you could use one of the following ideas.

(1)
You could use the Open Image button (set showOpenButton="TRUE" in JuiceboxBuilder-Pro's 'Customize -> Lite' section) to point to your custom pages instead of the gallery images.
By default the Open Image button on the Button Bar opens the current image's imageURL in a new tab.
However, if the current image has been given a linkURL (which you can enter in JuiceboxBuilder-Pro's 'Images' tab), the Open Image button will open the linkURL instead.
Therefore, you could enter a unique linkURL for each image (pointing towards the corresponding custom page).
The linkURL entries can be relative (to the page containing the gallery's embedding code) or absolute (in the form http://www.example.com/gallery/custom.html).
You could then change the icon for the Open Image button to something more appropriate by following the instructions here.
You could also change the rollover text associated with the button using the languageList configuration option.

(2)
An alternative solution would be to use custom purchase URLs as noted here.
(This would leave the Open Image button free for its original intended purpose.)
This functionality was designed with e-commerce in mind but essentially, if an image has been given a purchaseURL (which you would need to add manually to your gallery's XML file), then the shopping cart icon will be displayed on the Button Bar and when the shopping cart icon is clicked, the purchaseURL page is opened in a new tab.
Any image which has not been given a purchaseURL will not have the shopping cart icon displayed.
You could set the purchaseURL paths to point to your custom pages and change the shopping cart icon and rollover text as required (as noted in the links in Suggestion #1 above).

(3)
A further suggestion would be to simply include a link to each image's corresponding custom page in the image captions.
You can use HTML formatting (such as <a> tags to link to other pages or documents) in image captions by following the notes in this FAQ:
How do I add HTML formatting to image captions and titles?

I hope this helps.

Unfortunately, your problem is quite difficult to troubleshoot.
Your hover image appears only when you hover over a link and the gallery's caption area appears only when you hover over the gallery.
In addition to this, the hover plugin you use seems to be using JavaScript to control the hover behavior (rather than just CSS) so enabling :hover in a browser's developer tools does not help.

A Juicebox gallery comprises many different elements, each of which is assigned an appropriate z-index value (so that the correct elements are always visible when they should be) so reducing the z-index value for the caption area alone might not work. (It might need to be lowered below a certain threshold value (in order to be stacked below your hover image) to a point where the caption area is no longer visible at all.)

I still think the best solution would be to increase the z-index value of your hover image. It has fewer components than a Juicebox gallery so, in theory, should be the easier of the two to change.

Unfortunately, I am not familiar with your hover plugin and the best source of help for finding out which of its CSS classes you would need to target with a high z-index value would be its author.

This is a long shot but at the end of your 'hover.js' file, try changing:

function hover_images(in_options)
{
    var elements = domLib_getElementsByTagNames(['img'], true);
    for (var i = 0; i < elements.length; i++)
    {
        var title = hover_image_map[elements[i].src];

        if (undefined != title)
        {
            elements[i].title = title;
        }
    }
}

... to:

function hover_images(in_options)
{
    var elements = domLib_getElementsByTagNames(['img'], true);
    for (var i = 0; i < elements.length; i++)
    {
        elements[i].style.zIndex = '10000';
        var title = hover_image_map[elements[i].src];

        if (undefined != title)
        {
            elements[i].title = title;
        }
    }
}

I do not know if this will work but it might be worth trying.

Juicebox-Lite has a limit of 50 images per gallery. Juicebox-Pro does not have a limit to the number of images you can have in a gallery. It sounds like you have not updated the Drupal module to use your Juicebox-Pro files.

Follow the 'Installation' instructions here: https://www.drupal.org/node/2000300#installation
... and make sure that you use the 'jbcore' folder from the Juicebox-Pro download zip package.

If you continue to experience difficulties, please post back with the URL to your gallery's web page so that I can take a look at the problem and hopefully help further.

Looking at your screenshots, it looks like the caption area is visible in both horizontal and vertical modes. It's just the layout which (almost) hides the problem in vertical mode. You can see the top of the caption area overlapping the lower part of your image frame. The rest of the caption area just overlaps the gallery background so the problem cannot be seen in this area.

captionBackTopArea has a different default value for Small Screen Mode: rgba(0,0,0,0.3) instead of rgba(0,0,0,0).
However, explicitly setting it to rgba(0,0,0,0) does not seem to help.

This certainly looks like a bug. I'll notify the developers.

In the meantime, a suitable workaround should be to set captionBackTopColor to a fully transparent color other that black, as well as setting captionBackColor="rgba(0,0,0,0)". For example:

captionBackColor="rgba(0,0,0,0)"
captionBackTopColor="rgba(255,0,0,0)"

I hope this works OK.
Thank you for reporting this problem.

The z-index for your menu is not quite high enough. It is currently set to 100 (in your 'slidingdoors-2.css' file) but it needs to be greater than 500 in order to be stacked on top of the gallery when a visitor hovers over a menu entry which overlaps the gallery.

This is exactly the issue that I first saw and that my code above should fix.
As I mentioned, I tried the code in Firefox's developer's tools (setting z-index: 9999; dynamically on the #dropmenuexp.dropmenudiv_c container) and it solved the problem.

Please try adding the code to your web page and then clear your browser's cache before reloading your web page.
Be sure to add the code to the end of your web page's <head> section (so that it is not overwritten by the menu's own CSS).
If in any doubt, try adding CSS !important as follows:

<style type="text/css">
    #dropmenuexp.dropmenudiv_c {
        z-index: 9999 !important;
    }
</style>