• Registered: 2015-02-07
  • Posts: 18

Topic: Splash Page counter

Hi there,

I'm currently working on the splash pages for my site and can't figure out how to get the image count to disappear so that it only shows the gallery title and "view gallery". I only want the image count to show on computer-screen viewing, but not on mobile. Is that possible?

Thanks!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Splash Page counter

You could remove the image count from the Splash Page by adding the following CSS code to the <head> section of your web page:

<style type="text/css">
    .jb-splash-cnt {
        display: none;
    }
</style>

However, this would apply to both Large Screen Mode and Small Screen Mode.

If you want the code to apply to only Small Screen Mode (when the gallery is displayed on mobile and small screen devices), then you could check which Screen Mode is being used (via the Juicebox-Pro API getScreenMode() method) and then use JavaScript to apply the custom CSS rule to the relevant class.
Your gallery's embedding code might look something like this:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
    containerId: 'juicebox-container',
    screenMode: 'AUTO'
});
jb.onInitComplete = function() {
    if (jb.getScreenMode() === 'SMALL') {
        $('.jb-splash-cnt').css('display', 'none');
    }
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

[Query moved to new forum thread.]

  • Registered: 2015-02-07
  • Posts: 18

Re: Splash Page counter

Thank you. I should have mentioned that I am not embedding the galleries, but rather using the Wordpress Juicebox plugin. Would the same still apply, and I should just make the edits in the jbcore/classic/theme.css file?

  • Registered: 2015-02-07
  • Posts: 18

Re: Splash Page counter

Nevermind, I figured this out. Thank you!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Splash Page counter

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

For others reading this thread, WP-Juicebox assigns variable names to the 'juicebox' object in the form:

var jb_[Gallery Id] = new juicebox({...

.. so, for example, if you want to add some Juicebox-API code to a WP-Juicebox gallery which has Gallery Id 7, then you could add it below the Juicebox gallery shortcode tag in the body of the post, such as:

<script>
    jb_7.onInitComplete = function() {
        if (jb_7.getScreenMode() === 'SMALL') {
            $('.jb-splash-cnt').css('display', 'none');
        }
    };
</script>