3,151

(1 replies, posted in Juicebox-Pro Support)

What exactly was the error message that you encountered? (Knowing exactly what it is might help in diagnosing the problem.)

If you were able to unzip the Juicebox-Pro zip file without any errors, then it is unlikely that the 'JuiceboxBuilder-Pro.air' file is corrupt or incomplete.
Please take a look at the Installation Issues in the JuiceboxBuilder User Guide to see if any of the troubleshooting tips help.

There is also a fairly comprehensive list of things to check and try in this forum thread.
Ideally, you should just be able to install JuiceboxBuilder-Pro by just double-clicking the installation file but as you are having difficulties, one of the suggestions in the forum thread (link above) might help.

If you continue to have problems, please post back with the exact wording of the error message you see so that I can hopefully help further.

3,152

(5 replies, posted in Juicebox-Pro Support)

Which page on your web site are you trying to embed your Juicebox gallery into?
I have checked your main 'Home' page and your 'Wedding Gallery' and 'Portrait Gallery' pages but do not see any Juicebox embedding code on any of these pages.
Please check that you have entered the embedding code correctly and have uploaded your gallery files to your web server following the embedding instructions here.

If you plan to embed multiple galleries to your site, I would recommend using the baseUrl method of embedding as documented here. This allows you to keep each gallery in its own folder on your web server which might help to keeps things organized.

As a Drupal user, you might also be interested in the dedicated Juicebox module for Drupal. It can be downloaded from this web page.
Please note that we did not write this module ourselves and support for the module (if you choose to use it) would be best directed towards the Drupal forum where the author of the module should be able to help you out.

3,153

(1 replies, posted in Juicebox-Pro Support)

JuiceboxBuilder-Pro does not integrate directly with WordPress but you can certainly create a gallery using JuiceboxBuilder-Pro and then embed it in a WordPress page or post using the baseUrl method as documented here.
Essentially, once you have created a gallery with JuiceboxBuilder-Pro, you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into the body of your WordPress page or post (ensuring that the method of entry is 'Text' rather than 'Visual'). It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

If you select the 'Add SEO Content' checkbox (in the 'Customize -> Sharing') section, then the SEO code will be displayed as part of the embedding code that you would copy on the 'Publish' tab but, when pasting the code into your WordPress page or post, you might need to check that the paths to the images are correct (depending on the location of your gallery folder on your web server).

Alternatively, as a WordPress user, you might be interested in the dedicated Juicebox plugin for WordPress (WP-Juicebox).
Please see the plugin's support page for further details.
However, please note that the plugin does not include SEO functionality. This is a feature of JuiceboxBuilder-Pro only.

3,154

(2 replies, posted in Juicebox-Lite Support)

Unfortunately, there is currently a known bug whereby elements which have explicitly been assigned a CSS 'position' are not covered by the fullscreen gallery (they should be). This bug has already been addressed and will be fixed in the next version of Juicebox.

In the meantime, there are a couple of workarounds:
(1) Set useFullscreenExpand="TRUE".
... or:
(2) Set expandInNewPage="TRUE". When the gallery is expanded, it will be displayed on a page of its own rather than on top of the embedding page. Please note that this option is available in Juicebox-Pro only (and not in Juicebox-Lite).

Both Juicebox-Lite and Juicebox-Pro support embedding multiple galleries on a single web page or on multiple web pages.
Please see the Embedding Multiple Galleries support section for details where there are also online examples.

3,156

(1 replies, posted in Juicebox-Pro Support)

The fullscreen expand functionality seems to work OK in the two demo galleries you quoted in Safari 5.1.7 on my own PC.
Try clearing your browser's cache before reloading the galleries to see if this makes a difference.

Also, do you see the problem in any other browser or just in Safari 5.1.10?
I notice on this web page that Safari 5.1 has only partial support for the Fullscreen API (which Juicebox uses to expand the gallery fullscreen when useFullscreenExpand="TRUE"). Full support for the Fullscreen API was not introduced in Safari until version 6. This may be a contributing factor to your problem.

3,157

(11 replies, posted in Juicebox-Pro Support)

Unfortunately not. The code which handles the toggleThumbs() method is in the 'juicebox.js' file which is packed and obfuscated and cannot be modified.

The only other option would be to determine (using a browser's developer tools) which container you would need to show and hide and then manually use custom JavaScript code (perhaps with a jQuery animation effect) to slide the thumbnails in and out as required. However, you would likely encounter pitfalls in doing so as Juicebox would not know what was happening behind the scenes. Juicebox might think the thumbnails are being displayed when they are actually hidden (which could cause problems when the Thumbnail Button is clicked) and the main image may not expand to fill the available space if you hide the thumbnail container manually. Things might get messy quite quickly.

Probably best to wait for the bugfix to be implemented.

3,158

(5 replies, posted in Juicebox-Pro Support)

If you add or remove images to an existing gallery, the only files you need to update on your web server are the 'config.xml' file (which lists the images to be displayed in the gallery) and the images and thumbnails themselves.
There is no need to re-upload the core Juicebox files (the 'jbcore' folder) as these files do not change.
There is also no need to modify the embedding code in your HTML web page.

Perhaps the easiest way to update a gallery is to keep a copy of the gallery on your computer and then edit the gallery (by adding or removing images on the 'Images' tab) in JuiceboxBuilder-Pro. When you re-save the gallery on the 'Publish' tab, a new 'config.xml' file will be created.
You could manually replace the existing 'config.xml' file on your web server and then upload the new images and thumbnails to your gallery's 'images' and 'thumbs' folders but most FTP programs should allow you to drag and drop the entire gallery folder to your web server and upload only new or modified files (to save having to upload all gallery files, including images which are already present on your web server). You could then delete any images from your 'images' and thumbs' folders which are no longer part of your gallery.

I hope this helps.

3,159

(11 replies, posted in Juicebox-Pro Support)

This has actually been logged as a bug and should hopefully by fixed in a future version. The thumbnails should ideally slide gracefully in and out of view rather than just appearing and disappearing when toggleThumbs() is fired (just like when the Thumbnail Button is clicked).

3,160

(27 replies, posted in Juicebox-Pro Support)

Have you access to a Mac running Yosemite?

No, unfortunately not.

At the moment, when viewing your test gallery (http://www.grantsymon.com/testBugs/index.html) I do not see the problem in any browser but the HTTP header from your web page does include the following:

Cache-Control: no-cache

If you do not have this set via an .htaccess file on your web server, then please contact your web host and ask them if they could remove the 'no-cache' setting from your web hosting account.

Hopefully this will solve your problem.

3,161

(11 replies, posted in Juicebox-Pro Support)

The code above is a complete gallery 'index.html' page.
If you want to see the example in action, just create a sample gallery with JuiceboxBuilder-Pro and replace the 'index.html' page created by JuiceboxBuilder-Pro with the code above.

To use this in one of your own galleries, just add the following code below your gallery's embedding code:

<script>
    var thumbs = true;
    jb.onInitComplete = function() {
        if (jb.getScreenMode() === "LARGE") {
            setTimeout(function() {
                if (thumbs) {
                    jb.toggleThumbs();
                }
            }, 3000);
        }
    };
    jb.onShowThumbs = function(showing) {
        thumbs = showing;
    };
</script>

3,162

(11 replies, posted in Juicebox-Pro Support)

You could set showThumbsOnLoad="TRUE" and then use a JavaScript setTimeout() delay to hide the thumbnails (via the Juicebox-Pro API toggleThumbs() method).
For example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="minimal-ui" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb = new juicebox({
                containerId: "juicebox-container",
                showThumbsButton: "TRUE",
                showThumbsOnLoad: "TRUE"
            });
            var thumbs = true;
            jb.onInitComplete = function() {
                if (jb.getScreenMode() === "LARGE") {
                    setTimeout(function() {
                        if (thumbs) {
                            jb.toggleThumbs();
                        }
                    }, 3000);
                }
            };
            jb.onShowThumbs = function(showing) {
                thumbs = showing;
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

Using the code above, the thumbnails will toggle after 3 seconds (3000ms) but only in Large Screen Mode and only if the thumbnails are actually visible. If the user clicks the Thumbnail Button within the 3 second delay, the thumbnails will not be toggled (displayed) after the delay is over.

3,163

(27 replies, posted in Juicebox-Pro Support)

I was able to replicate symptoms similar to those described above (a flickering/double-loading effect) on an Apache server using the following line of code in an .htaccess file.

Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"

As soon as the code above was removed from the .htaccess file, the flickering disappeared.
The flickering occurred only in browsers which use the WebKit engine (Chrome 39, Opera 26 and Safari 5.1.7 on PC) and not in other browsers (Firefox 34.0 and IE11).

3,164

(2 replies, posted in Juicebox-Lite Support)

Every Juicebox gallery must have its images listed in an XML file (unless sourced by a Flickr account). It is not possible to list the images in the HTML page containing the embedding code.

You could, however, use a PHP script instead of a static XML file to build the gallery's XML file on the web server at the time the gallery is viewed.
Please see this forum post which has an example of how to display all images within a designated directory.

Hopefully you can use this technique to solve your own problem.

3,165

(4 replies, posted in Juicebox-Pro Support)

No problem. I'm glad all is well.
Thank you for posting back to let me know.

3,166

(4 replies, posted in Juicebox-Pro Support)

At the moment, JuiceboxBuilder-Pro and Showkase-Pro are the only applications which have individual input fields for all Pro configuration options.

In the Juicebox plugin for Lightroom, Pro Options should be entered into the Pro Options text area, one per line, in the form optionName="optionValue". Please see Step #4 of the 'Upgrading to Juicebox-Pro' section on the plugin's support page here for details.
(Alternatively, you could manually edit the gallery's 'config.xml' file in a plain text editor after your gallery has been created and add Pro Options as attributes to the opening <juiceboxgallery> tag.)

We are currently working on a new Lightroom plugin which will feature all Pro configuration options in the interface (removing the need to type them into the 'Pro Options' text area). I do not know exactly when this will be released but it should hopefully coincide with the next release of Juicebox-Pro.

3,167

(2 replies, posted in Juicebox-Pro Support)

Yes. Juicebox allows each image to have a unique title and caption, both of which are displayed in the caption area within the gallery.
The position of the caption area is determined by the captionPosition configuration option.
Please see the description of captionPosition on the Config Options page for a list of possible values.
To have the caption area displayed below the main image in the gallery, you would set captionPosition="BELOW_IMAGE" (in JuiceboxBuilder-Pro's 'Customize -> Caption' section)

If you are creating a gallery with JuiceboxBuilder-Pro, then you can enter the image title and image caption on the 'Images' tab. Just click a thumbnail image to reveal its title and caption input fields.
Otherwise, you could manually add/edit titles and captions directly in your gallery's XML file in a text editor. If doing so, then you might find the Manually Creating a Gallery instructions useful.

A title and/or caption can be as long as you like (within reason) and you can make the text multi-line by using HTML line breaks (<br>). Please see this FAQ for more information about using HTML formatting within image titles and captions:
How do I add HTML formatting to image captions and titles?

If you have a long title/caption, then, depending on the captionPosition, you might need to increase the maxCaptionHeight (in JuiceboxBuilder-Pro's 'Customize -> Caption' section) in order for all the text to be visible.

I hope this helps.

3,168

(1 replies, posted in Juicebox-Lite Support)

If you are referring to the order of images from Flickr, then yes, this applies to both Juicebox-Lite and Juicebox-Pro.
Please see this FAQ for more information:
How do I change the order of images from Flickr?

3,169

(2 replies, posted in Juicebox-Pro Support)

The Drupal module's interface features only Lite Options.
Pro configuration options such as the Sharing Options can be entered in the 'Juicebox Library - Pro / Manual Config' section of your Drupal Dashboard ('Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings'). For example:

shareFacebook="TRUE"
shareTwitter="TRUE"

3,170

(496 replies, posted in Juicebox-Pro Support)

@gotty1

Thank you for your suggestions.
Here are some notes on a couple of your points (which may be more useful to other users reading your post than to yourself).

(3) If JavaScript is not enabled in the user's browser, then what will be displayed on screen in place of the gallery is the browser's rendering of the SEO Content Code (a list of all images in the gallery). You can choose to not include the SEO Content Code by deselecting the 'Add SEO Content' checkbox in JuiceboxBuilder-Pro's 'Customize -> Sharing' section.
Otherwise, you could replace the SEO Content Code with your own 'JavaScript is required.' warning message although this cannot be done on the 'Publish' tab (as you have noted) and must be done after you have pasted the embedding code into a web page.

(5) What you could maybe do is set showOpenButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) to display the 'Open Image' button on the Button Bar. When the button is clicked, the image will be displayed in a new browser tab and can be downloaded via the browser's right-click 'Save Image As...' option.
It would be much easier to implement direct download functionality if all browsers supported the HTML 5 'download' attribute but this is not yet the case. Please see here for a list of browsers which currently support this feature.
If you would like to try this (though it will only work in the browsers listed in the link above), you could include a link within each image's caption using the 'download' attribute such as the following:

<caption><![CDATA[<a href="images/wide.jpeg" download="wide.jpg">Click here to download image.</a>]]></caption>

If entering the caption directly into JuiceboxBuilder-Pro (in a 'Caption' text field on the 'Images' tab), you would enter just the following:

<a href="images/wide.jpeg" download="wide.jpg">Click here to download image.</a>

JuiceboxBuilder-Pro will enclose the caption in the <caption> and CDATA tags automatically behind the scenes so there is no need to enter them into JuiceboxBuilder-Pro. (You would need to include them only if entering the caption manually by editing the 'config.xml' file in a plain text editor.)

The href="images/wide.jpeg" part is the path to the file which will be downloaded. You can use an absolute path (such as http://www.example.com/gallery/images/wide.jpeg) or a relative path (as in my example above). If using a relative path, it will be relative to the HTML page containing the gallery's embedding code.

The download="wide.jpeg" part is the name which will be given to the file when the user downloads it. (It does not have to be the same as the image's filename, although it should have the same file extension.)

The Click here to download image. part is the text that will be displayed on screen as the caption which, when clicked, will download the file.

Please remember that this will only work in certain browsers and visitors to your web site using browsers which do not support this HTML 5 attribute (such as Internet Explorer and Safari) may wonder why this feature in your gallery does not work as expected. (You may wish to add a note somewhere on your web page to say that direct download functionality is available only in Firefox, Chrome and Opera.)

I hope this helps.

3,171

(6 replies, posted in Juicebox-Pro Support)

I did attempt the remedy mentioned but I don't believe it worked, which is why rolled back to the 1.4 version of core.

If that is the case, then your problem is unlikely to have been connected to my initial suggestion and the problem could be due to a different Juicebox bug, a CSS conflict, an HTML error or be specific to a certain browser.

If you are able to replicate the problem in a gallery of your own and provide the URL (and a screenshot showing the problem), I would happily take a look and see if I can determine the cause of the problem.

Also, if you see the problem in any of our demo embedded (non 100% x 100%) galleries, please let me know.
http://www.juicebox.net/demos/lite/embedded/
http://www.juicebox.net/demos/pro/embedded/
http://www.juicebox.net/demos/pro/slider/
http://www.juicebox.net/demos/pro/splash/
http://www.juicebox.net/demos/pro/blog/
http://www.juicebox.net/demos/pro/top/

Thanks.

3,172

(3 replies, posted in Juicebox-Lite Support)

It looks like your problem may be due to a CSS conflict between some custom CSS code on your web page and the CSS code of the Juicebox gallery itself. Your web page may use some global CSS rules (which apply to all images on your web page including those in your Juicebox gallery) that the gallery has no option but to inherit. Unfortunately, it is not possible to isolate a Juicebox gallery (or any other element) on a web page to prevent it from inheriting global CSS rules.

Please check your CSS to see if you have any rules which are applied to all img tags within your web page's content section (which is where your Juicebox gallery is). It looks like you may have CSS rules which affect image attributes such as borders, margins/padding and possibly maximum-width.

Your web page loads 18 external CSS files so it might take a short while to search through them all but your browser's developer tools, usually accessible by pressing F12, should help. If you find any such rules, then please apply them to only those elements on your web page which require them through use of CSS selectors (ids and classes).

3,173

(6 replies, posted in Juicebox-Pro Support)

My previous post from yesterday (which I have since deleted to avoid confusion) referred in error to a different bug.
Sorry for the incorrect response and any inconvenience caused.

The bug which I originally referred to (whereby the value of the expandInNewPage configuration option could change the scale of the embedding page) should affect only iOS devices.
If expandInNewPage="FALSE" and an iOS device is detected, then Juicebox dynamically sets the following meta viewport tag which may change the scale of the page.

<meta id="jb-viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

More information on expanding galleries on iOS can be found here.

This problem should not affect Android devices so the original problem you encountered could be due to something else.

Did my original suggestion of changing the value of expandInNewPage make a difference?
You did not initially post back or provide the URL to your gallery so it appeared that you may have found a solution or workaround for your problem.

If you could please answer the following questions, we might have a better idea of what could be causing your problem.

  • Do you see the problem in any of our own v1.4.2 demo galleries here?

  • Does the problem occur in just Chrome or also in the Android stock browser?

  • Does the problem occur in a 100% x 100% size gallery (where the gallery is the only element on the web page, filling the page) or only in a gallery embedded in a web page alongside other content?

Also, in case the problem is somehow related to invalid HTML code, you could try validating your web page with the W3C Markup Validation Service and fix any errors reported. Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.

The problem may also be due to a CSS conflict. There may be some custom CSS code on your web page which the Juicebox gallery is inheriting and which is causing the layout of your gallery to change. If you have any global CSS rules (which might, for example, affect all <div> or <img> tags on your web page, including those within the Juicebox gallery), then try applying these CSS rules to only those elements on your web page which require them through use of CSS selectors.

In order to investigate your problem further, I would really need to see the problem for myself so, if possible, please
reproduce a gallery with the problem you originally reported and then post back with its URL (and upload a screenshot somewhere showing what you are seeing) so that I can take a look and hopefully help further.
Also, please let me know what device and version of Chrome you are using. (The more information we have, the better.)
Thank you.

3,174

(3 replies, posted in Juicebox-Pro Support)

If you see the actual embedding code in your web page rather than the gallery itself, then you may be inserting your gallery's code into your web page as plain text rather than as raw HTML code.
Please check the input mode in your editor.

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 problem for myself and hopefully help further.

3,175

(1 replies, posted in Juicebox-Pro Support)

I'm embedding a Juicebox gallery into a page and have been having problems with it actually appearing on the page.

It sounds like you have already solved your problem but for any other users reading this post and experiencing similar symptoms (a blank area where the gallery should be), then this FAQ may help.
When I view my gallery, I see a blank area. Why?

Also, it is not possible to isolate a Juicebox gallery (or any other HTML element) from custom CSS on a web page so if you encounter a CSS conflict, please ensure that you do not use global CSS rules but instead apply CSS rules to only those elements on your web page which require them through use of CSS selectors (classes and ids).