3,076

(4 replies, posted in Juicebox-Pro Support)

Unfortunately, I have no personal experience with any other ecommerce solution so cannot recommend an alternative to Fotomoto. I would just need to research the subject online (as I'm sure you are currently doing).

I realise that this does not help you but I thought I should at least reply to your query rather than leave it unanswered.

Hopefully some other users reading this thread will be able to post some suggestions.

Just for the record, Juicebox-Pro's only other built-in shopping cart solution would be to use custom purchase URLs as documented in the Shopping Cart support section.
Even if you were to find an alternative to Fotomoto, it might be difficult to incorporate a different ecommerce solution into a Juicebox-Pro gallery. You would almost certainly need to use the Juicebox-Pro API to at least fetch information about the current image in order to forward it on to your ecommerce solution.

3,077

(11 replies, posted in Juicebox-Pro Support)

Unfortunately, the lack of animation when firing the toggleThumbs() API method has not been fixed for v1.4.3 but it has been logged as a bug and is due to be fixed in a future version (although I do not know exactly when).

I hadn't tried before to use the script in my embed code, but now that I do, it doesn't work for me.

You need to assign your 'juicebox' object a variable name so that it can be referenced when using the API methods and events.
In my example above (and in the code that you have placed in your web page), the 'juicebox' object has been given a name of 'jb'.
Therefore, in your gallery's embedding code, just change:

new juicebox({

... to:

var jb = new juicebox({

@amadeus77

Is there a problem with the navigation buttons in Touch Mode?

Yes. Currently, in Touch Mode, the main image nav buttons are not visible when showImageNav=ALWAYS" (they should be).

Any solution?

There is no workaround at the moment but the bug should hopefully be fixed soon.

3,079

(3 replies, posted in Juicebox-Pro Support)

It certainly sounds like your problems were web server related so hopefully your change of host will go smoothly and give consistent and predictable results.

I'm glad that my suggested solution works for you.
Thank you for posting back to let me know.

You currently have two lots of embedding code (the new juicebox() section) on your web page (the code from my example above and your original code) and your original gallery is the one which is initially being loaded into the 'juicebox-container' div on your web page, essentially overriding the gallery from my example. You would need to integrate your own gallery into the rest of the code from my example. Also, your web page currently loads the 'juicebox.js' file after the custom JavaScript code. Try loading the 'juicebox.js' file before the custom JavaScript code.
Try the following in your web page as your complete embedding code:

<script src="/wp-content/uploads/juicebox/journalism/jbcore/juicebox.js"></script>
<script type='text/javascript'> 
    var fii = 1;
    var sm = 'AUTO';
    var thresholdWidth = 600;
    var jb;

    function loadGallery(fii, sm) {
        jb = new juicebox({
            baseUrl : "/wp-content/uploads/juicebox/journalism/",
            containerId : "juicebox-container",
            galleryWidth : "100%",
            galleryHeight : "100%",
            backgroundColor: "#000000",
            firstImageIndex: fii,
            screenMode: sm
        });
    }

    function setScreenMode() {
        var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
        var mode = windowWidth < thresholdWidth ? 'SMALL' : 'LARGE';
        if (sm !== mode) {
            sm = mode;
            fii = jb.getImageIndex();
            loadGallery(fii, mode);
        }
    }

    $(document).ready(function() {
        $(window).resize(setScreenMode);
        loadGallery(fii, sm);
        setTimeout(function() {
            sm = jb.getScreenMode();
            if (sm === 'LARGE') {
                setScreenMode();
            }
        }, 500);
    });
</script>
<div id="juicebox-container"></div>

Hopefully this will help.

There were not many changes to the 'theme.css' file between v1.4.2 and v1.4.3 (mainly a few default value changes for things like opacity values and an entry to fix a bug relating to z-index values). There looks to be no changes which should cause any problems with imageNavPosition="STAGE" vs "IMAGE". However, there may be other changes to CSS generated dynamically by the 'juicebox.js' file.

I would certainly try using the stock v1.4.3 'jbcore' folder to see if your problems still occur.

You're welcome!
I'm glad you've got it working.
Thank you for posting back to let me know.

3,084

(3 replies, posted in Juicebox-Pro Support)

Inconsistent behavior such as the scenario you have reported is likely to be due to web server problems, especially if you have not made any changes to your web site files.
For example, if your web server is unable to serve the gallery's XML file in a timely manner when requested, then Juicebox will display the "Config XML file not found" message.
Please check with your web host to see if they have made any changes or have been experiencing any problems recently which might be contributing to your problem.

3,085

(1 replies, posted in Juicebox-Pro Support)

If you would like to check the integrity of your Juicebox-Pro zip file (to make sure that the file you have downloaded is not corrupt or incomplete), then you can check its MD5 or SHA1 hash using a free program such as HashCalc.
The 'juicebox_pro_1.4.3.zip' file should have the following MD5 and SHA1 hashes:
MD5: e6f229bca8f874217d9bee1a29cddd29
SHA1: 1ef543d1d8abd6eaa1b32395fd7ce5e35321a66d

If your own downloaded file's hashes do not match those above, then your zip file is corrupt and you will need to download the file again.
If you are having trouble downloading the file, then please try using a different browser (Chrome, Firefox, IE, Opera, Safari), ensure that you have JavaScript enabled before clicking the download link and temporarily disable any download accelerators or managers that you may have installed.

If your own downloaded file's hashes do match those above, then your zip file is fine and you should be able to unzip it and install JuiceboxBuilder-Pro and the Lightroom plugin following the instructions on the following pages:
JuiceboxBuilder-Pro: http://www.juicebox.net/support/juiceboxbuilder/
Lightroom plugin: http://www.juicebox.net/support/lightroom/

From the look of your first screenshot, it looks like you unzipping program (WinAce) is trying to extract the 'JuiceboxBuilder-Pro.air' file when you double-click it. This could be due to an incorrect file association on your computer.
.air files should be associated with the Adobe AIR Installer rather than WinACE. You should be able to unassociate .air files from running with WinAce within WinAce's options. This should revert to the default file association program for .air files.
Otherwise, uninstalling and reinstalling Adobe AIR should reinstate the correct file association.

Alternatively, as long as Adobe AIR is installed, the following should work fine to install JuiceboxBuilder-Pro (even if the file associations are incorrect or missing):

  • Right-click the 'JuiceboxBuilder-Pro.air' file.

  • Select 'Open with -> Choose default program...'.

  • Click the 'Browse...' button in the pop-up window.

  • Navigate to the following file and select (highlight) it: C:\Program Files (x86)\Common Files\Adobe AIR\Versions\1.0\Adobe AIR Application Installer.exe

  • Click then 'Open' button.

You may need to show hidden files to navigate to this location: http://windows.microsoft.com/en-us/wind … dden-files

unable to access the Web tab in lightroom after click on galleryInfo.Irweb

With regard to installing the Lightroom plugin, you should not be clicking directly on the 'galleryInfo.Irweb' file.
Just follow the installation instructions on the plugin's support page (link above).
Essentially, just copy the entire 'juicebox_pro_1.4.3/adobe-lightroom-plugin/juicebox_pro.lrwebengine' folder (not just the contents) to your Lightroom 'Web Galleries' folder ('C:\Users\username\AppData\Roaming\Adobe\Lightroom\Web Galleries\'). 'Juicebox-Pro' should then be listed as a Layout Style in the Web module.

Hopefully the information above will help.

As you are aware, the main image scales dynamically with the size of the user's browser window but the thumbnails do not.

Is it possible that if the window is reduced in width that it kicks in the responsive display shown on small screens ie mobile format?

You could perhaps use JavaScript to listen out for a change in the browser's width and display the gallery in Large Screen Mode if the width is greater than a certain threshold value and Small Screen Mode if the width is less than (or equal to) the threshold value. You would also need to use the Juicebox-Pro API. However, this might get a little complex as there would be several things to take into account and you may run into unforeseen problems.

(1) For example, you would need to ensure that the gallery switches Screen Modes only when the threshold is crossed (and not every time the browser window is resized).
(2) Also, if the gallery is displayed in a desktop browser of limited width, Juicebox would ordinarily display the gallery in Large Screen Mode but you would want the gallery to be displayed in Small Screen Mode in this instance.
(3) You would also need to ensure that the gallery is always displayed in Small Screen Mode where Small Screen Mode would normally be used.
(4) The only way to switch screen modes would be to reload the gallery with a different Screen Mode setting and when reloading a gallery, your would need to ensure that the currently displayed image is retained rather than the gallery displaying the first image in the gallery each time the switch is made.

There may be other considerations to take into account which I have not yet thought of.
However, you might like to try the following as a starting point (although please bear in mind that Juicebox was not designed with such functionality in mind).
To see the example in action, create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="minimal-ui" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">

            var fii = 1; // Set initial firstImageIndex to 1
            var sm = 'AUTO'; // Set initial screenMode to AUTO
            var thresholdWidth = 600; // Set thresholdWidth to 600px
            var jb; // Initialize Juicebox object variable for use with Juicebox-Pro API methods

            // Function to load gallery with specified firstImageIndex (to always display current image) and screenMode
            function loadGallery(fii, sm) {
                jb = new juicebox({
                    containerId: "juicebox-container",
                    firstImageIndex: fii,
                    screenMode: sm
                });
            }

            //Function to check width of browser window
            function setScreenMode() {
                var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
                var mode = windowWidth < thresholdWidth ? 'SMALL' : 'LARGE'; // Determine new screenMode variable
                if (sm !== mode) { // If screenMode variable changes, do the following...
                    sm = mode; // Set screenMode variable to be new screenMode value
                    fii = jb.getImageIndex(); // Set image number to be displayed when gallery is reloaded
                    loadGallery(fii, mode); // Load gallery with specified firstImageIndex and screenMode
                }
            }

            // Do the following when the web page is initially loaded
            $(document).ready(function() {
                $(window).resize(setScreenMode); // Run setScreenMode() function each time the browser window is resized
                loadGallery(fii, sm); // Load gallery with initial firstImageIndex (1) and screenMode (AUTO) settings
                setTimeout(function() { // Timeout required to give enough time for gallery to return actual screenMode used (SMALL or LARGE)
                    sm = jb.getScreenMode(); // Set screenMode variable to be actual screenMode used
                    if (sm === 'LARGE') { // If actual screenMode used is LARGE, do the following...
                        setScreenMode(); // Check width of browser window
                    }
                }, 500);
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

@cprblak

If I update to 1.4.3 again I'll post a link.

OK, thanks. I've not been able to see any strange behavior when using imageNavPosition="STAGE" vs "IMAGE" in v1.4.3 test galleries of my own. Perhaps the problem you have encountered is due to a certain combination of configuration options. If possible, please post the configuration options that your gallery uses so that I can try to replicate the problem for myself. Thank you.

You're looking at the right forum thread but the wrong code. (The code you posted above is specific to a user's own test case using ASP.NET Web API.)
The code you should be using is in this forum post.
Put the following code in a file named 'config.php' and upload it to the same directory as the HTML page which contains your gallery's embedding code. Also in this directory, create a folder named 'images' and upload all your images there.

<?php
header("Content-type: application/xml");
function GetDirArray($folder)
{
    $handle=opendir($folder);
    while ($file=readdir($handle))
    {
        if ($file!="." && $file!="..")
        {
            $ret[count($ret)]=$file;
        }
    }
    closedir($handle);
    sort($ret);
    return $ret;
}
$gallery=GetDirArray('images');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<juiceboxgallery title="Juicebox Gallery">';
for ($i=0; $i<sizeof($gallery); $i++)
{
    echo '<image imageURL="images/'.$gallery[$i].'" thumbURL="images/'.$gallery[$i].'" linkURL="" linkTarget="">';
    echo '<title></title>';
    echo '<caption></caption>';
    echo '</image>';
}
echo '</juiceboxgallery>';
?>

Now add the following to your gallery's embedding code:

configUrl : 'config.php',

For example, your gallery's embedding code might look something like this:

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

Now, your gallery will display all images in the 'images' folder and each time you upload images to the 'images' folder, they will automatically be displayed in the gallery when the gallery is viewed.

@cprblak

Please post the URL to your gallery so that I can take a look at the problem and investigate further. Thank you.

The after that they appeared on the image even though I had Stage set as the pref.

Please note that when imageNavPosition="STAGE", the navigation buttons are positioned relative to the edges of the gallery (rather than the edges of the image). If the image happens to be displayed close to the edges of the gallery, then the navigation buttons may be displayed on top of the image.

3,090

(6 replies, posted in Juicebox-Pro Support)

Adobe AIR (the platform on which JuiceboxBuilder-Pro runs) uses Adobe Flash Player as its runtime environment and the largest image size which Adobe Flash Player can handle is 16,777,215 pixels. This equates to a square image of 4095 x 4095. One dimension can be larger than 4095 but if the product of the width and height exceeds 16,777,215 pixels, then the error you have encountered will be triggered. Please see this web page for details: http://helpx.adobe.com/flash-player/kb/ … files.html

If you have larger images that you would like to use as source images for your gallery, you could perhaps resize them in an imaging program such as Adobe Photoshop before feeding them to JuiceboxBuilder-Pro. Rather than have your images resized twice (once by your imaging program and again by JuiceboxBuilder-Pro), you could use your imaging program to resize your images to the correct size for your gallery and then deselect the 'Resize Images' checkbox on the 'Images' tab (so that the images are not processed again by JuiceboxBuilder-Pro).

Alternatively, there are other methods of creating a Juicebox-Pro gallery which you might like to take a look at.
Please see here for details.

@amadeus77

The ImageNav (Arrows) that overlays the main image is missing on mobile devices (tested on Android 4.4.2) since updated to 1.4.3.

Since v1.4.3, the default value for showImageNav is HOVER and the image navigation buttons are displayed only when hovering over the 'previous' and 'next' hit areas. This is not possible on swipeable mobile devices so the image navigation buttons are hidden.

Second problem - not only since this version - this one existed before as well:

Do you see the problem in both Chrome and the stock Android browser (or just in one browser)?
Do you see the problem in any of our demo galleries here?
Please post the URL to your gallery so that I can take a look at the problem and investigate further. Thank you.

@cprblak

I've found with the 1.4.3 update my nav arrows completely disappeared on full size desktop gallery view with the first image.

Is your desktop monitor a touch-screen device?
What happens when you hover over the left and right sides of the main image? Do the main image nav buttons appear?

@amadeus77 & @cprblak
It looks like there may be a problem with displaying main image navigation arrows in Touch Mode (at least on mobile devices) when showImageNav=ALWAYS". I have notified the developers.

The solution you found in the forum thread you quoted should work fine on a Linux server (as long as PHP is installed) and will work with both Juicebox-Lite and Juicebox-Pro.
Just give it a try and it should work fine.
Also, now that Juicebox (since v1.4.3) scales the images used for the thumbnails (rather than center-cropping them), you could use a single folder of images for both the thumbnails and main images (without having to worry about creating a dedicated folder of thumbnail images).

Am I correct in that inactivityTimeout=0 is not needed when showInfoButton=TRUE has been set?

That is correct.
inactivityTimeout works only when showImageOverlay="AUTO" and showInfoButton="FALSE" so other ways to disable the timeout would be to set showImageOverlay="ALWAYS" or showImageOverlay="NEVER" or showInfoButton="TRUE".

This is actually a new feature whereby the overlay will auto-hide after a specified amount of time when the Info Button is not used and inactivity is detected. The configuration option which controls the amount of time is inactivityTimeout.

It is listed as the 4th entry in the v1.4.3 Version History list and can be found in the 'Customize -> Main Image' section of JuiceboxBuilder-Pro. (This could easily be overlooked so thank you for posting and giving me the opportunity to explain a little about this new functionality.)

A short description of inactivityTimeout can be found in the Main Image section of the Config Options page.

Number of seconds of inactivity before overlay is hidden. Set to 0 to disable inactivity timeout.

The default value for inactivityTimeout is 4 (seconds) but you can disable this timeout functionality by setting inactivityTimeout="0".

3,095

(5 replies, posted in Juicebox-Pro Support)

Your gallery's 'jbcore' folder is either in an incorrect location on your web server or has not been uploaded at all.

When manually embedding a Juicebox gallery in a CMS environment (such as Drupal), it can be difficult to know where to upload files and folders to (as the web pages are created dynamically by Drupal) so I would recommend that you embed your gallery using the baseUrl method of embedding as documented here. This method of embedding allows you to keep the gallery files inside the gallery folder and you would upload the entire gallery folder (not just the contents) to your web server. Also, it does not matter where on your web server you upload your gallery folder to as long as the paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

As an example, if you have a gallery folder named 'my_gallery_folder' and you upload the entire gallery folder to your web site's root directory, then you would be able to use the following embedding code. (This code could be used in any page throughout your web site without modification. The leading slashes in the paths denote your root directory.)

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

The WordPress plugin will be updated soon but you can update the plugin to Juicebox v1.4.3 manually by replacing the plugin's 'jbcore' folder ('wp-juicebox/jbcore') with the 'jbcore' folder from the Juicebox-Lite v1.4.3 zip package ('juicebox_lite_1.4.3/web/jbcore').

3,097

(8 replies, posted in Juicebox-Pro Support)

The bug referred to above (whereby the caption for the first image fails to display) has now been fixed in v1.4.3. Please see this blog entry for more information on the latest version.

3,098

(6 replies, posted in Juicebox-Pro Support)

The bug referred to above (whereby the caption for the first image fails to display) has now been fixed in v1.4.3. Please see this blog entry for more information on the latest version.

3,099

(3 replies, posted in Juicebox-Lite Support)

This bug (whereby main images may not display when selected in IE8 and IE9) has now been fixed in v1.4.3. Please see this blog entry for more information on the latest version.

3,100

(16 replies, posted in Juicebox-Pro Support)

The bug referred to above (whereby scrolling down a page containing an embedded gallery on an iOS 8 device jumps to the top of the page) has now been fixed in v1.4.3. Please see this blog entry for more information on the latest version.