Re: Can I stop captions, titles, etc, from disappearing?

I hve done as you suggested and made a post on that other forum thread.

Thanks!

Sorry, it looks like I might have made a typing error the first time I tried this. I've just tested this again and it all works fine.

Thank you for letting me know. At least there is no problem in adding   entries to image titles or captions.

With any luck, most users will view my galleries with Javascript enabled...

In this day and age, I think there are very few users browsing the web without JavaScript enabled.
Here's an interesting read: https://blockmetry.com/blog/javascript-disabled

27 (edited by haggis999 2018-04-11 13:27:01)

Re: Can I stop captions, titles, etc, from disappearing?

Thanks for that link showing how few users disable Javascript. I will stop worrying about them!

I now need only one more thing to make my Juicebox Pro gallery match the capabilities of my old Flash-based gallery. This is a way to make a set of six galleries automatically display one after the other on a permanent loop, assuming that Autoplay is in effect. At present, the user has to manually select each gallery in turn, as you can see via the link I provided in an earlier post (#23).

Can you point me towards any existing solutions for this requirement?

Re: Can I stop captions, titles, etc, from disappearing?

This might not be an easy task to achieve (and I do not know of anyone who has done this).

You could certainly use the Juicebox-Pro API to detect when the last image in the gallery has been reached and then run whatever custom JavaScript code you like.

var jb = new juicebox({
    containerId: "juicebox-container"
});
jb.onInitComplete = function() {
    var count = jb.getImageCount();
    jb.onImageChange = function(e) {
        if (e.id === count) {
            alert('Last image in gallery has been reached.');
        }
    };
};

You'd just need to change the JavaScript alert for a command to load your next gallery page, for example:

window.location.href = 'https://www.example.com/index.html';

Unfortunately, there is no API method to check (or track) the current AutoPlay status so that only way to detect if AutoPlay is on or off is to check if the 'jb-status-playing' CSS class is present on the 'jb-bb-button-auto-play' CSS class.

var jb = new juicebox({
    autoPlayOnLoad: "TRUE",
    containerId: "juicebox-container",
    showAutoPlayButton: "TRUE"
});
jb.onInitComplete = function() {
    var count = jb.getImageCount();
    jb.onImageChange = function(e) {
        if (e.id === count && $('.jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) {
            alert('Last image in gallery has been reached via AutoPlay.');
        }
    };
};

You could then add a delay (ideally the same as the Juicebox-Pro displayTime value) to allow the last image to be seen before loading the next gallery.

var jb = new juicebox({
    autoPlayOnLoad: "TRUE",
    containerId: "juicebox-container",
    showAutoPlayButton: "TRUE"
});
jb.onInitComplete = function() {
    var count = jb.getImageCount();
    jb.onImageChange = function(e) {
        if (e.id === count && $('.jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) {
            window.setTimeout(function() {
                alert('Last image in gallery has been reached and 5000ms have elapsed.');
            }, 5000);
        }
    };
};

There might be some further pitfalls to avoid and tweaking to do but I hope that this points you in the right direction.

29 (edited by haggis999 2018-04-12 14:12:14)

Re: Can I stop captions, titles, etc, from disappearing?

Many thanks for that detailed reply, Steven. At present, my Javascript skills are rather limited and it's been a few years since I messed with any Javascript coding, but I will have a go at this once I have reminded myself of some of the basics.

I have just noticed a quirk when my current set of galleries (ref link on post #23) is viewed on an iPhone. When the splash screen is first displayed, I am given a default 'VIEW GALLERY' option to view the first gallery. It also shows my menu for selecting any one of my six galleries. If I take the default option, it opens up in slideshow mode with AutoPlay turned on, as per the setting in all my config.xml files. However, if I select the same or any other gallery from my menu then 'VIEW GALLERY' opens up a matrix of thumbnails, leaving the user to guess how to start the slideshow. Tapping the first thumb takes you to the slideshow display, but with AutoPlay turned off.

That raises two questions.

  • Why does the default 'VIEW GALLERY' option (shown via my jbgallery.html page) generate a different result than my menu selections when they all invoke the same set of index.html files?

  • Why is my AutoPlay setting frequently being ignored in small screen mode?

Re: Can I stop captions, titles, etc, from disappearing?

I think both your questions are related to each other (at least by the root cause).

The main difference between your 'JBGallery.html' page and your 'JBGallery1/index.html' page is that your 'JBGallery1/index.html' page locks the viewport (with the following line of code):

<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />

... whereas your 'JBGallery.html' page does not.

This results in the gallery being expanded from the Splash Page differently on the two embedding pages.
From 'JBGallery.html', the gallery is expanded on a new page of its own.
From 'JBGallery1/index.html', because the viewport is locked, the gallery is expanded on top of the embedding page.
(Please see the Expand Gallery Behavior support section for details.)

This explains the difference between the two pages but not why the galleries expand with different layouts.
Unfortunately, the problem seems to be due to a known bug (whereby the page that the gallery is expanded into has a bearing on how the gallery is displayed) that the developers are aware of but have not yet been able to fix.

Until the bug is fixed, possible workarounds are as follows:
(1) Set showSmallThumbsOnLoad="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section).
... or:
(2) Remove the viewport lock from your gallery pages.

I have sent a further note to the developers regarding this problem.
Thank you for reporting the problem and apologies for any inconvenience caused.
Hopefully one of my suggested workarounds will work for you until the bug is fixed.

31 (edited by haggis999 2018-04-19 22:44:11)

Re: Can I stop captions, titles, etc, from disappearing?

Is there any way to turn off the translucent horizontal background of the caption bar that can partially obscure the main image in Small Screen Mode?

I would prefer it if only the caption and title text overlaid the image, which is what happens in Large Screen Mode.

Re: Can I stop captions, titles, etc, from disappearing?

You can make the caption area's background fully transparent by setting the Opacity to '0' for both the Caption Back Color and the Caption Back Top Color (in JuiceboxBuilder-Pro's 'Customize -> Color' section).

If manually editing your gallery's 'config.xml' file, set captionBackColor="rgba(0,0,0,0)" and captionBackTopColor="rgba(0,0,0,0)".

Please note that Juicebox-Pro uses only one captionBackColor and captionBackTopColor gallery-wide so the values you set will be used in both Small Screen Mode and Large Screen Mode.

33 (edited by haggis999 2018-04-20 13:44:29)

Re: Can I stop captions, titles, etc, from disappearing?

Thanks, Steven. That fixes my problem in Small Screen Mode.

My previous (default) setting was captionBackColor="rgba(34,34,34,0.3)", whose effect was much less obvious in Large Screen Mode, where the caption background graduates upwards to full transparency (I didn't even see this background until I looked for it). In Small Screen Mode, this graduated effect does not appear to be present, thus creating a clearly obvious caption bar background.

Re: Can I stop captions, titles, etc, from disappearing?

captionBackTopColor is actually the only configuration option which has different default values for Large Screen Mode (rgba(0,0,0,0)) and Small Screen Mode (rgba(0,0,0,0.3)) so if you do not change captionBackTopColor in JuiceboxBuilder-Pro's interface, a captionBackTopColor value will not be written to the gallery's configuration file and the two default values will be used (which, when combined with the default value for captionBackColor, gives a gradient background in Large Screen Mode and a solid background in Small Screen Mode).

If you want to ensure that a single captionBackTopColor is used in both screen modes, then change its color or opacity slightly from its default value. This will ensure that a captionBackTopColor entry is written to the gallery's 'config.xml' file and the chosen value will be used in both Large Screen Mode and Small Screen Mode. Then, to remove the gradient, set captionTopColor to exactly the same color and opacity as you've used for captionBackTopColor.

Re: Can I stop captions, titles, etc, from disappearing?

I had previously ignored captionBackTopColor, as I just assumed (wrongly) that it referred to some option for placing the caption at the top of the screen. However, thanks to your explanation, I now understand that is actually associated with background gradient control. Juicebox is an impressively customisable application!

BTW, I still haven't got around to trying out your proposed solution for autoplaying multiple galleries, but I have been getting a little more acquainted with Javascript and the Juicebox Pro API. Using getScreenMode(), my custom gallery menu HTML code is now set differently for Large Screen Mode and Small Screen Mode (the SSM version is more compact and uses a smaller font).

36 (edited by haggis999 2018-04-22 10:12:38)

Re: Can I stop captions, titles, etc, from disappearing?

I've tried playing with backgroundColor and expandedBackgroundColor settings in a config.xml file, but only the latter is having any effect. No matter what setting I choose for backgroundColor (such as "rgba(153,153,0,1)"), the background remains black. What might I be doing wrong?


EDIT:  I have now added your Javascript code for autoplaying multiple galleries. It appears to work fine, after making one adjustment; I had to choose a delay time that was 200ms less than the gallery display time in order to stop the 'AutoPlay OFF' message from appearing on my Windows PC screen (though it still pops up on Android/iOS). Once again, many thanks for your help in making this possible.

One further enhancement to this process would be for the autoplay of multiple galleries to be initiated by the user clicking the Autoplay button while on the last image of the current gallery. At present, clicking the button in that situation briefly turns on Autoplay, but it is then automatically turned off.

Re: Can I stop captions, titles, etc, from disappearing?

When you set a backgroundColor, it is written to the gallery's 'config.xml' file and also included in the gallery's embedding code. As noted here, any configuration options set in the embedding code will take precedence over those set in the 'config.xml' file.

Therefore, if you change the backgroundColor in JuiceboxBuilder-Pro and upload only the modified 'config.xml' file but still have a backgroundColor included in the gallery's embedding code, then it is this backgroundColor (from the embedding code) that will be used in the gallery.

Be sure to change the backgroundColor in your gallery's embedding code and all should be well.

If, after changing the backgroundColor in your gallery's embedding code, you still do not see your chosen color, then try clearing your browser's cache before reloading your web page to be sure that your browser is using the most recent versions of your gallery files.

Also, please note that if you are expanding a gallery from a Splash Page (for example in Small Screen Mode), then the gallery will only ever be visible in its expanded mode so you will see only the expandedBackgroundColor.

I hope these notes help to clarify things.

Re: Can I stop captions, titles, etc, from disappearing?

All is now clear. I'd never previously noticed that my embedding code also included a backgroundColor setting.

Up to now, all of my configuration tweaks have been done via the config.xml file. Are there any advantages to doing this via the embedding code instead?

Re: Can I stop captions, titles, etc, from disappearing?

There's no benefit (as far as the gallery is concerned) to storing the configuration options via one method over the other.
Certain configuration options (for example, those referring to the structure of the gallery) must be used in the embedding code (Embed Options) but all others can be set in either the configuration file or the embedding code (whichever is more convenient).

I'd recommend storing the configuration options in the 'config.xml' file, though (as JuiceboxBuilder does).
This means that if you edit a gallery in the future, you just need to upload the new version of the 'config.xml' file (generated by JuiceboxBuilder) rather than having to manually edit the HTML file that the gallery is embedded into.

40 (edited by haggis999 2018-04-23 21:48:40)

Re: Can I stop captions, titles, etc, from disappearing?

Steven @ Juicebox wrote:

I'd recommend storing the configuration options in the 'config.xml' file, though (as JuiceboxBuilder does).
This means that if you edit a gallery in the future, you just need to upload the new version of the 'config.xml' file (generated by JuiceboxBuilder) rather than having to manually edit the HTML file that the gallery is embedded into.

I agree that using config.xml is the most convenient approach.

haggis999 wrote:

I have now added your Javascript code for autoplaying multiple galleries. It appears to work fine, after making one adjustment; I had to choose a delay time that was 200ms less than the gallery display time in order to stop the 'AutoPlay OFF' message from appearing on my Windows PC screen (though it still pops up on Android/iOS). Once again, many thanks for your help in making this possible.

I have since discovered that it is better to set enableLooping="TRUE" when autoplaying multiple galleries. This suppresses the 'AutoPlay OFF' message and thus makes it unnecessary to tweak the delay time. Your Javascript code for jumping to the next gallery takes precedence over looping back through the current gallery.

haggis999 wrote:

One further enhancement to this process would be for the autoplay of multiple galleries to be initiated by the user clicking the Autoplay button while on the last image of the current gallery. At present, clicking the button in that situation briefly turns on Autoplay, but it is then automatically turned off.

After manually stepping through a gallery, with enableLooping="FALSE", clicking the Autoplay button on the final image will have no useful effect. With enableLooping="TRUE", it will start to replay the current gallery. In both cases, I would really prefer it to trigger a jump to my next gallery, but after checking out the API options I doubt if this is possible, so I have taken the option of always jumping to the next gallery by removing the jb-status-playing condition from your Javascript code. Have I missed another way of handling this?


Note that my current set of six associated image galleries can now be found here:
http://www.southamptoninternationalexhi … index.html.

Re: Can I stop captions, titles, etc, from disappearing?

Try the following.
It's an extension of the original code I posted above so you'll need to make your owm modifications to it.
The additional code detects when the AutoPlay button has been clicked (to turn on AutoPlay) whilst the last image in the gallery is currently being displayed.

var jb = new juicebox({
    autoPlayOnLoad: "TRUE",
    containerId: "juicebox-container",
    showAutoPlayButton: "TRUE"
});
jb.onInitComplete = function() {
    var count = jb.getImageCount();
    jb.onImageChange = function(e) {
        if (e.id === count && $('.jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) {
            window.setTimeout(function() {
                alert('Last image in gallery has been reached and 5000ms have elapsed.');
            }, 5000);
        }
    };
    $(document).ready(function() {
        $('.jb-bb-btn-auto-play').click(function() {
            var index = jb.getImageIndex();
            if (index === count && $('.jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) {
                window.setTimeout(function() {
                    alert('AutoPlay button has been clicked on last image in gallery and 5000ms have elapsed.');
                }, 5000);
            }
            
        });
    });
};

I hope that you find the code useful and can implement it into your own website.

Re: Can I stop captions, titles, etc, from disappearing?

Once again, you have provided an excellent solution to my requirement  :)

Given that the user has been operating in manual mode before clicking the Autoplay button there didn't seem much need for a serious delay before switching to the next gallery, so I reduced that from 5000ms to 500ms. Other than that, and replacing your alert with my window.location.href command, no other changes were needed.

Are such things as .jb-bb-btn-auto-play').click(function() and your CSS class details (e.g. .jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) documented anywhere on the Juicebox website?

43 (edited by haggis999 2018-04-24 17:00:17)

Re: Can I stop captions, titles, etc, from disappearing?

haggis999 wrote:

I have since discovered that it is better to set enableLooping="TRUE" when autoplaying multiple galleries. This suppresses the 'AutoPlay OFF' message and thus makes it unnecessary to tweak the delay time. Your Javascript code for jumping to the next gallery takes precedence over looping back through the current gallery.

Further testing has shown that using enableLooping="TRUE" is also not a perfect solution. When Autoplay is in effect at the time of reaching the final image on Android and iOS devices, my auto-switch to the next gallery is preceded by a brief display of the first image in the current gallery. That's actually far worse than seeing the 'AutoPlay OFF' popup at the end of each gallery, so I have now reverted to using enableLooping="FALSE".

Re: Can I stop captions, titles, etc, from disappearing?

Are such things as .jb-bb-btn-auto-play').click(function() and your CSS class details (e.g. .jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) documented anywhere on the Juicebox website?

No. Such modifications (using internal CSS classes and custom JavaScript) are not officially supported (but you can use them at your own risk).
We support the use of the available Config Options and make available the Juicebox-Pro API, but even the API has limited official support, as noted on the API's support page:

Please note that the Juicebox-Pro API is provided 'as-is' to allow people with JavaScript programming experience to use as required. We cannot offer support for all possible uses of the API.

Sometimes, users request things that are just not possible using the available Config Options and/or the API.
I'm happy to try to provide a solution if I can but sometimes the solution requires some custom code (CSS and/or JavaScript).
Such modifications are not officially supported as there are far too many possible permutations to document/list and using such modifications can often result in unforeseen and unwanted knock-on problems.
One small and seemingly easy request may snowball out of control into a complex coding mess and it's much safer to stick to the available Configuration Options where possible. If you modify a gallery beyond what is possible with the Config Options, Juicebox will have no knowledge of the modifications and this can quite often cause problems (when Juicebox expects something to happen or a gallery element to be in a certain location and this is not the case due to the modifications).
Also, I really have no greater insight into the inner CSS classes of Juicebox than you do.
I just have to rifle through the 'theme.css' file and use my browser's developer tools to try to figure out how to achieve something (like the code I've posted above).
Having said that, you are certainly free to do whatever you like with Juicebox and your web pages (within the Terms of Use and without modifying the 'juicebox.js' JavaScript source code) but just remember that, if you go beyond the Config Options, then you might run into problems that can be difficult to overcome.

Re: Can I stop captions, titles, etc, from disappearing?

Steven @ Juicebox wrote:

.... Such modifications (using internal CSS classes and custom JavaScript) are not officially supported (but you can use them at your own risk) .... I just have to rifle through the 'theme.css' file and use my browser's developer tools to try to figure out how to achieve something (like the code I've posted above) ....

I fully understand your position on this and am happy to take the risk of using code that is not officially supported by Juicebox. Such code is not really any different from all the other code on my website, for which I have sole responsibility.

The reality is that your 'unofficial' support is of a very high order and is much appreciated. I am extremely pleased to have chosen Juicebox and I can't think of another software supplier that offers such a prompt and detailed level of assistance. The company and its customers are both very lucky to have you on board!

Thanks for pointing out the existence of theme.css, though I really ought to have found that for myself.

Re: Can I stop captions, titles, etc, from disappearing?

No worries!
Whilst we're on the topic of the 'theme.css' file, you might like to take a look at the Theming Guide which has a few pointers towards customizing a gallery beyond what can be achieved with the available Config Options.