The default value for showSmallPagingText is TRUE (noted on the Config Options page).

If, when you first open JuiceboxBuilder-Pro, you do not change a configuration option, JuiceboxBuilder-Pro will not write the option's default value to the gallery's 'config.xml' file (to save cluttering up the file with hundreds of entries) and Juicebox-Pro will use the default value when the gallery is displayed.

If there is no entry for showSmallPagingText in the gallery's 'config.xml' file, then Juicebox will use this option's default value of TRUE and you'll see the thumbnail paging text when the gallery is displayed in Small Screen Mode.

I think this might be what you are experiencing.

I have checked that JuiceboxBuilder-Pro is writing correct values to the 'config.xml' file and cannot find an error.
Correct values (corresponding to the interface input fields) are written to the file (but default values are not always entered).

I hope this helps somewhat.

If you have a gallery which does not behave as expected, then please post a link so that I can investigate further.
Likewise, if you have a set of steps that I can use to reproduce an error with JuiceboxBuilder-Pro, please let me know.

To summarize...

• showPagingText="TRUE" will always show the thumbnail paging text when the gallery is displayed in Large Screen Mode. The default value for showPagingText is FALSE.

• showSmallPagingText="TRUE" will always show the thumbnail paging text when the gallery is displayed in Small Screen Mode. The default value for showSmallPagingText is TRUE.

• If a configuration option is not explicitly written to a gallery's 'config.xml' file, then Juicebox will use the default value for that option.

Also, just to clarify, you mention "LargeScreen Mode in mobile browser" and "LargeScreen Mode on mobile devices with screens smaller than 1024px". The only way that Juicebox will be displayed in Large Screen Mode on mobile devices with small screens is if you set screenMode="LARGE". If the gallery is truly in Large Screen Mode, then showPagingText will be active (and showSmallPagingText will be ignored), regardless of the device or browser window size.

You'll need to use an http:// absolute path (not ftp://) to your gallery's 'index.html' file as the 'src' attribute of your iframe.
Once you've uploaded your gallery folder to your web server, find out the URL that you need to use to view the gallery's 'index.html' page in your browser. This is what you should use for the 'src' attribute of your iframe. If you are not sure what this URL is, your web host should be able to help you out.
It looks like it might be something like http://madagascar14.byethost7.com/Little Manor/Galleries/index.html but this doesn't work. (I don't know what domain and subdomain your account uses but your web host should be able to tell you if you don't know.)

Your iframe should look something like this:

<iframe src="http://www.example.com/Little Manor/Galleries/index.html" width="1200" height="660" frameborder="0" scrolling="no"></iframe>

If you allowed JuiceboxBuilder-Pro to create all image sizes for a Multi-Size Image gallery, then (as you are aware), no gallery images would contain metadata unless any of the source images are already within the maximum bounds of an image size and do not need to be resized (in which case they would be copied across to the gallery folder unmodified with their metadata intact).

Perhaps the easiest thing to do would be to create a Multi-Size Image gallery with JuiceboxBuilder-Pro so that all the smallImageUrl and largeImageUrl entries are present in the gallery's 'config.xml' file.
All you'd then need to do is create your own Small, Medium and Large images (in an imaging program such as Adobe Photoshop) and then replace the images in the 'images' (Medium), 'images/small/' (Small) and 'images/large/' (Large) folders.
(Images for each size should have the same filename. Each image size is stored in a different folder to avoid file name collisions.)

At least all the smallImageUrl and largeImageUrl entries would be generated for you.
This would be a step in the right direction over having to create a Multi-Size Image gallery from scratch manually.

If you resize your images prior to using JuiceboxBuilder, just deselect the 'Resize Images' checkbox (on the 'Images' tab) and drag and drop the images into the 'Add Images' box as normal.
When you 'Save' the gallery on the 'Publish' tab, Juicebox will copy the images (without modification) to the gallery's 'images' folder (and will still create thumbnails from them in the gallery's 'thumbs' folder) and will populate the 'config.xml' configuration file with the correct paths (to the images and thumbnails in their respective folders).

Please double-check that the configuration options for all your galleries are exactly the same as each other.
It sounds like there might be a difference between your galleries which is causing your problem.

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 for myself and hopefully help further. Thank you.

I'm still not sure what the root of the problem is but as neither of us can replicate the problem in a standalone gallery or stripped back test case, I can't help but think that the surrounding code on your web page must somehow be contributing to the problem.

I'm glad you've found a workaround. Thanks for sharing.

It's interesting that I only ever saw the problem (occassionally) in Chrome and IE11 and that you've never seen the problem on any mobile device. Maybe we can keep an eye on browser updates to see if this somehow solves the problem in the future without any further action.

Once again, I appreciate you keeping this thread up to date with your progress.
If I can reproduce the problem and create a bug report that the developers can work with, I'll certainly do so but, at the moment, the problem seems to be present only in your web site (no other users have reported this issue) and only in certain desktop browsers. It's a tricky one to troubleshoot for sure.

The best way to tackle it would probably be to copy your web page (to create a test environment) and then remove elements (external CSS and JavaScript) one by one until the problem no longer occurs and you find the cause of the problem. However, as you've found a workaround, I would understand if you'd rather just leave things as they are.

Only images that are larger than the maximum image bounds (set on the 'Images' tab) will be resized by JuiceboxBuilder (losing their metadata). Images that are already within the maximum image bounds (and do not need to be resized) will simply be copied across to the output 'images' folder (retaining their metadata).
This might account for what you are seeing.

I see the problem in your gallery occasionally (but not always) in Chrome 56 and IE11 (but I've not seen the problem in Edge, Firefox 51.0.1 or Opera 42).
However, I have been unable to reproduce the problem in a test gallery of my own (using the same configuration options that your gallery uses and using your custom theme).
It looks like it might be a difficult problem to troubleshoot.

It looks like it might be some kind of timing problem. Juicebox might be positioning the Button Bar at the top of the page before knowing that the thumbnails are there. If this is the case, then it's certainly strange that I cannot reproduce the problem myself.

Try taking the gallery out of your web page and make it a standalone gallery (with no other content on its page) to see if this makes a difference and to see if the code on your web page is somehow contributing to your problem.
Also, it would be easier to troubleshoot a standalone gallery (with no external influences) and figure out which combination of configuration options is causing the problem (if, indeed, this is the cause).

Try also using the stock 'theme.css' file just in case any of your custom CSS is interfering. It doesn't look like it is but the more we can strip back, the more we can eliminate as being a possible cause.

I do not see any custom CSS on your web page which should be interfering with your gallery's Button Bar position but I might be missing something so have a look and see if you can find any custom CSS which the gallery might be inheriting.

Being that it looks to me like a timing problem, you might also like to try changing internal timings (such as displayTime and imageTransitionTime) to see if this helps.

Also, for testing purposes, try adding a delay before the loading of the gallery when the 'Foto's' link is clicked.
I'm not sure what this will tell us but it's something I would try out of interest.

I realise that the suggestions above might not be ultimate solutions but they might at least help to track down the cause of the problem and, if it turns out to be a bug in Juicebox, I can at then log a bug report with the developers.

Thank you.

You're welcome.

I've just noticed that my JavaScript code above does not work for a 100% x 100% gallery with no other content on the page. I have amended the code in the posts above to work for all gallery sizes.

You shouldn't get a flash of the image using the JavaScript solution (the two suggestions were not intended to be used together) but, agreed, it's not the most elegant solution.

Here's a slightly better JavaScript version which minimizes the delay by looking out for the 'jb-dialog-login-form' container to appear in the DOM and applying the background-image to it as soon as it is ready. (It relies on your gallery container being named 'juicebox-container' but you can change this if you like.)

<script type="text/javascript">

    $(document).ready(function() {

        var flag1 = false, flag2 = false;

        var observer = new MutationObserver(function(mutations, instance) {
            if (!flag1 && $('.jb-flag-fullscreen').length) {
                $('html').css('height', '100%');
                flag1 = true;
            }
            if (!flag2 && $('#jb-dialog-login-form').length) {
                $('#jb-dialog-login-form').css('background', 'initial');
                $('#jb-dialog-login-form').parent().css('background-image', 'url("images/background.jpg")');
                flag2 = true;
            }
            if (flag1 && flag2) {
                instance.disconnect();
            }
        });

        var juicebox = document.getElementById('juicebox-container');

        observer.observe(juicebox, {
            childList: true,
            subtree: true
        });    

    });

</script>

Perhaps you'd like to suggest this as an idea for a future version 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.

You're welcome.
I'm glad I was able to point you in the right direction and that you've been able to resolve your problem.
Thank you for posting back to let me know.

It looks like your gallery is embedded correctly and is actually working OK.
The problem seems to be with the visibility of the gallery on your page. (The gallery is working fine, you just can't see it.)
Taking a look at your page with my browser's developer tools, your <div class="field-items"> container (one of the gallery's parent containers) has zero width (so nothing in the container is visible).
I'm not sure why this might be but I hope it points you in the right direction.

Also, I notice that there are some HTML errors (unclosed elements and stray end tags) on your web page which might cause problems for browsers determining where containers start and end, resulting in CSS rules being applied in unexpected places.
You can check your web page for HTML errors with the W3C Markup Validation Service and then fix the errors reported.
I do not know how much manual code you use on your web page (or if it is all generated automatically by Drupal) so I do not know how easy it might be to fix the HTML errors. However, trying a different theme (even temporarily for testing purposes) might help.

I hope these notes help.