OK. It wasn't mentioned in the embedding options.

Set showImageOverlay="ALWAYS" in JuiceboxBuilder-Pro's 'Customize -> Main Image' section.

Can you set this in the embed options?

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.

Yes I realise there is nothing I (or you) can do about it, I just wanted to flag it and hopefully the developers will consider the needs of people who want to implement content security.

Oh yes a single jbcore is a win. Of course after completing it I find I can't get rid of the 'unsafe-eval' in the policy

EvalError: call to eval() blocked by CSP juicebox.js:14:1

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

198 down, 35 to go !

Steven @ Juicebox wrote:

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.

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.

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.

Bugger missed that one. Now fixed too. Thanks for your help. Now to change all those references to the inline script :-)

Thanks! That has fixed that problem. A second set of eyes is always helpful.
On Chrome I'm still seeing a problem listed (which Firefox doesn't mention)

VM6664:1 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

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

OK I have updated the juicebox.js file to 1.5.1 and it is still complaining.

Bugger my Lightroom plugin is claiming to be 1.4.4.1

My test page https://stage.mrp.net/photos/travel/manila/ should illustrate what I'm seeing. I believe that I am using 1.5.1.

The baseUrl and shareUrl parameters are hard coded into the page but as the juicebox data hides in a different directory structure to the web pages for each gallery I was wondering if there was a way to use a single global script and then indicate to it which juicebox/web directory was being accessed through a DATA-* on the script.
At the moment the following is embedded in a page

<!--START JUICEBOX EMBED-->
<script>
  new juicebox({
    shareURL: "https://www.mrp.net/photos/travel/manila" ,
    baseUrl : '/juicebox/travel/manila/',
    containerId : 'juicebox-container',
    galleryTitlePosition: 'NONE',
    galleryWidth : '100%',
    galleryHeight : '100%',
    backgroundColor: '#FFFFFF',
    textColor: '#FFFFFF',
    enableDirectLinks: 'FALSE',
    autoPlayOnLoad: 'TRUE',
    showAutoPlayButton: 'TRUE',
    showOpenButton: 'FALSE',
    enableLooping: 'TRUE',
    shareTwitter: 'TRUE', 
    shareFacebook: 'TRUE', 
    shareGPlus: 'FALSE',
    imageTransitionType: 'CROSS_FADE'
  });
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

where "travel/manila" is the variable part if this was a global script.

If I try something like

<!--START JUICEBOX EMBED-->
<script src="/scripts/juicebox-gallery.js" id="juicebox" data-page="travel/manila">
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

where juicebox-gallery.js is

var page = document.getElementById("juicebox").getAttribute("data-page");
var shareURL = 'https://www.mrp.net/photos/' + page;
var baseUrl = '/juicebox/' + page + '/';
new juicebox({
        shareURL : shareURL,
        baseUrl : baseUrl,
        containerId : 'juicebox-container'
      });

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

VM3355:1 Uncaught TypeError: Cannot read property 'trySetContainerSize' of null
    at display_error_message (eval at <anonymous> (juicebox.js:14), <anonymous>:1:261537)
    at eval (eval at <anonymous> (juicebox.js:14), <anonymous>:1:263492)

I was hoping to avoid passing the parameter via a query string and using a data object instead. I need to pass in the part of the shareURL and baseUrl that changes depending on the page/gallery.

I am using many embedded galleries on my web site. I'm trying to tighten up my content security policy and that presents a problem. It is recommended that 'unsafe-inline' not be used for script-src but you need it because of the <script> used for embedding. Has anyone managed to convert it into a script that can be loaded? You'd need to be able to pass in a parameter for the URL/URI.