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,053

(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,054

(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,056

(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,057

(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.

2,058

(5 replies, posted in Juicebox-Pro Support)

Almost, I'd like to have Juicebox build a multi-size image gallery to efficiently deliver image resources appropriately sized for the browsing device (ie. utilise the small, medium and large image options), but also have very large, web-unfriendly, source images easily available for download.

This can still be achieved with my suggestion above. Create a Multi-Size Image gallery with JuiceboxBuilder-Pro, copy your source images into a folder named 'originals', place it in the gallery folder and edit the 'config.xml' file to replace the linkURL paths.

... Juicebox ignores the CRs in my IPTC data. What html would be best to replace the CRs with - <br>?

Yes, <br> would be best.
I've notified the developers of this issue (JuiceboxBuilder ignores line feeds/carriage returns in IPTC data) and it has been logged as a bug so hopefully it will be fixed in a future version.
Thank you for pointing it out.

Is there a MacOS text editor (cheap is preferable, free would be better!) that allows you to make droplets, or some other cunning automated solution?

I'm a PC user so it might be better if I let the Mac users amongst us recommend one.

2,059

(5 replies, posted in Juicebox-Pro Support)

The order of preference that the Download Button uses is as follows.
It will use the linkURL if it exists. If there is no linkURL, then it will use the largeImageUrl. If there is no largeImageUrl, it will use the imageUrl.
The linkURL is first in preference to allow custom files associated with the images (such as .pdf or .zip files) to be downloaded instead of the images themselves.

...but anyone with a larger resolution display will have to load a whopping 4000-6000px 'large' image in the gallery.

That's really the concept behind a Multi-Size Image gallery (that larger images are displayed on larger resolution screens).

It sounds like you're looking to have a single-size image gallery but also have larger images available for download.
Assuming you are allowing JuicboxBuilder to resize your source images and want to use the source images for the Download Button, then this could be achieved as follows.

(1) Create a regular single-size image gallery with JuiceboxBuilder, allowing the application to use the same values for the imageURLs and the linkURLs (which is the default behavior).

(2) Copy your source images (the ones you fed to JuiceboxBuilder to create the gallery) into a new empty folder named 'originals' and place this folder into your gallery folder (alongside the 'images' folder).

(3) Edit your gallery's 'config.xml' file and change all instances of linkURL="images/ to linkURL="originals/.
If you use a text editor such as Notepad++ (free), you can change all instances in a single global search and replace action. It should take less than a minute to edit the file from start to finish.

I hope this helps.

If you are looking to do something with Juicebox that is not currently possible, please feel free to post your ideas in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.

... it would throw up an error complaining images must not be bigger than 4096px - this occurred on images smaller than this,

Unfortunately, there is a known bug in JuiceboxBuilder whereby an error can be generated if the resize image dimensions are too large.
The exact dimensions can vary depending on the source images but, under certain circumstances, JuiceboxBuilder can fail (displaying the error message you quoted) if 'Max Width' and 'Max Height' are both greater than 2364.
However, the developers are aware of this issue and are currently investigating it.
Hopefully it will be fixed in a future version.

2,060

(1 replies, posted in Juicebox-Pro Support)

Yes. Juicebox comes bundled with its own version of jQuery (inside the 'juicebox.js' JavaScript file) which it uses internally.
This avoids the need to manually include a separate version of jQuery in the gallery's web page.
However, you can still load jQuery into a web page containing a Juicebox gallery for use elsewhere on the page.
Loading any version of jQuery (including v3.0.0) into a gallery's web page should have no effect on the Juicebox gallery itself.

2,061

(1 replies, posted in Juicebox-Pro Support)

The password protection functionality requires server-side code (PHP) and works only when the gallery has been uploaded to a web sever.
Please see the Password Protection support section for details.

2,062

(3 replies, posted in Juicebox-Pro Support)

... I saw no way to remove the gradient caption background in Juicebox Pro...

To remove the gradient, make sure that both captionBackColor and captionBackTopColor (in JuiceboxBuilder-Pro's 'Customize -> Color' section) are exactly the same (in color and opacity).
Because captionBackTopColor has different default values for Large Screen Mode (rgba(0,0,0,0)) and Small Screen Mode (rgba(0,0,0,0.3)), if you want to ensure that there is no gradient in the caption in both screen modes, set captionBackColor and captionBackTopColor to non-default values (but still both identical to each other).

There really have been a huge number of bugfixes since v1.1.1.
I would certainly recommend using the latest version and trying to fix any problems you have with that than trying to fix problems that you are having with v1.1.1.

Hopefully my notes above will help resolve the problem you're having trying to remove the caption gradient.

If you let me know what other problems you're having with v1.5.0, I'll certainly try to help.

2,063

(3 replies, posted in Juicebox-Pro Support)

You could use an image title such as the following (lowercase 'L' in Wingdings is the character you are looking for).

<span style="font-family: Wingdings; font-size: 24px; color: #ff0000;">l</span>

However, this will display as intended only in Microsoft browsers (Edge and Internet Explorer) and only if Wingdings is installed on the user's computer.

It would be much better to use a Unicode character so that it can be seen correctly in all browsers.
You can display a Unicode character in a web page using its decimal code or hexadecimal code.

Please see this web page for a table of Windings characters and their Unicode equivalents. Look for the lowercase 'L' in the first column in the table for the Unicode codes you'll need to use.
You can use either of the following in an image title to display a big red dot.

Decimal:

<span style="font-size: 24px; color: #ff0000;">&#9679;</span>

Hexadecimal:

<span style="font-size: 24px; color: #ff0000;">&#x25CF;</span>

Please also see this FAQ regarding using HTML formatting in image titles and captions.
How do I add HTML formatting to image captions and titles?

2,064

(3 replies, posted in Juicebox-Pro Support)

I notice that you are using Juicebox-Pro v1.1.1.
Please try upgrading your galleries to the latest version (v1.5.0) as many bugs have been fixed since v1.1.1 and upgrading may fix your problem without any further action.
Please see the Version History for a full list of changes.
Instructions on how to download the latest version and upgrade existing galleries can be found on the Upgrading Juicebox support page.

Essentially, once you have downloaded Juicebox-Pro v1.5.0, replace the 'jbcore' folder on your web server ('/juicebox3/jbcore/') with the 'jbcore' folder from the Juicebox-Pro v1.5.0 zip package ('juicebox_pro_1.5.0/web/jbcore').

Hopefully this will solve your problem.

2,065

(1 replies, posted in Juicebox-Pro Support)

You can download the latest version of WP-Juicebox (v1.5.0) from the plugin's support page here. (WP-Juicebox is not included in the Juicebox-Pro zip package.)
Install the plugin following the Installation Instructions (in the link above) and upgrade it to Juicebox-Pro (using the 'jbcore' folder from your Juicebox-Pro v1.5.0 zip package) by following the Upgrading to Juicebox-Pro instructions.

Essentially:
(1) Download WP-Juicebox v1.5.0.
(2) Replace the plugin's 'jbcore' folder with the one from your Juicebox-Pro v1.5.0 zip package.
(3) Upload the 'wp-juicebox' folder to your WordPress 'wp-content/plugins/' directory, overwriting your existing 'wp-juicebox' folder.

After doing this, you will have the latest version of both WP-Juicebox and Juicebox-Pro.

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

It looks like the problem is with your Picasa User Id and/or Picasa Album Name.

Check that the functionality is working OK by setting up a test gallery with the following information:
Picasa User Id: picasateam
Picasa Album Name: VegasWeekend

Please check your Picasa User Id. It may not be your email address.
Also, as Google have discontinued Picasa and are moving all Picasa web albums over to Google+ photo albums, you might need to enter Google credentials rather than Picasa ones.

You can find your Google User Id by logging in to Google+ and clicking the 'Google+ Profile' link above the 'My Account' button (after clicking your custom image at the top right). Your Google User Id will be the 21 digit number in the URL (in your browser's address bar).

Take a look at this forum thread which should hopefully point you in the right direction towards finding your Google Album Id (a 19 digit number).

I hope this helps.

2,068

(14 replies, posted in Juicebox-Pro Support)

I'm glad you've got it working.
Thank you for letting me know and for posting the solution.

I was just about to suggest that the best course of action might be to revert to WP-Juicebox v1.4.4.2 (as it seemed to work for you) and replace its 'jbcore' folder with your Juicebox-Pro v1.5.0 version, following the instructions here.

The are certainly some changes in the plugin's code between v1.4.4.2 and v1.5.0 but nothing that should cause your NextGEN sourced galleries to fail.

Just for the record, I've checked the functionality of WP-Juicebox v1.5.0 on my own server under PHP 5.4.35, 5.5.36 and 7.0.7.
My test NextGEN sourced WP-Juicebox gallery displays fine under all these PHP versions (without the need to add header("HTTP/1.1 200 OK") to the 'config.php' file) so the problem certainly seems to have been related to your server's setup.

In any case, I'm glad you've got your galleries up and running again.

2,069

(3 replies, posted in Juicebox-Lite Support)

You're welcome.
I'm glad you've got it working.

I'm glad you've got it working again.
Thank you for letting me know.

2,071

(14 replies, posted in Juicebox-Pro Support)

PHP 5.4.35.

Have you tried my 3 suggestions above yet to see if any of them make a difference?

Creating Juicebox galleries with WP-Juicebox v1.5.0 and NextGEN v2.1.43 seems to work OK on my own server with WordPress 4.5.2 (and PHP 5.4.35) so the problem may somehow be related to your own setup (your current theme, activated plugins, PHP version, server settings).

Unfortunately, as I am currently unable to replicate the problem, it makes troubleshooting quite difficult.

I would certainly try reverting to a default WordPress theme and deactivating all plugins (including all CDN and caching plugins) other that WP-Juicebox and NextGEN to see if this helps.

2,072

(12 replies, posted in Juicebox-Pro Support)

I've just re-read Post #3 above and it looks like emptech might have been looking to embed captions as metadata within JuiceboxBuilder-Pro. This is not possible. JuiceboxBuilder-Pro has the ability to extract the IPTC Document Title for the image titles and the IPTC Description for the image captions but cannot save metadata to images. This would need to be done in a program such as Lightroom (as simonjacobs suggests) or Photoshop.

2,073

(1 replies, posted in Juicebox-Pro Support)

The captionPosition in this gallery is BELOW_IMAGE.
The Info Button only toggles elements positioned on the overlay (captionPosition="OVERLAY" or captionPosition="OVERLAY_IMAGE").
When captionPosition is BELOW_IMAGE, BOTTOM or BELOW_THUMBS, the captions will always be visible (and not toggled via the Info Button).

There have been many changes to the 'theme.css' file since the last version of Juicebox (v1.4.4.2) but the code I posted above, I also posted here on 23 October 2015, long before v1.5.0 was released.
In any case, I hope the code helps.  (It certainly differs from the code in the original post above.)

2,075

(14 replies, posted in Juicebox-Pro Support)

When I go directly to http://fotoslubna.com/wp-content/plugin … lery_id=55 in a browser, I see the complete XML data.

Are you using a Content Delivery Network or any server side caching?
Try temporarily disabling any CDN and caching plugins to see if this makes a difference.