Juicebox v1.5.1 Released!

2019-09-02 18:57:01

My apologies, the test site is on my PC and I put it into sleep when I go to bed. That URL should be working again for the next 15 hours or so.

Still no joy with the URL I'm afraid...

I hope that Ryan (or another Drupal Juicebox Module user) can help you out over in the Drupal forum but I suspect that trying to integrate my solution into the module will not be an easy task.

Maybe there's a different solution that a user of the bootstrap tab system that you use can recommend (perhaps they have experienced a similar issue with other HTML elements embedded into the tabs ).

Being that the problem resolves itself when the browser is resized, you could perhaps manually trigger a resize when your tab is clicked. (Such a solution would be independent of Juicebox and the module's code.)
Try adding the following code to your web page:

<script>
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            $(window).trigger('resize');
        });
    });
</script>

Again, this assumes that your 'Gallery' tab has an id="gallery_tab". (If not, then just change #gallery_tab in the code above to the correct 'id' for your 'Gallery' tab.)
It also assumes that jQuery is loaded into your web page. (Juicebox comes bundled with its own version of jQuery so as long as the code is run after the 'juicebox.js' file is loaded into your web page, then all should be fine.)
Please note that this proposed solution has not been tested so I do not know whether it will work or not, but it should be a fairly quick and easy thing to try (as long as you can get the JavaScript code into your web page).

2019-09-02 11:52:24

Thanks!

Edit:
For others reading this thread, although I have notified the developers, unless the 'juicebox.js' file is repacked using a different method, it will always trigger the Content Security Policy eval warning.
If you have a CSP in place and want to retain it whilst still allowing Juicebox to run, then you'll need to add 'unsafe-eval' to your CSP (and also 'unsafe-inline', too, if your gallery's embedding code is inline and not in an external JavaScript file.)
Relaxing the CSP to suppress warnings is not ideal by any means but I thought I should mention this in case it helps anyone.

2019-09-02 11:01:22

I get a lot of errors on the javascript console such as

I realise that in an ideal world, it would be great to have no '[Violation]' entries in the console but it is worth remembering that these entries are only present in Chrome and only when the debugging level is set to 'Verbose'. (They are not classed as 'Errors', 'Warnings' or even 'Info'.)

Just out of curiosity, I loaded a few popular web pages into Chrome (adobe.com, amazon.com, apple.com, microsoft.com, mozilla.org) and they all display '[Violation]' entries (of one type or another, some more than others) in 'Verbose' mode.

Of course after completing it I find I can't get rid of the 'unsafe-eval' in the policy

That's down to the way that the 'juicebox.js' file is packed which is a choice that the developers have taken.

The 'juicebox.js' file uses eval() and CSP does not allow the use of eval() ("Eval and related functions are disabled") so, unfortunately, Juicebox will not be fully compatible with CSP guidelines.
There really is nothing that can be done about this (at user level) at the moment, although I have notified the developers of this so it is in their hands now.

2019-09-02 10:21:37

I didn't realise that you had so many galleries! Hopefully you'll be finished by now.

I'm glad you've made the choice of having al your galleries share a single 'jbcore' folder (as documented here).
This will make updating all your galleries (when a new version of Juicebox is released) a simple matter of replacing just one 'jbcore' folder on your web server (instead of 233).
(I mention this just in case anyone else reading this thread also has a lot of galleries and is not aware that multiple galleries can share a single 'jbcore' folder.)

2019-09-02 09:40:06

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.

2019-09-01 19:07:06

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.

2019-09-01 18:16:13

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.

2019-09-01 09:14:19

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!

2019-08-31 10:49:30

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.

2019-08-30 17:14:48

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.

2019-08-30 10:54:47

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

2019-08-29 19:06:05

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

2019-08-29 11:32:17

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.

2019-08-27 20:45:33

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

2019-08-24 19:16:16

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

2019-08-24 19:03:35

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

2019-08-20 07:44:59

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.

2019-08-19 22:31:55

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

2019-08-14 18:18:17

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.

2019-08-13 09:18:29

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.

2019-08-05 13:36:08

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.

2019-08-05 13:28:20

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.

2019-08-02 23:05:41

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.

2019-07-28 11:54:31

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

2019-07-26 22:49:13

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.

Juicebox v1.5.1 Released!

Search options (Page 28 of 235)

Posts found: 676 to 700 of 5,867

676 Reply by Steven @ Juicebox 2019-09-02 18:57:01

Re: Bootstrap tabs\pills refresh problem (9 replies, posted in Juicebox-Pro Support)

677 Reply by Steven @ Juicebox 2019-09-02 11:52:24

Re: Content Security Policy and Juicebox (19 replies, posted in Juicebox-Pro Support)

678 Reply by Steven @ Juicebox 2019-09-02 11:01:22

Re: Content Security Policy and Juicebox (19 replies, posted in Juicebox-Pro Support)

679 Reply by Steven @ Juicebox 2019-09-02 10:21:37

Re: Content Security Policy and Juicebox (19 replies, posted in Juicebox-Pro Support)

680 Reply by Steven @ Juicebox 2019-09-02 09:40:06

Re: Bootstrap tabs\pills refresh problem (9 replies, posted in Juicebox-Pro Support)

681 Reply by Steven @ Juicebox 2019-09-01 19:07:06

Re: Bootstrap tabs\pills refresh problem (9 replies, posted in Juicebox-Pro Support)

682 Reply by Steven @ Juicebox 2019-09-01 18:16:13

Re: Bootstrap tabs\pills refresh problem (9 replies, posted in Juicebox-Pro Support)

683 Reply by Steven @ Juicebox 2019-09-01 09:14:19

Re: Content Security Policy and Juicebox (19 replies, posted in Juicebox-Pro Support)

684 Reply by Steven @ Juicebox 2019-08-31 10:49:30

Re: Content Security Policy and Juicebox (19 replies, posted in Juicebox-Pro Support)

685 Reply by Steven @ Juicebox 2019-08-30 17:14:48

Re: Content Security Policy and Juicebox (19 replies, posted in Juicebox-Pro Support)

686 Reply by Steven @ Juicebox 2019-08-30 10:54:47

Re: Content Security Policy and Juicebox (19 replies, posted in Juicebox-Pro Support)

687 Reply by Steven @ Juicebox 2019-08-29 19:06:05

Re: Content Security Policy and Juicebox (19 replies, posted in Juicebox-Pro Support)

688 Reply by Steven @ Juicebox 2019-08-29 11:32:17

Re: Content Security Policy and Juicebox (19 replies, posted in Juicebox-Pro Support)

689 Reply by Steven @ Juicebox 2019-08-27 20:45:33

Re: Localization: Title and caption (1 replies, posted in Juicebox-Lite Support)

690 Reply by Steven @ Juicebox 2019-08-24 19:16:16

Re: Navigation tool for thumb pages (1 replies, posted in Juicebox-Pro Support)

691 Reply by Steven @ Juicebox 2019-08-24 19:03:35

Re: Feature Requests (496 replies, posted in Juicebox-Pro Support)

692 Reply by Steven @ Juicebox 2019-08-20 07:44:59

Re: Show thumbnails font is missing (1 replies, posted in Juicebox-Pro Support)

693 Reply by Steven @ Juicebox 2019-08-19 22:31:55

Re: [Firefox] Juicebox Error: Config file not found [SOLVED] (5 replies, posted in Juicebox-Pro Support)

694 Reply by Steven @ Juicebox 2019-08-14 18:18:17

Re: Splash page on mobile (1 replies, posted in Juicebox-Pro Support)

695 Reply by Steven @ Juicebox 2019-08-13 09:18:29

Re: Config file not found (17 replies, posted in Juicebox-Lite Support)

696 Reply by Steven @ Juicebox 2019-08-05 13:36:08

Re: Crash ! (3 replies, posted in Juicebox-Pro Support)

697 Reply by Steven @ Juicebox 2019-08-05 13:28:20

Re: F5 Disabled in Firefox? (1 replies, posted in Juicebox-Pro Support)

698 Reply by Steven @ Juicebox 2019-08-02 23:05:41

Re: Crash ! (3 replies, posted in Juicebox-Pro Support)

699 Reply by Steven @ Juicebox 2019-07-28 11:54:31

Re: Multiple galleries embedding issue (6 replies, posted in Juicebox-Lite Support)

700 Reply by Steven @ Juicebox 2019-07-26 22:49:13

Re: Multiple galleries embedding issue (6 replies, posted in Juicebox-Lite Support)

Posts found: 676 to 700 of 5,867