4,351

(4 replies, posted in Juicebox-Pro Support)

Currently, it is a little difficult to set different background colors for normal and fullscreen modes.
One solution I posted in this forum thread involves using the Juicebox-Pro API and JavaScript and would be difficult to integrate into WP-Juicebox.

One possible workaround would be to set expandInNewPage="TRUE" in your gallery's 'Pro Options' text area and, although your expanded gallery's background will still be transparent, the gallery will be displayed against a blank page in your browser.

However, we plan to introduce separate background color controls for normal and fullscreen modes in a future version of Juicebox-Pro (though I do not know when this is likely to be released).

Please ensure that you are using the most recent version of Juicebox-Pro (v1.3.2).
The meta tag you refer to was removed from Juicebox-Pro in v1.2.0.
Please see the Upgrading Juiecbox page for details.

To remove the meta tag from existing galleries, you can either open and re-save your gallery using JuiecboxBuilder-Pro v1.3.2 or open the gallery's 'index.html' page in a plain text editor and remove the meta tag manually.

4,353

(4 replies, posted in Juicebox-Pro Support)

When using a percentage height, it is necessary to ensure that all parent containers of the gallery have heights specified by CSS so that Juicebox can determine what its own height should be (e.g. if the gallery's height is 100%, Juicebox needs to know what its height should be 100% of).
This can be difficult to ensure in a WordPress environment where parent containers are created by code not generated by WP-Juicebox itself (ie. the active WordPress theme).
Also, when using a percentage height, it may be necessary to implement the suggestion noted here.
Again, this is not practical within WordPress which is why the default value for a WP-Juicebox gallery's height is a fixed pixel value rather than a percentage.
If you really want to set the gallery's height as a percentage, I would recommend trying out different themes to see which ones work best.

4,354

(11 replies, posted in Juicebox-Lite Support)

You have hard-coded URLs using the 'www' subdomain in your gallery's embedding code but have provided URLs without this subdomain. If you go to http://www.lorenaprado.com.br/teste/ your gallery will display OK.
All gallery files must be on the same domain or subdomain as the page containing the JavaScript embedding code due to the same-origin policy.
Use relative paths within your embedding code and your gallery will display on both http://lorenaprado.com.br/ and http://www.lorenaprado.com.br/

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

4,355

(3 replies, posted in Juicebox-Lite Support)

According to your gallery's embedding code on your web page, the 'juicebox.js' file should be located at http://www.simonamango.com/jbcore/juicebox.js but it is not there.
Where on your web server have you uploaded your gallery files to?
If you upload the contents of your gallery folder to your web site's root directory (the same directory as the page containing the gallery's embedding code, following the instructions here), then your gallery should display OK.
If you have uploaded your complete gallery folder somewhere (rather that just the contents) then you can use the baseUrl method of embedding documented here.

4,356

(3 replies, posted in Juicebox-Lite Support)

First of all, make sure that your gallery's embedding code is actually in the web page itself.
Open the web page in a browser and view the source of the web page to ensure that the embedding code is there.
Next, check that the gallery files have actually been uploaded to your web server. You can check this with a dedicated FTP program such as Filezilla.
If the embedding code and the gallery files are both present, then there is likely to be a problem with one or more paths to the files.
Take a look at the Troubleshooting Pathing Problems support section to see if it helps.
This FAQ may also help:
When I view my gallery, I see a blank area. Why?

If you continue to experience difficulties, please port the URL to your gallery's web page so that I can take a look and help further.

4,357

(3 replies, posted in Juicebox-Pro Support)

Sorry, I overlooked that part of your query.
You need to provide your audio track in two formats (OGG and MP3) in order for the audio to play in all browsers. (Some browsers support OGG, others support MP3.)
You have set only audioUrlOgg in your gallery's XML file. You need to convert your audio track to an MP3 file and set audioUrlMp3, too. Please see the Adding Audio support section for details.
Hopefully this will solve your problem.

4,358

(11 replies, posted in Juicebox-Pro Support)

We are aware of the gallery-sizing/navigation bar issue on iOS 7 and hope to have it fixed in the next version of Juicebox.

With older versions of iOS, the following code could be added to the <head> section of a web page to auto-hide the navigation bar and it might be worth trying on iOS 7.

<script>
    window.addEventListener("load", function() {
        setTimeout(function() {
            window.scrollTo(0, 1);
        }, 0);
    });
</script>

On further investigation, the problem seems to be related to MenuMachine. There is a known conflict between MenuMachine and jQuery scripts (Juicebox uses jQuery). Please see this MenuMachine knowledge base article for a possible fix.
Chrome and Safari are both based on the same rendering engine (WebKit) which is why the problem manifests itself in both browsers.
Unfortunately, MenuMachine no longer seems to be actively developed (the last version v2.2.1 is dated 28 May 2007) and the JavaScript file itself is obfuscated which makes debugging difficult.
If the suggested fix does not work, then I would recommend using a more up-to-date and bug-free menu system which is compatible with jQuery scripts across all browsers.

(note: according to the validator, a few of the errors seem to be within the juicebox script itself, but I could be reading that wrong.)

JuiceboxBuilder-Pro generates valid HTML 5 code.
If your web page uses a different Doctype Declaration (such as HTML 4.01 Transitional), then an error may be given within the Juicebox embedding code for the <script> tag not having a 'type' attribute. Such errors should really be fixed (to comply with the Doctype Declaration you choose to use) but will not affect the display of your web page in any browser.
We recommend using the HTML 5 Doctype Declaration as noted here.

Do you have an idea what I could study to make this more understandable to me and to be able to do something effective.

Knowledge of HTML would certainly be useful when trying to fix errors on a web page.
A useful resource and a good starting point might be W3Schools.

4,360

(3 replies, posted in Juicebox-Pro Support)

Your gallery uses imageScaleMode="NONE" so large images are not scaled down to fit within smaller screens.
Try using imageScaleMode="SCALE_DOWN" instead.
Descriptions of all the possible imageScaleMode values can be found in the Main Image Options section of the Config Options page.

4,361

(1 replies, posted in Juicebox-Pro Support)

Try upgrading your gallery from Juicebox-Pro v1.0.2 to the latest version (v1.3.2) by following the instructions on the Upgrading Juicebox page to ensure that any bugs that were present in v1.0.2 but which have since been fixed are not contributing to your problem.
There have been many bugfixes since v1.0.2. For a full list of changes, please see the Version History.

Also, try removing all the code after the closing </html> tag on your web page. (There should be no code after this tag.)

4,362

(3 replies, posted in Juicebox-Pro Support)

The Juicebox plugin for Lightroom is fully compatible with Lightroom 5. (It requires a minimum of Lightroom 4.)

A few things to try which may help are:

(1) Upgrade your gallery from Juicebox-Pro v1.2.0 to the latest version (v1.3.2) by following the instructions on the Upgrading Juicebox page to ensure that any bugs that were present in v1.2.0 but which have since been fixed are not contributing to your problem.
For a full list of changes, please see the Version History.

(2) Validate the code on your web page with the W3C Markup Validation Service and fix the HTML errors that are reported. Once the code on your web page validates correctly, your page should be rendered with greater predictability and consistency across different browsers.

(3) As you are using a percentage height for your gallery (100%), you may need to implement the suggestion from the Using Percentage Heights support section. Otherwise, try setting your gallery's height to a fixed pixel value.

4,364

(3 replies, posted in Juicebox-Pro Support)

Not sure, but the update cycle of the plugin seems not to be the same like the main application JuiceboxBuilder!?

The plugin requires additional code over and above the Juicebox core code (to integrate Juicebox within Lightroom and to provide the user with an interface in the Lightroom Web section).
When a new version of Juicebox is released, a new version of the Lightroom plugin will be released.
However, if any bugs are found in the Lightroom plugin code, an interim version may be released (between Juicebox releases).

Does the plugin cover all the features of JuiceboxBuilder and also the features included in the PRO version?

The Lightroom plugin features individual controls for Juicebox-Lite configuration options and Juicebox-Pro options can be entered as text into the 'Pro Options' text area (see Step #4 in the 'Upgrading to Juicebox-Pro' instructions on the Lightroom Plugin page for details).

Do I need to buy the PRO version of JuiceboxBuilder or is the Lightroom plugin completely separate from that?

The Lightroom plugin comes bundled with Juicebox-Lite so is completely free and can be downloaded from this web page.
If you were to purchase Juicebox-Pro (to use Pro Options) then you could upgrade the plugin by following the 'Upgrading to Juicebox-Pro' instructions on the page I linked to above.

4,365

(2 replies, posted in Juicebox-Pro Support)

- "Home" button does not display on the phone.

Your gallery sets showSmallBackButton="false". Change this to showSmallBackButton="TRUE" for the Back Button to be displayed in Small Screen Mode.

- Buttons and caption do not disappear when I tap on the phone

Your gallery sets showInfoButton="true" and this disables the default behavior controlling the overlay visibility. (This is noted in the description of the showInfoButton configuration option in the Button Bar Options section of the Config Options page.)
When the Info Button is displayed on the Button Bar, the overlay can be toggled on and off by tapping the Info Button (rather than anywhere on the screen).

- Gallery's dimensions fit the browser space if I scroll to hide the adress bar, but when the gallery is first displayed the address bar is visible, hence the page is not centered. As a consequence, caption is not visible.
- Buttons are a lot smaller (2-3 times smaller) than when my gallery was at 100%

These are both direct consequences of your gallery not having 100% x 100% dimensions which exactly fill the viewport.
By default, a Juicebox gallery which is embedded in a page in Small Screen Mode at dimensions of less than 100% x 100% would ordinarily display the Splash Page (which would prevent anyone seeing the smaller icons) but your gallery disables this by setting showSplashPage="NEVER".
To solve the issue with the small buttons, try scaling your web page for mobile devices by adding the following line to the <head> section of your page:

<meta name="viewport" content="width=device-width, initial-scale=1;">

To auto-hide the address bar, try adding the following code to the <head> section of your page:

<script>
    window.addEventListener("load", function() {
        setTimeout(function() {
            window.scrollTo(0, 1);
        }, 0);
    });
</script>

The other solution would be to simply have your gallery's dimensions 100% x 100% (but this locks the viewport which disables pinch-zooming).

- Pinch to zoom does not seem to work if the phone is in landscape mode

It is possible to pinch-zoom in landscape mode but it can be quite difficult to do so as Juicebox has its own gestures for gallery navigation and on first touching the screen, Juicebox will usually initiate a swipe gesture to change image before the pinch gesture can be recorded. It can be done, though, if you are very careful with your initial two-pronged touch action. (Tested on an iPod Touch 4 iOS 6.1.3.)

4,366

(496 replies, posted in Juicebox-Pro Support)

@rj74

Poster graphic to launch full viewport juice box

Set showSplashPage="ALWAYS" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section) and the Splash Page will be displayed in place of the gallery (displaying the gallery fullscreen when clicked) in Large Screen Mode as well as in Small Screen Mode.
If you wish to customize your gallery's Splash Page, please see the available configuration options here.

4,367

(6 replies, posted in Juicebox-Pro Support)

I would certainly try upgrading Juicebox-Pro to v1.3.2.
I would also try hosting your jbcore folder on www.lakanephotography.co.uk (the same subdomain as web page containing the gallery's embedding code) rather than m.lakanephotography.co.uk. The JavaScript same-origin policy may be contributing to the problem.
Also, if using the Google PageSpeed Service, try excluding the 'jbcore' folder. This PageSpeed URL Control page should help with this.

That's great!
Thank you for posting back to let me know.

4,369

(6 replies, posted in Juicebox-Pro Support)

I notice that you currently use Juicebox-Pro v1.3.1.
It might be worth upgrading to the current version of Juicebox-Pro (v1.3.2) to see if it helps.
It may not make a difference but it should be quick and easy to try and will eliminate the possibility of any bugs from v1.3.1 contributing to the problem.
Instructions for upgrading Juicebox-Pro can be found here.

I'm not sure if this is a contributing factor in your scenario but all Juicebox files should be on the same domain or subdomain as the web page containing the JavaScript embedding code.

Do you have a sample gallery that I can take a look at which exhibits this behavior? Thanks.

If you are unable to open your gallery in JuiceboxBuilder-Pro, then, as long as your images and thumbnails have the same file names, try the following:

  • Copy your gallery folder.

  • In the copied gallery folder, replace the images in the 'images' folder with the images from the 'thumbs' folder.

  • Now open the copied gallery folder in JuiceboxBuilder-Pro (which no longer contains all your large images).

  • Re-order the images in JuiceboxBuilder-Pro ('Images -> Sort -> Reverse') from the drop-down menu at the top.

  • Save the gallery on the 'Publish' tab.

  • Replace the 'config.xml' file in your original gallery folder with the 'config.xml' file from the copied gallery folder.

If this does not work (for example if you are still unable to open the gallery in JuiceboxBuilder-Pro), then if you know any programming languages, you could perhaps write a script to reverse the order of <image> tags using XML parsing techniques.

4,371

(2 replies, posted in Juicebox-Pro Support)

You can change the size and quality for your resized images in JuiceboxBuilder-Pro's 'Images' tab.
Click the 'Change...' button in the 'Image Size' control panel and you can change the Maximum Width, Maximum Height and Quality for your resized images in the 'Set Image Size' pop up settings window.
The default settings are usually a good compromise between resolution, quality and file size for most users but they will not be ideal for all scenarios so try changing these values to see if they help with your own images.

I'm glad it worked for you.
Thank you for posting back to let me know.

4,373

(3 replies, posted in Juicebox-Pro Support)

Your audio tracks should play regardless of the source of images in your gallery.
Try defining your audioUrlMp3 and audioUrlOgg as absolute URLs to be sure that the paths are correct.
For example:

audioUrlMp3="http://www.example.com/wordpress/wp-content/uploads/mp3/nohardfeelings22500.mp3"
audioUrlOgg="http://www.example.com/wordpress/wp-content/uploads/mp3/nohardfeelings22500.ogg"

If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.

4,374

(1 replies, posted in Juicebox-Pro Support)

The current version of the Juicebox plugin for Lightroom (which can be download from this web page) is compatible with (and has been tested on) Lightroom 5. (It requires a minimum of Lightroom 4.)

Let me know what problem you are having with it and I'll try to help.

When each tab is selected, try redefining the dimensions of each gallery using the setGallerySize() Juicebox-Pro API method.

Otherwise, rather than loading all the galleries at once when the page is initially loaded, you might light to try loading the galleries on demand using a technique such as the following. This should be fairly easy to implement as the tabs on your page are used solely to select which gallery to display.

Here is a basic example.
First, create two galleries (named 'gallery1' and 'gallery2') and keep the galleries in their individual folders.
Now use the following code as an HTML page and place it in the same directory as the two gallery folders.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Multiple Galleries</title>
    <script src="gallery1/jbcore/juicebox.js"></script>
    <script>
        function loadGallery(base) {
            new juicebox({
                containerId : 'juicebox-container',
                baseUrl : base,
                galleryWidth: "600",
                galleryHeight: "400",
                backgroundColor: "rgba(255,255,255,1)"
            });
        }
        $(document).ready(function() {
            loadGallery('gallery1/');
        });
    </script>
</head>
<body>
    <div id="juicebox-container"></div>
    <div id="links">
        <a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a><br />
        <a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
    </div>
</body>
</html>

When the user clicks on a link, the loadGallery() JavaScript function will fire and the selected gallery will be displayed in the 'juicebox-container' div on the page.
The only parameter in the loadGallery() function (e.g. the 'gallery1/' in loadGallery('gallery1/');) is the baseUrl of the selected gallery.
I hope this example helps. It should be fairly straightforward to follow and adapt to your own needs.