3,626

(4 replies, posted in Juicebox-Pro Support)

You can change font sizes in image titles and captions by using HTML formatting as documented in this FAQ:
How do I add HTML formatting to image captions and titles?

You can do likewise with the Gallery Title and Back Button Text:
How do I add HTML formatting to the Gallery Title or Back Button?

Other font sizes (for example for the image number) would have to be changed via CSS.

But I thought you might be able to save me some time and avoid going through the 1000 lines of CSS code in theme.css...

Unfortunately, as I mentioned, there is no list mapping classes to elements and I would just need to do the same as yourself (use a browser's developer tools to determine the relevant classes or rifle through the 'theme.css' file).

I am glad that you have found what you were looking for.
Thank you for sharing your findings. Hopefully it will help others.

3,627

(5 replies, posted in Juicebox-Pro Support)

Try fixing the HTML errors on your web page to see if this makes a difference.
You can check the code on your web page with the W3C Markup Validation Service and then fix the errors reported. This may help.

Incidentally, I do not see this issue on an iPod Touch running iOS 6.1.6 so it may be related to iOS 7.
Do you see the problem in other mobile browsers such as Chrome on your device?

3,628

(4 replies, posted in Juicebox-Pro Support)

The default languageList which you can change to suit your own needs can be found in the link in my last post: http://www.juicebox.net/support/creation/#language-list

If you want to change the tooltip text for the Button Bar navigation buttons, use something like the following (changing the text as required):

languageList="Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Images|TEXT_FOR_NEXT_NAVIGATION_BUTTON_GOES_HERE|TEXT_FOR_PREVIOUS_NAVIGATION_BUTTON_GOES_HERE|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of"

3,629

(5 replies, posted in Juicebox-Pro Support)

Your gallery will remain the same size on your page whether or not the thumbnails are displayed.
When the thumbnails are displayed, there is little room left within your gallery to display the main image (and it is displayed as large as it can be with with space available).
The only way to display the image at its larger size when the thumbnails are displayed would be to change the size of the gallery when the thumbnail button is clicked (to give your gallery more height to display both the thumbnails and the main image).
This can be achieved by using the Juicebox-Pro API, specifically the setGallerySize() method and the onShowThumbs() event.
To see an example of this in action, create a sample gallery with JuiceboxBuilder-Pro (using default values) and replace the gallery's embedding code (in the 'index.html' file) with the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
    containerId: 'juicebox-container',
    galleryHeight: '600',
    galleryWidth: '600',
    showThumbsOnLoad: 'TRUE'
});
jb.onInitComplete = function() {
    if (jb.getScreenMode() === 'LARGE') {
        jb.onShowThumbs = function(showing) {
        if (showing) {
            jb.setGallerySize(600, 600);
        } else
            jb.setGallerySize(600, 400);
        }
    }
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Your gallery has dimensions of 100% x 100%. This means that it will fill its parent container no matter what its size is. However, in order for Juicebox to determine what its actual dimensions should be, please be sure to explicitly set dimensions for the gallery's parent container using CSS (otherwise Juicebox will not know what the 100% should refer to).
When using percentage heights, please also see this note regarding Using Percentage Heights]Using Percentage Heights
If using the API solution above, this will not apply as setGallerySize() accepts only absolute pixel values (not percentages).

Also, your web page has HTML errors which may be causing problems.
You can validate your web page with the W3C Markup Validation Service and then fix the errors reported.
Once the code on your web page validates, your web page should be rendered with greater predictability and consistency across different browsers.

You also have a very high thumbSelectedFrameWidth which makes your selected thumbnails look a little strange. I would recommend reducing this value from 45 to something less than or equal to half the height/width of your thumbnails.

3,630

(2 replies, posted in Juicebox-Pro Support)

You could have all your galleries share a single 'jbcore' folder (rather than having one per gallery) by following the 'Using an External jbcore Folder' instructions here.
You could then just replace the stock 'jbcore/classic/theme.css' file (within the shared 'jbcore' folder) with your own 'theme.css' file.

I hope this helps.

3,631

(4 replies, posted in Juicebox-Pro Support)

You can set a global font for all text in your gallery using the galleryFontFace configuration option (in JuiceboxBuilder-Pro's 'Customize -> General' section).
Please see the General Options section of the Config Options page for a short description of this configuration option.
This is the recommended way to set a font for a gallery. The tips you have seen may have been posted prior to galleryFontFace being introduced (in v1.3.0) and the CSS modifications were probably the only way to achieve font changes at the time.
If you really want to change the font for only a particular section of your gallery, then the best way to figure out which classes and ids you have to apply your custom CSS rules to would be to inspect your gallery with a browser's developer tools (usually accessed by hitting F12) or by searching through the gallery's 'jbcore/classic/theme.css' file. There is no official list of which classes and ids refer to which elements as these could change between versions.

3,632

(5 replies, posted in Juicebox-Pro Support)

I need the image to take up the width of the embeddable area without having to hide thumbnails

If you want your image to fill the width of the image area within the gallery, try setting imageScaleMode to either "SCALE" or "FILL". By default, imageScaleMode is set to "SCALE_DOWN" and if the aspect ratio of your images does not match that of the image area within the gallery, then the images will be scaled down to fit within the image area without cropping and this may result in space to the top and bottom or left and right of the images. Also, when using "SCALE_DOWN", small images are not scaled up (as this would reduce their visual quality).
Please see this FAQ which deals with unwanted space within a gallery:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

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

Also, when I need to delete images from Juicebox Builder Pro I am only able to delete one image until I restart the program.

This sounds like you may be experiencing a bug which has been fixed.
Please download the latest version of Juicebox-Pro v1.4.2 (using the link from your purchase email) and you should no longer experience this issue. Please see the Upgrading Juicebox support page for details.

3,633

(4 replies, posted in Juicebox-Pro Support)

1. When you access the page now, the brower url appends a #1 at the end of the URL.

This is because you have set enableDirectLinks="TRUE".  When using this configuration option, the URL in the browser will be appended with a # indicator with the index of the current image being displayed (giving each image in the gallery a direct link).
Set enableDirectLinks="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) and there will be no # at the end of your URL.

2. When you navigate the galleries, you will see that all three galleries change slides at the same time.

I think this problem may be due to the fact that you load the 'juicebox.js' JavaScript file for each and every gallery on the your web page. This is not necessary (and may be causing problems with your multiple galleries).
Try loading 'juicebox.js' just once on your web page (before the embedding code for your first gallery).
Also, I notice that you are currently using Juicebox-Pro v1.3.3. Try upgrading to the most recent version (v1.4.2) as many bugs have been fixed since v1.3.3.
Please see the Upgrading Juicebox support page for instructions on how to upgrade existing galleries and the Version History for a full list of changes between versions.

Juicebox galleries are comprised of standard HTML, JavaScript and CSS files (and a few other resource files such as images and fonts) and should display fine in Chrome on their own.
Try viewing one of your own galleries in Chrome outside of your main page: http://www.signsvictoria.ca/dimensional/
This implies that the problem lies somewhere within your embedding page rather than with the gallery itself.

The 'No plug-in available to display this content.' is not an error message generated by Juicebox itself and Juicebox requires no plugins to run (although JavaScript must be enable in the browser).

It looks like you are embedding your galleries within <object> tags and this may be the cause of the problem. (Try a web search with terms such as 'object tag google chrome' and you should find more information.)
Try loading your galleries into an <iframe> instead.

3,635

(4 replies, posted in Juicebox-Pro Support)

If you are referring to the tooltip text which appears when hovering over the navigation buttons on the Button Bar (displayed by setting showNavButtons="TRUE"), then you can change the text using the languageList configuration option.
For more information about languageList , please see here.
This configuration option is not found in the JuiceboxBuilder-Pro interface but can be added manually following the 'Setting Config Options' instructions here.

3,636

(1 replies, posted in Juicebox-Pro Support)

I have viewed your web page and the Splash Page text is being displayed in the Arenq font.
If you are not seeing this, then try clearing your browser's cache to ensure that your browser is fetching and using the most recent versions of your gallery files.

Just entering the font name in the galleryFontFace text field should be enough for the font to be used on the Splash Page as well as in the gallery itself (and this works in my own tests).

Incidentally, I notice that you are using Juicebox-Pro v1.4.0.
If you like, you could upgrade to the current version (v1.4.2) by following the instructions on the Upgrading Juicebox support page.

I have viewed your web page in Firefox 30.0 and IE11 and your Juicebox galleries look similar in both browsers.
Make sure that you are not using IE in compatibility view.
Also, please note that if you are using IE8, the icons will not have rounded corners as IE8 does not support the 'border-radius' CSS used by Juicebox. (This does not alter the functionality of the gallery.)

3,638

(7 replies, posted in Juicebox-Pro Support)

The 'jbcore/classic/theme.css' file is the only Juicebox CSS stylesheet and it contains code for every aspect of the gallery (Small Screen Mode, Large Screen Mode, normal and fullscreen modes, etc.).

3,639

(1 replies, posted in Juicebox-Pro Support)

The easiest workaround (without resorting to CSS modification) would be to increase both your maxCaptionHeight and imagePadding. It would not reduce the spacing between the image title and caption but it would ensure that your caption is not vertically truncated and would also ensure that the top of the caption does not overlap the main image.

If you want to try tweaking the CSS, try the following in your gallery's embedding page:

.jb-caption p {
    line-height: 16px !important;
}

3,640

(3 replies, posted in Juicebox-Lite Support)

The code in the original post above will work exactly as it was posted if the gallery folder is named 'gallery' and the complete gallery folder (not just the contents) has been uploaded to the the web site's root directory.

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

If you want to allow visitors to your web site to download individual images, then just select the 'Show Open Button' checkbox.
When the 'Open Image' button on the Button Bar is clicked, the image will be opened in a new browser tab and the user can download the image using the browser's right-click 'Save Image As...' functionality.

There is no direct download functionality within Juicebox.
It would be much easier to implement if all browsers supported the HTML 5 download attribute but this is not yet the case.

3,642

(3 replies, posted in Juicebox-Pro Support)

Question 1: Is it possible to create with Lightroom plugin the embed code?

You can use (copy and paste) the embedding code from the gallery's 'index.html' file and then follow the embedding instructions here.

Question 2: is the code different every time or do I need this only once create and customize only the link to the gallery on my FTP server?

If you embed your galleries by copying the contents of the gallery folder into the same directory as the web page containing the gallery's embedding code (as in the instructions here), then the embedding code will remain constant for each of your gallery's (with the exception of any configuration options that may be set in the embedding code such as the backgroundColor and the path to the gallery's 'juicebox.js' file).
However, if you plan to upload many galleries to your web site, you might like to use the baseUrl method of embedding as documented here.
This allows you to keep each gallery in its own folder which may help keep things organized on your web server and also if you plan to edit or update your galleries at a later date as it keeps all the files together.
Essentially, you would upload the complete gallery folder (not just the contents) to your web server and use a baseUrl (pointing towards the gallery) in the embedding code. 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) are correct.

3,643

(4 replies, posted in Juicebox-Pro Support)

Is it possible with these settings, the gray area to decrease above and below the image?

Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

All galleries created in Lightroom will be 100% x 100% and will completely fill the 'index.html' web page generated.
Being that the gallery's height and width are dynamic and will change depending on the size and shape of the user's browser window, the blank areas above and below the main image that you refer to will be visible only in browser windows of certain shapes. If you resize your browser window, you will see the size of these blank areas change.
As noted in the FAQ above, if you want the image area to always be filled, try setting imageScaleMode to either SCALE or FILL.
Otherwise, you could embed your gallery in a container of fixed dimensions such that the aspect ratio of the gallery's image area closely matches that of the images themselves to minimizes the blank areas above and below the images.
(Also, if using imageScaleMode="SCALE_DOWN" make sure that your images are large enough that they need to be scaled down to fit within the image area (as if they are smaller than the image area, they will not be scaled up).

why you can not adjust the lightroom plugin the settings.

None of the available plugins are as fully-featured as JuiceboxBuilder-Pro (which comes with Juicebox-Pro and has individual interface settings for all Pro configuration options) and they are provided as a convenience for users who already use programs such as Lightroom and Photoshop and want to be able to create Juicebox galleries within their existing workflow.
It is actually quite a quick and easy process to open a gallery (created by Lightroom) in JuiceboxBuilder-Pro, customize it and re-save it.
You could even create a preset in JuiceboxBuilder-Pro so that you can quickly apply a collection of configuration options to an existing gallery in a single action. (Please see the 'Presets' section of the JuiceboxBuilder User Guide for details.)

3,644

(3 replies, posted in Juicebox-Pro Support)

Please post the URL to your gallery so that I can take a look and help further.
Please let me know what file contains your custom CSS code, what you expect to see and what you actually see.
(I do not know if your custom CSS code is in one of the Lightrom plugin's template files, one of the Juicebox 'jbcore' files, one of the output gallery files or a completely separate external file.)
Thank you.

If I want to show the images with no scaling...

If you want to display the images with no scaling, you can set imageScaleMode="NONE".
However, depending on the dimensions of your gallery, large images may be cropped. If you are allowing Juicbeox to scale down large images to fit within the gallery's image area whilst respecting their aspect ratios, then it would be best to ensure that the dimensions of your images are greater than the maximum dimensions at which your gallery will be displayed. If your gallery has fixed dimensions, this will be easy to calculate. However, if your gallery's size is dynamic, then you might need to take into consideration how your gallery will likely be viewed by its target audience (whether visitors to your web site are likely to be viewing your gallery on mobile devices or large monitors).

3,646

(6 replies, posted in Juicebox-Pro Support)

Thank you for providing the URL to your gallery.

I have made the rows and columns:

maxThumbColumns="12"

maxThumbColumns is actually set to 11 in your gallery's 'config.xml' file.
If you view the gallery on its own web page (/collages-gallery_02/juice-Collages2/index.html), you will see 11 columns of thumbnails (as expected).
However, on your main page (the page into which you have embedded the gallery using your own theme), it looks like your custom CSS code is allowing space for an additional thumbnail per row, resulting in 12 columns (the thumbnails no longer overflow onto the next row at the expected breakpoint).

Juicebox does not know about your custom CSS code and cannot compensate for it.
Juicebox displays the same number of thumbnails on the gallery's own 'index.html' page as on your main page but your custom CSS code has changed the dimensions of the thumbnail container (from what Juicebox knows will allow the correct number of thumbnails to be displayed) so the calculations that Juicebox has made are no longer valid.

If you want to change the spacing between the thumbnails, it would be much safer to use the thumbnailPadding configuration option (on JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section).

As long as captionPosition is not set to NONE, then both image titles and captions will be displayed in the caption area.
There is no way to display only image titles and switch off image captions (unless you are using Flickr as a source of images, in which case make sure that both flickrShowTitle and flickrShowDescription are set to TRUE in JuiceboxBuilder-Pro's 'Customize -> Flickr' section).
If your titles are displayed but your captions are not, then it is likely that either:
(1) Your image captions are empty. You can check this on the 'Images' tab in JuiceboxBuilder-Pro. Click on a thumbnail to reveal the title and caption input fields.
... or:
(2) If your captionPosition is set to BELOW_IMAGE, BOTTOM or BELOW_THUMBS, then it is possible that the caption height is too low to accommodate both the titles and captions. Try increasing the maxCaptionHeight configuration option in JuiceboxBuilder-Pro's 'Customize -> Caption' section.

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

3,648

(3 replies, posted in Juicebox-Pro Support)

Rather than load a gallery's 'index.html' page into an iframe, you can embed a gallery directly into a <div> container on a web page following the embedding instructions here.
If you need to switch between galleries on the same page, then you can do so with JavaScript (setting a unique baseUrl for each gallery) by following the Switching between Multiple Galleries using JavaScript example in the Embedding Multiple Galleries support section.

3,649

(4 replies, posted in Juicebox-Pro Support)

A complete list of configuration options can be found here.

Instructions on how to enter Pro configuration options into the Pro Options text area within the Lightroom plugin can be found in Step #4 of the 'Upgrading to Juicebox-Pro' section on the Lightroom Plugin support page:

Enter Pro options in the "Juicebox-Pro Options" text area in the Lightroom Plugin interface. Config options should be entered one per line in the format optionName="OPTION_VALUE". Use Ctrl-Enter to add a new line.

For example, if you wanted to set captionPosition to BELOW_IMAGE and showImageNumber to FALSE, you would enter:

captionPosition="BELOW_IMAGE"
showImageNumber="FALSE"

Unfortunately, as I cannot replicate the problem, I am unable to test possible solutions and some trial and error may be required.
Try keeping the window.onorientationchange code in place but changing the methods of determining the height of the window element (and possibly that of the header, too).
There are several methods that you could try:

These forum threads seem to be describing similar scenarios (a web page with a total height of 100% and issues in landscape orientation under iOS 7) and may point you in the direction of a solution.
http://stackoverflow.com/questions/1901 … yout-issue
http://stackoverflow.com/questions/1885 … -100-692px

Also, I do not know if it will help but you could try adding the minimal-ui meta viewport tag to the <head> section of your web page:

<meta name="viewport" id="jb-viewport" content="minimal-ui" />

Whatever solutions you try, be sure to clear your browser's cache before you check each one to ensure that your browser is fetching and using the most recent versions of your gallery files.