651 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

Unfortunately, the URL you provided does not work so I cannot see your gallery's web page.

I don't really know where to apply the code...

If, for example, you are following the regular embedding instructions here, then you would just use the embedding code I provided (changing the gallery dimensions and background color as necessary) instead of the embedding code provided on the 'Publish' tab of JuiceboxBuilder. (It would just be a simple swap of code.)

Without being able to see your gallery's web page, I do not know how you are currently embedding your gallery.
If you are using the baseUrl method (which you might be using if you are following the Embedding in a Drupal Site instructions), then just amend the path to your 'juicebox.js' file and add the baseUrl entry (pointing towards the gallery folder) to the modified embedding code, for example:

<!--START JUICEBOX EMBED-->
<script src="/galleries/gallery1/jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            baseUrl: "/galleries/gallery1/",
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "600px",
            backgroundColor: "#222222"
        });
    }
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

However, if you are using the Juicebox Module for Drupal, then putting the embedding code into a JavaScript function and adding custom code to call the function when an element on your web page is clicked is not going to be easy. The module automatically embeds the gallery into your web page and you'd need to modify the module's source code to achieve this.

There are a couple of reasons why this may not be feasible, though.
(1) The Juicebox Module for Drupal was not written by ourselves and, as such, I am not overly familiar with the module's source code (and do not know how easy or difficult such a modification would be). Support for the module would be better directed towards the Drupal forum where the author of the module (Ryan Jacobs) might be able to help further.
(2) The Juicebox Module for Drupal uses a non-standard embedding method (it does not just drop the regular embedding code into the web page) so swapping the module's embedding code for my modified embedding code above is not going to be possible.

If you really need to get this working with your tabs, then I'd recommend following the Embedding in a Drupal Site instructions and using the modified baseUrl code that I posted above. Just make sure that both paths in the code (the path to the 'juicebox.js' file and the baseUrl entry, pointing towards the gallery folder) are correct.

Go to forum: Juicebox-Pro Support

652 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

Using fixed size in pixels does indeed fix the loading problem at the cost of responsiveness, but that's too much of a price to pay unfortunately.

It sounds like we're on the right track.

Regarding this suggestion, can you provide any more guidance please?

Sure!

Usually, your embedding could would look something like this:

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

Put the JavaScript section into a function and add an event listener (a click handler) to call the function (to load the gallery) when your 'Gallery' tab is clicked.
If, for example, your 'Gallery' tab has an id="gallery_tab", then your embedding code would look something like this:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "600px",
            backgroundColor: "#222222"
        });
    }
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps.
However, if you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look at your gallery's environment live on your web server and hopefully help further.
Thank you.

Go to forum: Juicebox-Pro Support

653 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

It sounds like, when the Juicebox gallery is loaded into the gallery container, the gallery container may exist on the web page but with no dimensions (being that it is not visible until the 'Gallery' tab is clicked). If the gallery has a galleryWidth of '100%' but the gallery container has no dimensions, then the gallery's actual width will be 100% of zero.

One possible solution would be to put the Juicebox embedding code into a JavaScript function and then call the function when the 'Gallery' tab is clicked (after the gallery container has been assigned dimensions).

Another possible solution might be to give your gallery a fixed pixel galleryWidth (for example '800px'), although this will prevent the gallery from being responsive in the horizontal dimension (which may or may not be a problem depending on the design and layout of your web page).

I hope this points you in the right direction.

Go to forum: Juicebox-Pro Support

654 Reply by Steven @ Juicebox

(19 replies, posted in Juicebox-Pro Support)

Thanks for your help.

You're welcome!

I figured it was hidden deep within the juicebox.js script and while it can be pretty printed I wasn't eager to go look.

Whilst you could technically decompress and pretty-print the 'jucebox.js' file, it still probably wouldn't make a lot a sense (a lot of descriptive variable names are changed in the compression process) and modification of the source code is not supported (see this FAQ). We'll need to wait for the developers on this one.

Now to change all those references to the inline script :-)

I hope you've not got too many to do!

Go to forum: Juicebox-Pro Support

655 Reply by Steven @ Juicebox

(19 replies, posted in Juicebox-Pro Support)

Thanks! That has fixed that problem.

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

On Chrome I'm still seeing a problem listed (which Firefox doesn't mention)

I see the 'Violation' entries in Chrome when setting the debugging level to 'Verbose'.
Unfortunately, there is nothing that a user can do to address this as the code which the 'Violation' entries refer to is buried deep within the 'juicebox.js' JavaScript file which is obfuscated and cannot be modified.
However, I have notified the developers who will investigate the issue.

Also curiously the button bar is shorter on 1.5.1 and so wraps onto a second line, which is annoying.

The Button Bar should not wrap unless there is not enough space for all buttons to be displayed on a single line.
I have created a test gallery (using the same configuration options that your gallery uses) and the Button Bar does not wrap there.
I notice that your 'juicebox.js' file is now v1.5.1 but your 'theme.css' file ('/juicebox/jbcore/classic/theme.css') is still v1.4.4.
Please ensure that all files within your gallery's 'jbcore' folder are up-to-date (v1.5.1) by replacing the existing 'jbcore' folder on your web server with the 'jbcore' folder from the Juicebox-Pro v1.5.1 zip package ('juicebox_pro_1.5.1/web/jbcore').
This should hopefully solve your problem.

Go to forum: Juicebox-Pro Support

656 Reply by Steven @ Juicebox

(19 replies, posted in Juicebox-Pro Support)

Thank you for providing the URL to your gallery's web page.

The <script> tag loading your 'juicebox-gallery.js' file is not closed and everything after it, up until the next closing </script> tag on your web page (including the 'juicebox-container' <div>), is being treated as JavaScript by the browser (so there is essentially no container on your web page for the gallery to be loaded into).
(Sorry I did not notice this in your post above. It was much easier to catch with syntax highlighting in my browser.)
Change:

<script src="/scripts/juicebox-gallery.js" id="juicebox" data-page="travel/manila">

... to:

<script src="/scripts/juicebox-gallery.js" id="juicebox" data-page="travel/manila"></script>

Hopefully this will resolve your problem.

Go to forum: Juicebox-Pro Support

657 Reply by Steven @ Juicebox

(19 replies, posted in Juicebox-Pro Support)

It looks like what you are doing should work.
In fact, I have just recreated your setup and it works for me, without any console errors.

The console errors you are seeing may be unconnected to the passing of the data value.
"Cannot read property 'trySetContainerSize'" certainty sounds like a problem with Juicebox being unable to size the gallery correctly.

Please post the URL to your gallery's web page so that I can see the problem for myself.
Once I'm able to see the problem live on your web server, I might be able to determine the exact cause of the problem and propose a solution.
Thank you.

Also, if you are not already using the latest version of Juicebox-Pro (v1.5.1), then please try upgrading your gallery to see if this helps.
(I have been using Juicebox-Pro v1.5.1 in my own tests and have not seen the console errors you reported.)
If necessary, full instructions for downloading the latest version of Juicebox-Pro and upgrading existing galleries can be found in the Upgrading Juicebox support section.

Incidentally, shareURL is not a configuration option that needs to be set in the gallery's embedding code.
It is used only by JuiceboxBuilder-Pro to set valid Open Graph meta tags in the gallery's 'index.html' web page.
shareURL is included in a gallery's 'config.xml' file simply so that JuiceboxBuilder-Pro can read it when the gallery is opened for editing.
(shareURL is not used by Juicebox when a gallery is displayed.)

Go to forum: Juicebox-Pro Support

658 Reply by Steven @ Juicebox

(19 replies, posted in Juicebox-Pro Support)

If you do not want to use a query string (or a #) to pass a parameter via a URL, then I'm not exactly sure how you want to pass a parameter to the script (intended to avoid using inline JavaScript) without actually using inline JavaScript to pass the parameter.

You could perhaps set a session cookie (and grab the cookie's contents from within the script) but then you'd probably need separate scripts (to avoid using inline JavaScript) to set the cookie's functions and to set the cookie's contents (and it all seems to be overcomplicating matters somewhat).

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <script src="jbcore/juicebox.js"></script>
    <script src="cookie.js"></script>
    <script src="create_cookie.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="juicebox-container"></div>
</body>
</html>

'cookie.js':

function createCookie(name, value) {
    document.cookie = name + '=' + escape(value) + '; path=/';
}

function readCookie(name) {
    var re = new RegExp('(?:^|;)\\s?' + name + '=(.*?)(?:;|$)', 'i'), result = document.cookie.match(re), output = null;
    if (result != null) {
        output = unescape(result[1]);
    }
    return output;
}

function eraseCookie(name) {
    var d = new Date();
    document.cookie = name + '=; path=/; expires=' + d.toUTCString();
}

'create_cookie.js':

createCookie('base', '/galleries/gallery_1/');

'script.js':

var base = readCookie('base');
eraseCookie('base');

new juicebox({
    baseUrl: base,
    containerId: 'juicebox-container'
});

I guess this might not help as it still leaves us with the problem of how to get the parameter into the 'create_cookie.js' script without using inline JavaScript. It just shifts the problem around a bit (and avoids using a query string).

I do not know how (or where) your baseUrl and shareUrl parameters are being generated but if they are already being generated in another external script, then maybe you could just set the cookie directly from within this script (and it could still be read from the 'script.js' file above).

If you just want to set a global JavaScript variable for your parameter, then the problem still exists (at least in my own understanding) of how to set it without using inline JavaScript. I guess I really need to know how and where your baseUrl and shareUrl parameters are being generated so if you could please elaborate on that, then it might help me to try to formulate a solution.
Thank you.

I hope this helps (or at least gives you a little more food for thought).

Go to forum: Juicebox-Pro Support

659 Reply by Steven @ Juicebox

(19 replies, posted in Juicebox-Pro Support)

You should be able to move the entire JavaScript embedding code into a separate script and then just load this script after loading the 'juicebox.js' script.
I think this should work OK.
At its most basic:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <script src="jbcore/juicebox.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="juicebox-container"></div>
</body>
</html>

'script.js':

new juicebox({
    containerId: 'juicebox-container'
});

I'm not sure what parameter you'd like to pass in the URL but you could do so with a query string, e.g.:

http://www.example.com/index.html?text=hello

You could then fetch the query string parameter from within the script using code such as:

if (window.location.search) {
    var key = 'text';
    var queryArray = {};
    var queryComponent;
    var queryString = unescape(window.location.search);
    var re = new RegExp('([^?=&]+)(?:=([^&]*))?', 'g');
    while (queryComponent = re.exec(queryString)) {
        queryArray[queryComponent[1]] = queryComponent[2];
    }
    var value = queryArray[key];
    // Do something with 'value' variable ("hello" in the example above)
}

(This may not be the most compact/optimized code for fetching a query string but it does handle multiple query string parameters.)

I'm not sure if this is exactly what you are looking for but it might point you in the right direction.

Go to forum: Juicebox-Pro Support

660 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Lite Support)

There is no way to auto-translate image titles and captions.
You'd really need to set up a separate XML file for each language that you want to support (same image data in each one, just with image titles and captions in different languages).

You could then load the gallery with the appropriate XML file using a configUrl (and a JavaScript variable) in the gallery's embedding code. (The configUrl option is noted in the Embed Options.)

For example, to support English, French and Spanish, you could have three XML files named 'config_english.xml', 'config_french.xml' and 'config_spanish.xml'.
You could then use something like the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>

    var lang = navigator.language.substring(0, 2).toLowerCase();

    var file;

    switch(lang) {
        case 'en':
            file = 'config_english.xml';
            break;
        case 'fr':
            file = 'config_french.xml';
            break;
        case 'es':
            file = 'config_spanish.xml';
            break;
        default:
            file = 'config_english.xml';
            break;
    }

    new juicebox({
        configUrl: file
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });

</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

For reference, navigator.language is documented here.

I hoe this helps or at least points you in the right direction.
(The code above could certainly be optimized but I've tried to make it easy to read and understand.)

Go to forum: Juicebox-Lite Support

661 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Many thanks for the suggestion (for a Juicbeox-Pro equivalent to SimpleViewer-Pro's thumbNavStyle="NUMERIC").
I've copied your post to the Feature Requests thread (here) where it will be seen by the developers.

I know that I've already mentioned this to yourself in an email but for anyone else reading this thread, it should be possible to achieve something like this manually using the Juicebox-Pro API (with help from the showThumbPage method) but knowledge of HTML and JavaScript would be required and you might need to get a little creative with the styling (SimpleViewer-Pro's thumbNavStyle="NUMERIC" used an ellipsis when too many thumbnail pages existed for there to be a link to every single one at once) and you might also need to overcome potential pitfalls along the way (such as the fact that the number of thumbnail pages may change in a responsive gallery if the browser window dimensions change).

An automated solution built-in to Juicebox-Pro would undoubtedly be easier to setup and use so thank you for the suggestion.
(Just a quick disclaimer, though, that I do not know what suggestions will be picked up by the developers and implemented in future versions.)

Go to forum: Juicebox-Pro Support

662 Reply by Steven @ Juicebox

(496 replies, posted in Juicebox-Pro Support)

Feature request (for Juicebox-Pro equivalent to SimpleViewer-Pro's thumbNavStyle="NUMERIC") from Theorangepaper (original thread):

Navigation tool for thumb pages

Created with svBuilder-Pro I had a gallery of 2,626 historic Spanish orange crate labels diaplayed in my virtual Orange Wrapper Museum OPIUM www.opiummuseum.de. On the left hand side I definded a thumb area of 6 x 8 resulting in 55 thumb pages. Below the thumbs I placed a small navigation bar which gave the visitor direct access to any of the 55 thumb pages and thereby to any of the 2,626 main images. A visitor could easily arrive at any rear part of this large gallery or even hop to its very end.

It seems to me that there is no comparable  navigation tool available in JuiceboxBuilder-Pro. To arrive at rear parts of a gallery or even hop to its end one has to sequentially run through the main images or at least through the thumb pages. In small galleries this might not be overly important. But the larger a gallery gets the more it becomes tedious and time demanding to run through it sequentially and the more important would it be to have random access to all images of the gallery. I therefore suggest to add a complete small navigation tool across the thumbs to JuiceboxBuilder-Pro.

To clarify what I mean I have prepared a comparison of a small gallery with 231 images only created with svBuilder-Pro with the same gallery created with JuiceboxBuilder-Pro. You can view it here, if you want: www.opiummuseum.de/spankist.vergleich.htm . But please imagine the gallery had not 231, but 2,626 entries.

Dirik von Oettingen
Germany

Go to forum: Juicebox-Pro Support

663 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

The icons within a Juicebox gallery are, indeed, characters in a custom font.
The font files are stored inside the gallery's 'jbcore' folder in this location: jbcore/classic/fonts/
Inside the 'fonts' folder should be the following files:

  • juicebox.eot

  • juicebox.svg

  • juicebox.ttf

  • juicebox.woff

Make sure that all these font files are in the correct location on your web server (just reinstate your gallery's entire 'jbcore' folder with a fresh version from the Juicebox-Pro zip package) and also that the permissions of these files (and their parent folders) are not too restrictive. Default permissions of 644 for files and 755 for folders should be fine. You should be able to check and change file and folder permissions with a dedicated FTP program (such as Filezilla) or via your web hosting account's online file manager.

Hopefully the suggestions above will help to resolve your problem. However, If you continue to experience difficulties, then please ask your web host to check the MIME types for these font files on your web server.

Go to forum: Juicebox-Pro Support

664 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

@fkelly12054

I'm glad you found this thread and that you were able to implement the workaround on your two computers.
The developers are certainly aware of the issue and I expect that they will incorporate a more meaningful message into a future version of Juicebox-Pro and update the local viewing FAQ on the website in due course.
In the meantime, I'll keep pointing anyone who posts in the forum experiencing this issue to this topic.

Go to forum: Juicebox-Pro Support

665 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

I'm not entirely sure what the problem is but here are 3 things that you can try.

(1) I notice that you are currently using Juicebox-Pro v1.4.3.2.
There have been 5 official releases since v1.4.3.2 (the current version being v1.5.1) with many bugfixes. Please see the Version History page for a full list of changes between versions.
I would recommend upgrading your Juicebox-Pro galleries to the current version to see if this helps with your problem.
Full instructions for downloading the latest version and upgrading existing galleries can be found on the Upgrading Juicebox support page.
(You can upgrade an existing gallery by simple swapping its current 'jbcore' folder with the 'jbcore' folder from the latest Juicebox-Pro download zip package ('juicebox_pro_1.5.1/web/jbcore').)

(2) I notice that your 'Urbano' gallery uses slightly different configuration options than your 'Paisajes' gallery (for example).
Try changing your 'Urbano' gallery's 'config.xml' file to make sure that it uses the same configuration options as your other 2 galleries. This might help.

(3) Your 'Urbano' gallery currently has both a galleryWidth of '100%' and a galleryHeight of '100%' (set in the gallery's embedding code) whereas your 'Paisajes' gallery (for example) has a galleryHeight of '100%' but a galleryHeight of '80%'.
Try changing your  'Urbano' gallery's galleryHeight to '80%', in line with your other 2 galleries, in case this makes a difference.
(If a gallery has both a galleryWidth of '100%' and a galleryHeight of '100%' but the gallery's parent containers do not have heights specified by CSS, then Juicebox might determine that the gallery takes up the entire web page (100% x 100%) and the gallery's layout may differ because of this.)

Hopefully these suggestions will help,
Please let me know how you get on and if I can be of any further assistance.

Go to forum: Juicebox-Pro Support

666 Reply by Steven @ Juicebox

(17 replies, posted in Juicebox-Lite Support)

You're welcome!
I'm glad to hear that you've got everything working. Thank you very much for letting me know. It's most appreciated.

Incidentally, I've notified the developers of both issues above: the inability to view galleries locally in Firefox 68 and the strange problem regarding the use of ../ in the baseUrl (again, locally in Firefox).
I'm not sure what, if anything, can be done from within Juicebox to counter either of these issues (I expect nothing can be done with regard to the former) but at least bug reports have been filed and we have workarounds in the meantime.

Go to forum: Juicebox-Lite Support

667 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

You're welcome!
At least there is a workaround if you ever need to create a large gallery.
It's unfortunate but the problem seems to be a limitation of Adobe AIR with little that can be done from within JuiceboxBuilder-Pro's code to overcome it.
However, a bug report has been logged so, if anything can be done to improve the situation, at least the developers are aware of the issue.

Go to forum: Juicebox-Pro Support

668 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Having a Juicebox gallery embedded on a web page should not disable Firefox's F5 reload-page functionality (and Juicebox-Pro does not have a configuration option to do this).
In fact, I've just loaded all 21 demo gallery pages (including embedded and full page galleries) from our demo overview page here and F5 reloads all pages without issue (Firefox 68.0.1, Windows 10 PC).
Try the demo galleries yourself to see if the problem in your browser is with all Juicebox gallery pages or just your own.
Maybe a fresh install (complete uninstal and reinstall) of Firefox will solve your problem.

Go to forum: Juicebox-Pro Support

669 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

There is no limit to the number of images that you can have in a gallery but you might not be able to add all the images to JuiceboxBuilder-Pro at once.

Unfortunately, if you try to add many images to JuiceboxBuilder-Pro at once, then Adobe AIR (the platform on which JuiceboxBuilder-Pro runs) may not be able to allocate enough memory for the task at hand. Even if your computer has plenty of free RAM, Adobe AIR applications are limited to around 1GB of memory allocation (as far as I am aware).
The workaround is to add your images in multiple smaller batches. Trial and error will help to determine a safe number of images per batch (it will depend on your own images). From your notes, it sounds like you should be able to add images in batches of 100 (or less). Try adding 100 images in your first batch and then the remainder of 78 images afterwards.

I hope that adding your images in a few separate actions instead of just one is not too much of an inconvenience although I realise that it is not ideal.

Go to forum: Juicebox-Pro Support

670 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Lite Support)

... that worked nicely...

Thank you for trying this. This suggests that incorrect paths or rewrite rules are not the cause of your problem.

Thank you also for reinstating your 'shumbatestgallery' gallery folder and for changing the embedding code in in your gallery's web page.
I have taken another look at your gallery's web page and see that the gallery is actually being embedded correctly.
It is just not visible because the gallery has a width of 100% but it is nested within a <td> element on your web page which has a width of 4px (so the gallery's actual width on your web page is 100% of 4px which is 4px).
If you want to continue using a gallery width of 100%, then you'll need to ensure that your gallery's parent containers all have widths (set via CSS) large enough to accommodate a gallery (much larger than 4px).
(I mentioned a similar problem above with heights as heights usually need to be defined whereas widths usually have a default value of 100%.)
Otherwise, if your table has a fixed width, then you might like to give your gallery a fixed width, too (although sorting out the dimensions of your table elements might be a better option, especially if your table is responsive and you want your gallery to be responsive, too).

Here are two possible solutions (which might require further tweaking depending on the layout of your page and the current dimensions of your gallery's parent containers).

#1 Give your gallery a fixed width
It looks like your gallery's parent <td> container currently has a width of 604px so try the following embedding code:

<!--START JUICEBOX EMBED-->
<script src="/shumbatestgallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "/shumbatestgallery/",
        containerId: "juicebox-container",
        galleryWidth: "604",
        galleryHeight: "600",
        backgroundColor: "rgba(34,34,34,)"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

... or:

#2 Give the <table> that the gallery is nested within a width of 100% via CSS
Leave your gallery's width at 100% and add the following to the <head> ... </head> section of your gallery's web page:

<style>
    table {
        width: 100%;
    }
</style>

I hope this helps.

Go to forum: Juicebox-Lite Support

671 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Lite Support)

Thank you for trying my suggestion but I notice that the paths in your embedding code are incorrect.
I meant for you to try the exact code I posted above (rather than just adding a leading slash to your full https:// path).
Please try again using the code I posted above.

Incidentally, I notice that you seem to have removed your 'shumbatestgallery' gallery folder and have replaced it with a 'shumbatestgallery1' gallery folder which seems to an incomplete gallery folder (it does not contain a 'config.xml' file).

If reinstating your original 'shumbatestgallery' gallery folder and using the code from my previous post does not work, then please try the following.

(1) Create a sample gallery in JuiceboxBuilder-Pro and save it to a new empty folder named 'my_gallery'.
(2) Upload the entire 'my_gallery' folder to your root directory.
(3) Create a new HTML file in a plain text editor containing the code below and name it 'test_file.html'.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="/my_gallery/jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        baseUrl: "/my_gallery/",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

(4) Upload the 'test_file.html' file to your root directory (alongside your 'my_gallery' folder).
(5) You should now be able to view the gallery on its own web page by visiting https://www.ridgeback-douala.net/test_file.html

This should test the baseUrl functionality on your web server.

If this test scenario works, then something on your own gallery's embedding page may be causing the problem.
Load your own gallery's embedding page and check your browser's developer tools for JavaScript errors, custom CSS which might be hiding the gallery or HTML elements which might be obscuring the gallery.

If this test scenario does not work, then something on your web server may be causing the problem.
Check to see if you have an '.htaccess' file on your web server with any rewrite rules which might be interfering with the gallery files.

I hope this points you in the right direction.

Go to forum: Juicebox-Lite Support

672 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

You're welcome!
I'm glad it worked for you. Thanks for posting back to let me know.

I hope you have a good weekend, too!

Go to forum: Juicebox-Pro Support

673 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Lite Support)

I notice that you use absolute paths in your embedding code starting with http:// but you quote your website URL with an https:// link.

Try using relative paths in your embedding code starting with leading slashes (to denote your root directory).
This should work with both http:// and https:// (and also for accessing your domain with and without the www subdirectory).

Also, as you currently use a galleryHeight of 100%, this means that the gallery's actual height will be 100% of the height of the gallery's parent container so be sure to assign your gallery's parent container a height via CSS (otherwise Juicebox might not be able to determine what the gallery's actual height should be).
Try setting a galleryHeight of 600px, at least for testing purposes, to be sure that the gallery has valid dimensions and will be visible once the path problems have been ironed out.

Try the following:

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

Hopefully this will help.
Please let me know how you get on. Thank you.

Go to forum: Juicebox-Lite Support

674 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

Unfortunately, very recently, Firefox 68.0 (released on 9 July 2019) introduced a new security restriction (very similar to the Safari 11 issue) which blocks the loading of Juicebox galleries locally (from your computer's hard drive). (As you have discovered, there is no problem once the gallery has been uploaded to a web server.)

Here is the relevant entry from the Firefox 68.0 Release Notes: https://www.mozilla.org/en-US/firefox/6 … easenotes/

Local files can no longer access other files in the same directory.

It's an unfortunate turn of events but, thankfully, not an insurmountable problem as there is a workaround.

Here are the steps required to relax this security restriction:
(1) Enter about:config in your Firefox browser's address bar.
(2) Click past the warning via the "I accept the risk!" button.
(3) Enter privacy.file_unique_origin in the search bar.
(4) Double-click the Preference Name to change the Value from 'true' to 'false'.

***Please do so at your own risk*** (although this should be no more of a risk than running the previous version of Firefox (67.0.4)).

This should allow you to, once again, view your galleries locally in Firefox.
I hope this helps.

Go to forum: Juicebox-Pro Support

675 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

Problem solved via email. (Full uninstallation/reinstallation solved problem.)

Go to forum: Juicebox-Pro Support