851

(11 replies, posted in Juicebox-Pro Support)

When you create a gallery with JuiceboxBuilder-Pro, the application stores the locations of the source images in the gallery's 'config.xml' file (the sourcePath attributes in the <image> tags).
As long as you do not relocate your source images, JuiceboxBuilder-Pro will use the un-watermarked source images (rather than the already watermarked gallery images) if a new watermark is to be applied to the images (so gallery images will not be watermarked twice).

If the source images are no longer available in their original locations, then JuiceboxBuilder-Pro will have no option but to use the already watermarked gallery images and will watermark them again.
In this case, the best course of action would be to copy the gallery images to a safe location whilst the gallery is being saved and then move them back into the 'images' folder afterwards (overwriting the double-watermarked images).
The image filenames will be the same so there will be no need to modify any paths in any files.

I hope this helps.

The problem is almost certainly a z-index issue.
Juicebox uses z-index values to ensure that certain elements (such as captions and navigation hit areas) are stacked on top of other elements (such as the main images) within the gallery.
Unfortunately, it looks like the gallery z-index values are larger than those of your menu system.

To resolve your problem, assign a z-index value of 9999 to your menu system via CSS to ensure that your menu is stacked on top of all gallery elements.

Adding the following jQuery JavaScript to your page should work (I've tested it on your web page in my own browser's developer tools):

$(document).ready(function() {
    $('.menu-item').css('z-index', '9999');
});

I hope this helps.

853

(11 replies, posted in Juicebox-Pro Support)

There are many ways that you can structure your web site and Juicebox galleries.
Here are a few tips which might help.

Using the regular embedding code noted here (and presented on the 'Publish' tab of JuiceboxBuilder-Pro), the contents of the gallery folder (not the gallery folder itself) should be uploaded to the same directory as the web page containing the gallery's embedding code.

If you move of rename the gallery's configuration file (default name 'config.xml'), then you can point towards it using a configUrl entry within the gallery's embedding code, for example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        configUrl: "folder_1/folder_2/configuration_file.xml",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

No matter whether of not you use a custom configUrl, all relative paths within the gallery's configuration file ( imageURLs, thumbURLs and linkURLs) will be relative to the web page containing the gallery's embedding code.

Short descriptions of the configUrl and baseUrl embed options can be found here.

Alternatively, you could upload a complete gallery folder to anywhere on your web server and point towards it using a baseUrl entry within the gallery's embedding code, for example:

<!--START JUICEBOX EMBED-->
<script src="folder_1/folder_2/gallery_folder/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "folder_1/folder_2/gallery_folder/",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

The baseUrl method of embedding is documented here.
When using the baseUrl method of embedding, all relative paths within the configuration file (imageURLs, thumbURLs and linkURLs) will be relative to the baseUrl.

Additionally, you can upload your gallery's 'jbcore' folder to anywhere you like on your web server. In fact, multiple galleries can even share a single 'jbcore' folder. Please see here for details.
All you need to do is make sure that you point towards the 'juicebox.js' file within the 'jbcore' folder within the <script> tag, for example:

<!--START JUICEBOX EMBED-->
<script src="folder_1/folder_2/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

The location of the 'jbcore' folder is completely independent of the configUrl and baseUrl options (which still work as noted above).

if you use any of the suggestions above, then you will not need to modify any of the paths inside the gallery's configuration file.
However, if you want to store your images elsewhere on your web server (not inside the 'images' and 'thumbs' folders within the gallery folder), then you will need to manually modify the paths (the imageURLs, thumbURLs and linkURLs) inside the gallery's configuration file (by opening the file in a plain text editor) bearing in mind that if you use a baseUrl, then relative paths will be relative to the baseUrl.

I hope this helps.

Can we safely remove the TinyMCE folder in the Juicebox plugin folder on the server?

If your WP-Juicebox plugin version reads "v1.5.1" on the Plugins page, then yes, you can safely remove the 'tinymce' folder from within the 'plugins/wp-juicebox/' plugin folder. The 'tinymce' folder does not form part of WP-Juicebox v1.5.1.

If you want to be sure that you have no redundant files in your 'plugins/wp-juicebox/' folder, then you can delete the contents of the folder and then upload the contents of the v1.5.1 plugin (making sure that you still have the Pro 'jbcore' folder). You will not lose any gallery information doing this. No gallery-specific data is stored in the 'plugins/wp-juicebox/' folder. All gallery information is stored in the 'uploads/juicebox/' folder and other plugin options are stored in the database.

I already succeeded in doing this today.

That's great to hear. Thank you for letting me know.

What I first did was just uploading the jbcore folder and later I tried to add the pluginthrough wordpress. This however did not work.

As you have discovered, you need to update the plugin first (as it comes bundled with Juicebox-Lite). Afterwards, you can upgrade the plugin to use your Juicebox-Pro files.

Is it correct that Tinymce is located inside the existing juicebox plugin folder?

No. The TinyMCE editor was never included within WP-Juicebox.
Older versions of the plugin included code (inside a folder named 'tinymce') to add an 'Add Juicebox Gallery' button to WordPress's own TinyMCE editor toolbar.
However, later versions of the plugin moved the 'Add Juicebox Gallery' button from the TinyMCE editor toolbar to alongside WordPress's 'Add Media' button (and so the TinyMCE code was no longer required and the 'tinymce' folder was removed from the plugin package).

This would be good to know since we are getting some php errors related to php 7 on this.

I have run the current version of WP-Juicebox (v1.5.1) under PHP 7, 7.1, 7.2 and 7.3 without any problems but if you find any issue with WP-Juicebox under a certain version of PHP, please let me know so that I can investigate further. Thank you.

There are 2 things to consider:
(1) WP-Juicebox, the Juicebox plugin for WordPress.
(2) The version of Juicebox that the plugin uses.

The plugin comes bundled with the latest version of Juicebox-Lite.

To fully update the plugin, you should first update WP-Juicebox itself, which you can download from the plugin's support page here.
Then, upgrade the plugin to use your current Juicebox-Pro (v1.5.1.1) files by following the instructions here.

I hope this helps.
Please let me know how you get on and if I can be of any further assistance.

857

(1 replies, posted in Juicebox-Pro Support)

Please see this FAQ regarding the 'Config file not found.' message:
When I view my gallery I see the message 'Config file not found'. How do I fix this?

If you encounter this message, then the gallery's configuration file is likely to be in the wrong location.
By default, the gallery's configuration file should be named 'config.xml' and should be located in the same directory as the web page containing the gallery's embedding code.

If you rename or relocate the gallery's configuration file, then you can point towards it with a configUrl entry in your gallery's embedding code.
The configUrl entry can be an absolute path (in the form http://www.example.com/gallery/custom.xml) or a relative path (relative to the web page containing the gallery's embedding code).

Also, if you use a baseUrl entry in your gallery's embedding code (to point towards a gallery folder), then a relative configUrl will be relative to the baseUrl.

Short descriptions of all the Embed Options (such as configUrl and baseUrl) can be found here.

Another possible reason for encountering the 'Config file not found.' message would be if the configuration file is somehow corrupt or incomplete.
Open your gallery's 'config.xml' file directly in a browser and the browser should let you know if there are any syntax errors in the code (which you can then correct).

If you encounter the exact text 'Config XML file not found.', then you are using an older version of Juicebox.
In v1.5.0 (released on 24 May 2016), Juicebox first supported JSON configuration files as well as XML configuration files and the error message was changed from 'Config XML file not found.' to 'Config file not found.'.
I'd recommend that you upgrade your Juicebox gallery to the latest version (v1.5.1) to ensure that any bugs from previous versions (which have since been fixed) are not contributing to your problem.
For reference, full instructions for Upgrading Juicebox can be found here.

I hope my notes above help.
However, if you continue to experience difficulties, then please post the URL to your gallery's web page so that I can see the problem for myself and hopefully help further.
Thank you.

858

(3 replies, posted in Juicebox-Pro Support)

Please feel free to post suggestions for future releases 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.

Sorry, my last post was incorrect.
In Small Screen Mode, captionPosition uses the value OVERLAY (rather than the default Large Screen Mode value of OVERLAY_IMAGE).
(I have now corrected my post above to avoid any confusion for other users reading this thread.)

This is also what I see in your gallery (where the caption area sits at the foot of the gallery and spans the entire gallery).

Setting your gallery to use Large Screen Mode will allow you to use captionPosition to position your caption area elsewhere.

Apologies for the incorrect information previously but I hope that this helps to clarify things.

Please note that the captionPosition configuration option is a Large Screen only option.
This is noted in the short description of the option here.
It is not used when the gallery is displayed in Small Screen Mode (on mobile devices) where the value of OVERLAY is used. (You can tap the screen for the overlay to appear and disappear.)

For reference, more information about the different screen modes (Small Screen Mode vs Large Screen Mode) can be found here.

Incidentally, if you want to force your gallery to be displayed in Large Screen Mode in all browsers and on all devices, then set screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).

[Post edited for content.]

861

(3 replies, posted in Juicebox-Pro Support)

The configuration options available to give a drop-shadow on the main image are as follows:

  • imageShadowColor - Color of shadow around main image. ('Customize -> Color')

  • imageShadowBlur - The amount of blurring of the main image shadow (pixels). (Customize -> Main Image')

Please note that the drop-shadow on the main image is a subtle shadow which is applied to all sides of the main image rather than an embossed effect.
Here is an extreme example to demonstrate the effect:
https://juicebox.net/demos/pro/default/ … dowBlur=50

862

(7 replies, posted in Juicebox-Pro Support)

Avast have contacted me again with the following information.

Our developers are currently working on a fix and this fix should be released as a part of one of the next program updates.

Avast Ransomeware will still flag Juiceboxbuilder-Pro as a potential threat but, as of their next update, it should display a pop-up allowing users to run JuiceboxBuilder-Pro properly (rather than disabling the application silently).

Your solution works fine!

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

Many thanks for sorting this Steven.

You're welcome!

It looks like you are embedding your gallery into a pop-up window but you are loading your gallery as soon as your web page loads (before the pop-up window exists).
At the time the gallery loads, the pop-up window has no dimensions and the gallery's own dimensions are defined as 100% x 100% (i.e. 100% of the gallery's parent container). Therefore, Juicebox cannot determine the actual dimensions for the gallery (100% of zero is zero).

You could either:
(1) Change the gallery's dimensions to absolute pixel values (both the widths and height) such as '600px' instead of '100%'.
... or:
(2) Put the gallery's embedding code in a Javascript function and run the function (to load the gallery) only after the pop-up window is ready. Try using the following embedding code.

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(34,34,34,1)"
        });
    }
    $(document).ready(function() {
        $("a:contains('Galeri')").click(function() {
            window.setTimeout(function() {
                loadGallery()
            }, 500);
        });
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

The short delay (the window.setTimeout() of 500ms) may be required to allow the pop-up window time to generate before the gallery is loaded.

I hope this helps.

865

(5 replies, posted in Juicebox-Pro Support)

Thanks for the link!

Incidentally, I've moved your query from the Feature Requests thread to its own topic here (just to keep this conversation from obscuring feedback and suggestions over there).
Of course, if you have any feature requests that follow on from this conversation (or any other ideas), please feel free to post them in the Feature Requests thread.
Thank you.

866

(3 replies, posted in Juicebox-Pro Support)

You're welcome!
I'm glad all is well. Thank you for letting me know.

867

(3 replies, posted in Juicebox-Pro Support)

The icons on the Button Bar display the actions that will take place when they are clicked (rather than reflecting the current status).
The Audio icon with the cross signifies that the audio will stop when clicked.
The corresponding rollover tooltip text is in line with this, too.
When you hover over the Audio icon with the cross, the tooltip text reads "Pause Audio".

The AutoPlay icon works the same way (i.e. click to do what the icon signifies).
A traditional triangular 'play' icon is displayed when AutoPlay is off (the user clicks the 'play' icon to start AutoPlay) and a 'pause' icon is displayed when AutoPlay is active (the user clicks on the 'pause' icon to stop AutoPlay).

If you want to reverse the way the Audio icons work, then open the gallery's 'jbcore/classic/theme.css' file in a plain text editor and change lines 855 to 861 (inclusive) from:

.jb-bb-button.jb-bb-btn-audio:before {
    content: "\e00c";
}
.jb-bb-button.jb-bb-btn-audio.jb-status-playing:before
{
    content: "\e00d";
}

... to:

.jb-bb-button.jb-bb-btn-audio:before {
    content: "\e00d";
}
.jb-bb-button.jb-bb-btn-audio.jb-status-playing:before
{
    content: "\e00c";
}

If you want to change the rollover tooltip text in your gallery, then you can do so via the languageList configuration option.
This option is not available in the JuiceboxBuilder-Pro interface and must be added to your gallery's configuration options manually.
Please see the International Gallery Text support section for details. (The languageList configuration option was originally intended to be used for translating rollover tooltip text but can just as easily be used to modify the default text.)
Information on how to manually set configuration options (either in the 'config.xml' file or in the embedding code) can be found here.

I hope this helps.
Please let me know how you get on and if I can be of any further assistance.
Thank you.

868

(5 replies, posted in Juicebox-Pro Support)

The above does not work on a PC (as you suggest anyway) and that is where my client query arose.

Sorry, I should have been more clear.
Swiping thumbnail pages will work only when the gallery is displayed in Small Screen Mode and only when Touch Input Mode is activated (essentially only on mobile devices which do not use a mouse).
Juicebox automatically switches between Touch Input Mode and Mouse Input Mode depending on the device that is being used to view the gallery (there is no user configuration option to override this) and only one Input Mode will be active at any one time (Juicebox will not use both Touch Input Mode and Mouse Input Mode together). On a desktop computer (where the gallery will be displayed in Large Screen Mode by default), Mouse Input Mode will be selected.
There is a short description of Input Modes in the Gallery Tour here.
I hope this helps to clarify things.

I'll do the following - hang the space!

It's certainly a quick and easy solution to your problem. It gives users an intuitive way to navigate between thumbnail pages and does not involve any custom CSS or JavaScript.
I'm glad you're happy with this option. Thank you for letting me know.

869

(7 replies, posted in Juicebox-Pro Support)

I have heard back from the Avast team.

It seems that Avast Ransomware Shield will always be triggered when JuiceboxBuilder's 'New Gallery...' or 'Open Gallery...' buttons are clicked.
They say that this is normal as "this application is accessing files from one of the protected folders".
However, when this first happens, the user should get a pop-up asking whether or not to allow the application. As you have discovered, this does not currently happen (the user needs to deactivate and then reactivate Ransomware Shield before the pop-up appears) and they are now investigating this further.

I will keep this post up to date if/when I hear any more from Avast.

On mobile phone I see only thumbnails and main image is displayed only when I client on thumbnail.

What you are describing is Small Screen Mode.

On mobile (small screen) devices, Juicebox displays the gallery in Small Screen Mode where the thumbnails and main images are displayed on separate pages (to give the main images as much room as possible to be displayed).
When a thumbnail is clicked/tapped, the thumbnail page is replaced with the chosen image.
The user can return to the thumbnail page by clicking/tapping the 'Thumbnail' button on the gallery's Button Bar.

Please see the Screen Modes support section in the Gallery Tour for more information.

You can choose to always have the gallery displayed in Large Screen Mode (which displays the thumbnails and image images together, like in a desktop browser, no matter what device the gallery is viewed on) by setting screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).

If you would like to continue to use Small Screen Mode for mobile devices but would rather have the first image displayed initially rather than the thumbnail page, then set showSmallThumbsOnLoad="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section).

Also, if you would like to have your web page's content (including the thumbnails and Button Bar) scaled up when displayed on mobile devices, then try adding the following <meta> tag to the <head> section of your gallery's web page:

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

I hope this helps.

I'm glad to hear that you've got it working!
Thank you for posting back to let me know.

872

(5 replies, posted in Juicebox-Pro Support)

@tonygamble

You could turn the paging text into a link to the next page of thumbnails but you'd need to use some custom JavaScript and the Juicebox-Pro API as follows:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: "juicebox-container",
        showPagingText: "TRUE"
    });
    jb.onInitComplete = function() {
        $('.jb-idx-thb-list-page-number').click(function() {
            var current = jb.getThumbPageIndex(); // Determine the current thumbnail page
            jb.showThumbPage(current + 1); // Show the next thumbnail page
        });
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

(You'd need more code to enable looping.)

However, there is a much easier way to navigate between thumbnail pages.

Small Screen Mode (where thumbnails and main images are displayed on separate pages)

On a touch enabled device, you can navigate between thumbnail pages by swiping the screen left (for the previous page of thumbnails) or right (for the next page of thumbnails).
Additionally, you can set showSmallThumbNav="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section) to display thumbnail navigation buttons (to the left and right of the thumbnails). This takes up a little more space on the page but might give your users a more intuitive method of navigating between your thumbnail pages.

Large Screen Mode (where thumbnails and main images are displayed together)

In Large Screen Mode, Juicebox automatically displays thumbnail navigation buttons which can be positioned via the thumbNavPosition configuration option (also in 'Customize -> Thumbnails') either:

  • CENTER - Vertically centered in the thumbnail area.

  • BOTTOM - Below the thumbnail area.

For reference, a list of all Thumbnail Options can be found here.

I hope this helps.

The problem is almost certainly a z-index issue.
Juicebox uses z-index values to ensure that certain elements (such as captions and navigation hit areas) are stacked on top of other elements (such as the main images) within the gallery.

To resolve your problem, assign a z-index value of 9999 to your menu system via CSS to ensure that your menu is stacked on top of all gallery elements.

If you have any trouble doing this, then please post a link to your gallery's web page so that I can see the problem for myself (live in your web page rather than just a screenshot) and, with the help of a browser's developer tools, determine which CSS class or id the z-index value should be assigned to.
Thank you.

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

Having multiple lines in image caption

Just to let you know, you can have multiple lines in image titles and captions by using HTML line breaks (<br>) within them.
For example:

<caption><![CDATA[Line #1<br>Line 2]]></caption>

If entering such a caption within JuiceboxBuilder-Pro, you just need to enter:

Line #1<br>Line 2

JuiceboxBuilder-Pro will automatically add the <caption> and CDATA tags when the caption is written to the gallery's 'config.xml' file.

It doesn't match with overall look and feel of gallery options.

All image titles and caption will use the styling from the configuration options such as textColor ('Customize -> Lite' section) and galleryFontFace ('Customize -> General' section).
For reference, a list of all configuration options can be found here.

While trying to add data manually the formatting and dynamic content selection is not working properly.

Please post a link to your gallery so that I can see the problem for myself and hopefully help further.
Thank you.