2,051

(11 replies, posted in Juicebox-Lite Support)

As I mentioned, I think the baseUrl method may not work (as Google Drive are not a regular web host) but the iframe method should not crop your galleries.
Set your gallery heights to 100% (to fill the iframes) and set the heights of the iframes as necessary.
The galleries should fill the iframes without cropping.
Please post the URL to your web page so that I can take a look at the problem for myself and hopefully help further.

2,052

(1 replies, posted in Juicebox-Pro Support)

We have just uploaded a hotfix version of the plugin which fixes the default settings problem.
Please download the plugin from the WP-Juicebox support page and reinstall it.
This should solve the first problem you reported.

I have just checked the functionality of the second problem you reported and it seems to be working OK for myself in WordPress 4.5.3 on my own server.
Once you have reinstalled the pluign, try completely clearing your browser's cache. A mixture of older cached files and new ones might be causing the problem.

2,053

(1 replies, posted in Juicebox-Pro Support)

The Lightroom plugin does not support presets like JuiceboxBuilder does (at least not in the same format) but there are a couple of things that you can do which might help.

(1) You can open a gallery created by the Lightroom plugin in JuiceboxBuilder-Pro, apply a preset to it and save it on the 'Publish' tab.

(2) In Lightroom, you can save a set of Juicebox configuration options (like a JuiceboxBuilder preset) as a template.
With the settings as you want to save them, click the + sign to the right of the text 'Template Browser' (in the left panel of the 'Web' section) and select a name for your template.
At any time in the future, if you want to apply these settings to a gallery, expand the 'Template Browser' control panel, scroll down to the 'User Templates' section and select your template.

2,054

(1 replies, posted in Juicebox-Pro Support)

Please post details of the problem you are having and the devices/browsers you see the problem in and also provide a link to your gallery so that I can see the problem for myself.
Thank you.

2,055

(1 replies, posted in Juicebox-Pro Support)

I see the problem in iOS 9.3.2 but, strangely enough, not in iOS 6.1.6 (where the gallery seems to display and function fine).
However, I have been unable to replicate the problem in a test gallery of my own.
It looks like the problem might somehow be connected to your own web page.
Unfortunately, it's a rather complex web page to try to debug (the gallery seems to be nested within many parent containers) and some trial and error might be required to try to track down the cause of the problem.
The first thing I would try is to temporarily change your Drupal theme to see if this makes a difference.
This might confirm if there is a CSS conflict between your theme and Juicebox.
Also, as you are using the Juicebox module for Drupal, you might like to post over in the Drupal forum, too.
The author of the module might have encountered this issue before or perhaps other users of your current theme have experienced similar issues with other modules.
I hope this points you in the right direction.

2,056

(11 replies, posted in Juicebox-Lite Support)

A couple of things I notice about the code you posted.

(1) In the baseUrl code, many of your strings are enclosed in ticks/backticks instead of regular single (or double) quotes.
Change all instances of ’ and ‘ to either ' or ".

(2) In the iframe code, you have a stray double-quote before the height attribute in the second iframe.

Hopefully making these changes will help.

I expect the baseUrl code may not work (due to Google Drive restrictions) but removing the stray double-quote should hopefully resolve your iframe problem.

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

I notice that your gallery uses Juicebox-Pro v1.3.2.

Flickr made a change to their API back in 2014 and we updated Juicebox to handle this change in v1.4.2.
Please see this Juicebox blog entry for further information (and the Version History for a full list of changes between versions).

All you need to do to get your gallery up and running again is to upgrade it from v1.3.2 to the current version v1.5.0.
Upgrades are free within the same major version number so you can download the current version for free using the download link from your purchase email (the link always points to the latest version rather than the version you purchased).

Just swap your gallery's current 'jbcore' folder for the version from the Juicebox-Pro v1.5.0 zip package ('juicebox_pro_1.5.0/web/jbcore/').

Full instructions for downloading the latest version and upgrading existing galleries can be found on the Upgrading Juicebox support page.

2,059

(12 replies, posted in Juicebox-Pro Support)

@fkelly12054

When you open an existing gallery in JuiceboxBuilder-Pro, the application reads the image titles and captions from the 'config.xml' file and populates the title and caption fields on the 'Images' tab with them.
This happens regardless of the source of the original title and caption text (whether it was IPTC data or custom text typed in by the user).

If you want to refresh the titles and captions (for example with updated IPTC data), just go to 'Images -> Titles -> Use IPTC Title' and 'Images -> Captions -> Use IPTC Caption' from the drop-down menu at the top. (They will already be selected if they were the original sources but the act of selecting them again will refresh the titles and captions.)

I guess there's always the chance that someone has used IPTC data for the titles or captions but has since modified a few manually in the JuiceboxBuilder-Pro interface. If JuiceboxBuilder-Pro overwrote the titles and captions when an existing gallery was opened (by automatically using current IPTC data), such modifications would be lost.
It's easy enough to refresh the titles and captions via the drop-down menu if necessary.

Please feel free to post suggestions for future versions 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 suggestions being implemented but this is certainly the best place for all ideas.
Thank you.

2,060

(3 replies, posted in Juicebox-Pro Support)

You're welcome.

2,061

(3 replies, posted in Juicebox-Pro Support)

I thought it sounded vaguely familiar!
I'm glad you've got it working again.
Thank you for letting me know.

2,062

(3 replies, posted in Juicebox-Pro Support)

It looks like the 'juicebox.js' JavaScript file is not being loaded into the <head> section of all your web pages.
WP-Juicebox detects whether or not a Juicebox gallery is present on a page and loads the the 'juicebox.js' file only if necessary.
I'm not sure why this is not working within your own WordPress site (maybe something to do with your gallery shortcodes or the fact that you seem to be embedding galleries into areas such as sidebar widgets) but you can load the 'juicebox.js' file into all your pages by opening the plugin's 'wp-juicebox.php' file in a plain text editor and changing line 30 from:

add_action('the_posts', array(&$this, 'shortcode_check'));

... to:

add_action('wp_enqueue_scripts', array(&$this, 'add_scripts_wp_core'));

Please note that the line number above refers to the current version of WP-Juicebox (v1.5.0) which can be downloaded from the plugin's support page here.

2,063

(1 replies, posted in Juicebox-Pro Support)

Juicebox uses one set of configuration options for both normal and fullscreen modes and, unfortunately, it is not possible to change configuration option values once a gallery has been loaded.
If you want to change a configuration option value, you would need to reload the gallery afterwards and a gallery cannot be loaded in fullscreen mode (at least not easily and without problems).

The best I can suggest is that you post your suggestion in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overloooked.

Incidentally, the correct syntax for running custom JavaScript when a gallery has been expanded (or closed) is as follows:

jb.onExpand = function(expanded) {
    if (expanded) {
        // Gallery has been expanded
        // Custom JavaScript goes here
    }
    if (!expanded) {
        // Gallery has been closed
        // Custom JavaScript goes here
    };
}

2,064

(3 replies, posted in Juicebox-Pro Support)

You're welcome.

2,065

(3 replies, posted in Juicebox-Pro Support)

Try setting the border-radius property on div.jb-go-back.

<style type="text/css">
    /* Back Button */
    div.jb-go-back {
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
    }
</style>

Hopefully this will work for you.

I'm glad that solved your problem.
Thank you for letting me know.

Please try the following:

(1) Uninstall JuiceboxBuilder-Pro.

(2) Manually delete the following folder from your hard drive:
/Users/your_username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro

(3) Search your hard drive for the term 'JuiceboxBuilder-Pro' and delete all entries found.

(4) Follow the procedure above (Steps #1 - #3) for JuiceboxBuilder-Lite, too.
JuiceboxBuilder-Lite and JuiceboxBuilder-Pro can both be installed and run side by side on the same computer but, being that you are experiencing problems, it might be wise to completely clear your system of all JuiceboxBuilder files before reinstalling JuiceboxBuilder-Pro.

(5) Reinstall JuiceboxBuilder-Pro following the instructions here.

Hopefully this will help.

Also, please let me know what operating system version you are using.
Another user has reported a similar issue (in this forum thread) under OS X 10.11.5 but it turned out that his Mac was behaving strangely in other ways, too (such as not being able to boot into safe mode).

2,068

(5 replies, posted in Juicebox-Pro Support)

You're welcome!
I'm glad you're making progress.

You're welcome.

The 'of' is used in the thumbnail paging text (when showPagingText="TRUE" or showSmallPagingText="TRUE"), for example "2 of 7" (referring to the number of thumbnail pages), as can be seen in this demo gallery.

2,071

(5 replies, posted in Juicebox-Pro Support)

If you are trying to incorporate your own original functionality (switching between different galleries with different heights) and functionality from your forum thread here (to allow different thumbnails configurations depending on the width of the browser window) and also this functionality (changing the height of the galleries depending on the height of the browser window), then things are starting to get really complicated. There is the added complication that setGallerySize() accepts only fixed pixel values and does not accept percentages so you might want to reload the selected gallery with new dimensions (rather than use setGallerySize()) if you want to retain gallery widths of 100%.

Assuming you want both your galleries to be the same size as each other (which is not currently the case) but want their heights to change when a threshold height is crossed, then try replacing:

               <script>
    $(document).ready(function() {
        //load gallery 1
        loadGallery('colStonewareBrickSets/', '650px');
        //initialize top buttons
        $("#button-1").on("click", function(){loadGallery('colStonewareBrick/', '500px');});
        $("#button-2").on("click", function(){loadGallery('colStonewareBrickSets/', '650px');});
    });

    function loadGallery(base, height) {
        new juicebox({
            baseUrl: base,
            containerId: 'juicebox-container',
            backgroundColor: 'fff',
            galleryWidth: '100%',
            galleryHeight: height
        });
    }
          </script>

... with:

<script type="text/javascript">

    var jb;
    var a, b, c; // maxThumbColumbs, maxThumbRows, thumbsPosition
    var y = 'colStonewareBrickSets/'; // Initial baseUrl
    var z; // galleryHeight
    var galleryHeightLarge = '800';
    var galleryHeightSmall = '400';
    var size;
    var thresholdHeight = 480;
    var thresholdWidth = 700;
    var tracker = false;

    function loadGallery(a, b, c, y, z) {
        jb = new juicebox({
            containerId: "juicebox-container",
            baseUrl: y,
            galleryHeight: z,
            galleryWidth: '100%',
            maxThumbColumns: a,
            maxThumbRows: b,
            thumbsPosition: c
        });
        tracker = true;
    }

    function initialLoad() {
        var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
        var windowHeight = window.inneHeight ? window.inneHeight : $(window).height();
        if (windowWidth < thresholdWidth) {
            a = '10'; // maxThumbRows
            b = '1'; // maxThumbColumns
            c = 'BOTTOM'; // thumbsPosition
        } else {
            a = '3'; // maxThumbRows
            b = '3'; // maxThumbColumns
            c = 'LEFT'; // thumbsPosition
        }
        if (windowHeight < thresholdHeight) {
            size = "SMALL";
            z = galleryHeightSmall; // galleryHeight
        } else {
            size = "LARGE";
            z = galleryHeightLarge; // galleryHeight
        }
        loadGallery(a, b, c, y, z);
    }

    function checkSize() {
        var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
        var windowHeight = window.inneHeight ? window.inneHeight : $(window).height();
        if (windowWidth < thresholdWidth && c === 'LEFT') {
            a = '10'; // maxThumbRows
            b = '1'; // maxThumbColumns
            c = 'BOTTOM'; // thumbsPosition
            loadGallery(a, b, c, y, z);
        }
        if (windowWidth >= thresholdWidth && c === 'BOTTOM') {
            a = '3'; // maxThumbRows
            b = '3'; // maxThumbColumns
            c = 'LEFT'; // thumbsPosition
            loadGallery(a, b, c, y, z);
        }
        if (windowHeight < thresholdHeight && size === 'LARGE') {
            z = galleryHeightSmall;
            size = 'SMALL';
            loadGallery(a, b, c, y, z);
        }
        if (windowHeight >= thresholdHeight && size === 'SMALL') {
            z = galleryHeightLarge;
            size = 'LARGE';
            loadGallery(a, b, c, y, z);
        }
    }

    $(document).ready(function() {
        initialLoad();
        $(window).resize(checkSize);
        $("#button-1").click(function() {
            y = 'colStonewareBrick/'; // baseUrl
            loadGallery(a, b, c, y, z);
        });
        $("#button-2").click(function() {
            y = 'colStonewareBrickSets/'; // baseUrl
            loadGallery(a, b, c, y, z);
        });
    });

</script>

If you want to do things that Juicebox-Pro was not designed to do (and perhaps make use of the Juicebox-Pro API for certain things, too), then I would certainly recommend taking a look at learning JavaScript. It's really the only way to achieve the things you are asking.
There's a good guide to JavaScript on the Mozilla Developer Network here.
I hope this points you in the right direction.

Incidentally, you could ensure that your galleries are responsive (please see this forum post for details) but this would mean that you would essentially have no control over the shape or size of your gallery (it would be entirely dependent on the shape and size of the user's browser window) and there may very well be gaps above and below (or to the left and right of) the main images in the gallery.
Having two fixed heights (like in the code above) which work well for the most popular browser window shapes and sizes of your target audience might be the best compromise.

2,072

(12 replies, posted in Juicebox-Pro Support)

You are already using a JavaScript function to load a specific gallery (depending on which HTML button is clicked) passing parameters for the baseUrl and galleryHeight.
If you were using just the regular embedding code (found here), then you could simply swap the entire embedding code for my extended version above.
However, incorporating my suggested solution into your existing web page will be a little more complicated as you will need to keep track of which gallery should be reloaded (and its height) when the threshold width is crossed.
Try replacing:

               <script>
    $(document).ready(function() {
        //load gallery 1
        loadGallery('colStonewareBrickSets/', '650px');
        //initialize top buttons
        $("#button-1").on("click", function(){loadGallery('colStonewareBrick/', '500px');});
        $("#button-2").on("click", function(){loadGallery('colStonewareBrickSets/', '650px');});
    });

    function loadGallery(base, height) {
        new juicebox({
            baseUrl: base,
            containerId: 'juicebox-container',
            backgroundColor: 'fff',
            galleryWidth: '100%',
            galleryHeight: height
        });
    }
          </script>

... with:

<script type="text/javascript">

    var a, b, c;
    var y = 'colStonewareBrickSets/'; // Initial baseUrl
    var z = '650'; // Initial galleryHeight
    var thresholdWidth = 700;
    var tracker = false;

    function loadGallery(a, b, c, y, z) {
        new juicebox({
            containerId: "juicebox-container",
            baseUrl: y,
            galleryHeight: z,
            maxThumbColumns: a,
            maxThumbRows: b,
            thumbsPosition: c
        });
        tracker = true;
    }

    function thumbsStatus() {
        var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
        if (windowWidth < thresholdWidth && (c === 'LEFT' || tracker === false)) {
            a = '10'; // maxThumbRows
            b = '1'; // maxThumbColumns
            c = 'BOTTOM'; // thumbsPosition
            loadGallery(a, b, c, y, z);
        }
        if (windowWidth >= thresholdWidth && (c === 'BOTTOM' || tracker === false)) {
            a = '3'; // maxThumbRows
            b = '3'; // maxThumbColumns
            c = 'LEFT'; // thumbsPosition
            loadGallery(a, b, c, y, z);
        }
    }

    $(document).ready(function() {
        thumbsStatus();
        $(window).resize(thumbsStatus);
        $("#button-1").click(function() {
            y = 'colStonewareBrick/';
            z = '500';
            loadGallery(a, b, c, y, z);
        });
        $("#button-2").click(function() {
            y = 'colStonewareBrickSets/';
            z = '650';
            loadGallery(a, b, c, y, z);
        });
    });

</script>

Hopefully this will help.

The languageList for Juicebox-Pro v1.5.0 is as follows:

"Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Images|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of|Send Email|Download"

The two new entries at the end "Send Email" and "Download" refer to the Email Button (showEmailButton) and the Download Button (showDownloadButton) respectively.

The International Gallery Text support section has now been updated to reflect this change.

Please note that, unfortunately,  there is currently a problem with the "Download" entry (which always uses the default text of "Download").
A bug report has been logged with the developers and it should hopefully be fixed in the next version.
Apologies for any inconvenience.

2,074

(5 replies, posted in Juicebox-Pro Support)

Under 480px and especially phones (cells) the space above and below the main image is unacceptable large.

Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

If you want to have two different sets of gallery dimensions (depending on the height of the user's browser window), then you could use something like the following.

<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">

    var galleryHeightLarge = 800;
    var galleryHeightSmall = 400;
    var galleryWidthLarge = 600;
    var galleryWidthSmall = 300;
    var size;
    var thresholdHeight = 480;
    var tracker = false;

    function changeSize(a, b) {
        window.setTimeout(function() {
            jb.setGallerySize(a, b);
        }, 200);
        tracker = true;
    }

    function checkSize() {
        var windowHeight = window.inneHeight ? window.inneHeight : $(window).height();
        if (windowHeight < thresholdHeight && (size === 'LARGE' || tracker === false)) {
            changeSize(galleryWidthSmall, galleryHeightSmall);
            size = 'SMALL';
        }
        if (windowHeight >= thresholdHeight && (size === 'SMALL' || tracker === false)) {
            changeSize(galleryWidthLarge, galleryHeightLarge);
            size = 'LARGE';
        }
    }

    var jb = new juicebox({
        containerId: "juicebox-container"
    });

    $(document).ready(function() {
        checkSize();
        $(window).resize(checkSize);
    });

</script>

This code checks the browser window's height, initially displays the gallery as appropriate and if the browser window's height changes and crosses a specified threshold height, the gallery's dimensions will change (using the Juicebox-Pro API method setGallerySize()).
Juicebox-Pro was not designed with this in mind (two different sets of gallery dimensions) so a short delay (the setTimout() value of 200ms) is required before calling setGallerySize() to ensure that this works OK.

I hope this helps.

2,075

(12 replies, posted in Juicebox-Pro Support)

There are no configuration options that could be used to achieve this but it could be done with JavaScript as follows.

<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">

    var a, b, c;
    var thresholdWidth = 700;
    var tracker = false;

    function loadGallery(a, b, c) {
        new juicebox({
            containerId: "juicebox-container",
            maxThumbColumns: a,
            maxThumbRows: b,
            thumbsPosition: c
        });
        tracker = true;
    }

    function thumbsStatus() {
        var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
        if (windowWidth < thresholdWidth && (c === 'LEFT' || tracker === false)) {
            a = '10'; // maxThumbRows
            b = '1'; // maxThumbColumns
            c = 'BOTTOM'; // thumbsPosition
            loadGallery(a, b, c);
        }
        if (windowWidth >= thresholdWidth && (c === 'BOTTOM' || tracker === false)) {
            a = '3'; // maxThumbRows
            b = '3'; // maxThumbColumns
            c = 'LEFT'; // thumbsPosition
            loadGallery(a, b, c);
        }
    }

    $(document).ready(function() {
        thumbsStatus();
        $(window).resize(thumbsStatus);
    });

</script>

I hope this helps.