551 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Ideally, Juicebox would allow me to create fields for the table which I would populate and these would appear below the image or overlay it.

Unfortunately, creating some kind of input method for custom fields for image captions (or anything else for that matter) would be a hugely complex task (and not possible within JuiceboxBuilder-Pro whose source is not available to be modified by users).
You can, however, add as much text to an image caption as you like and you can split text into separate lines using HTML line breaks (<br>).
For example, a simple two-line caption would look something line this

Line #1<br>Line #2

The use of HTML formatting within image titles/captions is noted in this FAQ:
How do I add HTML formatting to image captions and titles?

You could use an HTML <table> within an image caption but the caption area is already a <table> (with its own styling) so you might run into problems (although you could certainly try it if you like).
I am not aware of anyone having used a table in an image caption before so, unfortunately, I cannot point you towards any references for this.

If you do add a lot of text to your image captions, then you might need to increase maxCaptionHeight (in JuiceboxBuilder-Pro's 'Customize -> Caption' section) to accommodate all the text.

I hope this helps (at least a little).

Go to forum: Juicebox-Pro Support

552 Topic by Steven @ Juicebox

(0 replies, posted in Tricks and Tips)

If you use Juicebox-Pro's own Background Image Options (and your background image fills the gallery area without any transparency), then you may see a brief flash of color (grey by default) before the background image is displayed.
This is because the backgroundColor (set in the gallery's embedding code) is read and processed before any configuration options in the gallery's 'config.xml' file (such as backgroundUrl).
Set the gallery's backgroundColor to be completely transparent (any color with an opacity of 0) and this should resolve this issue.

backgroundColor: "rgba(0,0,0,0)"

(You can change the backgroundColor in JuiceboxBuilder-Pro's 'Customize -> Lite' section or by manually editing the gallery's embedding code.)

Incidentally, if the background image does not fill the gallery area (if backgroundScale="NONE") or if the background image is a PNG file with transparency, then the backgroundColor still needs to be active.

Go to forum: Tricks and Tips

553 Topic by Steven @ Juicebox

(0 replies, posted in Tricks and Tips)

Unfortunately, there are no configuration options available within JuiceboxBuilder-Pro to change the font size of image titles and captions.

However, you can style individual image titles and captions (for example, to change the font size) using HTML formatting as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

A sample caption with a font size of 12px (for example) would look like this:

<span style="font-size: 12px;">Image caption text goes here.</span>

In the gallery's XML configuration file, the caption would look like this:

<caption><![CDATA[<span style="font-size: 12px;">Image caption text goes here.</span>]]></caption>

... but JuiceboxBuilder-Pro will automatically add the <caption> and CDATA tags so you only need to enter the <span> tag (as above) into JuiceboxBuilder-Pro.
(You can do likewise for image titles.)

Otherwise, you can set the size of all image titles and/or captions at once using CSS such as the following (changing the numeric values as appropriate):

/* IMAGE TITLE */
.jb-caption .jb-caption-title {
    font-size: 20px !important;
}

/* IMAGE CAPTION */
.jb-caption .jb-caption-desc {
    font-size: 18px !important;
}

/* IMAGE NUMBER */
.jb-cap-frame .jbac-number {
    font-size: 12px !important;
}

You could add this CSS to the end of your gallery's 'jbcore/classic/theme.css' file or wrap it in <style type="text/css"> ... </style> tags and add it to the end of your gallery web page's <head> section.

If you want to change the font size for the Gallery Title, then you can do so using HTML formatting (just like the image titles and captions above).
Please see this FAQ for details:
How do I add HTML formatting to the Gallery Title or Back Button?

For example, you could enter a Gallery Title such as the following into JuiceboxBuilder-Pro's 'Customize -> Lite -> Gallery Title' field (changing the values as appropriate):

<span style="font-size: 48px;">Gallery Title text goes here.</span>

Alternatively, if you want to change the font size for the Gallery Title via CSS, then use the following (changing the numeric values as appropriate):

/* GALLERY TITLE - LARGE SCREEN MODE */
.jb-area-large-mode-title {
    font-size: 48px !important;
}

/* GALLERY TITLE - SMALL SCREEN MODE */
.jb-idx-ssm-title-wrapper {
    font-size: 48px !important;
}

Go to forum: Tricks and Tips

554 Topic by Steven @ Juicebox

(0 replies, posted in Tricks and Tips)

Here is a comprehensive list of things to check and try for anyone experiencing difficulties installing JuiceboxBuilder-Pro (or JuiceboxBuilder-Lite).
I will update this list if/when any new tips are found.

#1 Check out the Install Issues in the JuiceboxBuilder User Guide in case any of the notes describe the problem you are facing and help.

#2 If using MacOS Catalina (10.15), then please see the additional steps required to install JuiceboxBuilder-Pro here.

#3 Make sure that you are using the latest version of JuiceboxBuilder-Pro.
You can check the latest version on the Version History page and you can check the version that you are using by going to 'Help -> About JuiceboxBuidler-Pro...' from teh drop-down menu at the top of the program.
If necessary, full instructions for downloading the latest version can be found on the Upgrading Juicbebox support page.

#4 Make sure that you have extracted the Juicebox-Pro zip file to your hard drive (rather than just looking inside the file with a zip program) and that you are not running the 'JuiceboxBuilder-Pro.air' file from a restricted file system or network drive.

#5 Make sure that the Juicebox-Pro and 'JuiceboxBuilder-Pro.air' files are not corrupt.
If you have been able to extract the Juicebox-Pro zip file without any errors, then the chances are that your files are OK.
However, you can check the MD5, SHA1 and SHA256 hashes of the current Juicebox files here.

#6 Make sure that you are using the latest version of Adobe AIR with WebKit support. This is currently AIR v33.1.1.744.
This version of Adobe AIR can be downloaded from the foot of Harman's AIR download page here.

#7 Check out the "Troubleshoot Adobe AIR installation" help pages below in case the problem is with Adobe AIR (rather than with JuiceboxBuilder-Pro).
Mac: https://helpx.adobe.com/air/kb/troubles … ac-os.html
Windows: https://helpx.adobe.com/air/kb/troubles … ndows.html

#8 Try using an older version of Adobe AIR.
JuiceboxBuilder-Pro requires Adobe AIR v2.0 or later so you could try a version such as v20.0.
Unfortunately, it is no longer possible to download older versions of AIR from the Adobe archive download page so finding older versions might be difficult. If you find a link to an older version of AIR from a source other than Adobe, then please download and install at your own risk. (Some users have reported success in using older versions of Adobe AIR which is why I list this as a suggestion.)

#9 Try completely disabling any third-party security software that you might have installed (e.g. Avast or AVG), including real-time protection and ransomware detection, before attempting to install JuiceboxBuilder-Pro in case this may somehow be interfering with the JuiceboxBuilder-Pro installation. (Please do so at your own risk and be sure to disconnect from the internet first.)

#10 Check that your system clock is accurate (and resync with a known time server if necessary) before attempting to install JuiceboxBuilder-Pro. (One user actually claims to have had to wind back his system clock 2 years in order to install JuiceboxBuilder-Pro. This seems to have been an isolated incident and no-one is quite sure why this was necessary but it might be something worth trying if nothing else works.)

#11 Try the complete uninstall/reinstall procedure below.

(1) Uninstall your current version of JuiceboxBuilder-Pro (if you have a version installed).
Mac: Delete the 'JuiceboxBuilder-Pro' file from the Applications folder and empty your Trash.
Windows: Use the uninstaller in the 'Control Panel -> Programs -> Uninstall a program...' list.

(2) After uninstalling JuiceboxBuilder-Pro, please check that there are no files are left behind (even from a failed installation) by manually deleting the following folders (if they exist) from your hard drive:
Mac:
/Applications/JuiceboxBuilder-Pro.app/
/Users/Username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro
/Users/Username/Library/Preferences/JuiceboxBuilder-Pro
Windows:
C:\Program Files (x86)\JuiceboxBuilder-Pro
C:\Users\Username\AppData\Roaming\Adobe\AIR\ELS\JuiceboxBuilder-Pro
C:\Users\Username\AppData\Roaming\JuiceboxBuilder-Pro
C:\Users\Username\Documents\JuiceboxBuilder-Pro

You may need to show hidden files to find some of the above locations in Windows File Explorer. Open File Explorer from the taskbar. Select 'View > Show', then select 'Hidden items' to view hidden files and folders.

(3) Also, please follow the procedure above (Steps #1 - #2) for JuiceboxBuilder-Lite, too (if you have it installed).
JuiceboxBuilder-Lite and JuiceboxBuilder-Pro can both be installed and run side by side on the same computer but, being that you are experiencing problems, it might be wise to completely clear your system of all JuiceboxBuilder files before trying to reinstall JuiceboxBuilder-Pro.

(4) Uninstall Adobe AIR.

(5) Reinstall Adobe AIR.
Be sure to download and install the latest compatible version of AIR, currently AIR v33.1.1.744, see here for details.
Windows: To install Adobe AIR, instead of just double-clicking the 'AdobeAIRInstaller.exe' installation file, right-click it and select 'Run as administrator'.

(6) Reinstall JuiceboxBuilder-Pro (making sure that it is the latest version) following the instructions here.

#12 When using JuiceboxBuilder-Pro, do not load a gallery from (or save a gallery to) an online synced file-sharing folder (such as Google Drive or Dropbox).
JuiceboxBuilder-Pro creates a temporary folder (named '.tempGallery') whilst a gallery is being created or edited. This folder is automatically deleted on closing JuiceboxBuilder-Pro.
However, the use of an online synced file-sharing folder can prevent JuiceboxBuilder-Pro from deleting this temporary folder.
If you run into this problem and find that the 'New Gallery...' and 'Open Gallery...' buttons on the 'Start' tab become unresponsive, then just close JuiceboxBuilder-Pro and delete the '.tempGallery' folder manually.
On a Windows system, the '.tempGallery' folder is located here:

C:\Users\Username\Documents\JuiceboxBuilder-Pro\.tempGallery

Note for Juicebox-Lite users:

The notes above refer to Juicebox-Pro/JuiceboxBuilder-Pro but apply equally to Juicebox-Lite/JuiceboxBuilder-Lite.
If you are having problems with JuiceboxBuilder-Lite, then just follow the suggestions above but replace any instances of 'Juicebox-Pro' and 'JuiceboxBuilder-Pro' in any paths with 'Juicebox-Lite' and 'JuiceboxBuilder-Lite' respectively.

[Edit: Link updated 7 February 2025.]

Go to forum: Tricks and Tips

555 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

Thank you for posting your suggestion in the Feature Requests forum thread!

Go to forum: Juicebox-Pro Support

556 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

Sorry, I missed your question about webp.

JuiceboxBuilder-Pro does not currently support webp as an image format.
Please see this FAQ:
Will Juicebox load things other than images?

However, you could use webp images in a Juicebox gallery but you'd need to build the gallery manually (adding an <image> entry to the gallery's 'config.xml' file for each webp image and then copying your image and thumbnail webp files to the gallery's 'images' and 'thumbs' folders respectively). As long as the browser being used to view the gallery supports webp images (please see here for details), the images will be displayed in the gallery.

If you like, you could post this idea (support for webp images) as a suggestion in the Feature Requests forum thread.
This keeps all the requests together and ensures that they will not be overlooked by the developers.
I do not know the likelihood of any ideas being implemented in future versions but this is certainly the best place for all ideas.
Thank you!

Go to forum: Juicebox-Pro Support

557 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

Probably the factor 1 ("The speed of the web server hosting the site") you mentioned and cannot be influenced is decisive, since the results of the measurements in the Google Search Console vary widely.

I agree.
There's really not much we can do as gallery authors (other than change the image filesize and the value of the imagePreloading configuration option) and if Google search results vary for any given gallery, then it's down to the web server hosting the gallery and Google's algorithms, neither of which we have any control over.

If it's any consolation, both your galleries (your 80% and 90%) galleries load quickly for me (real life scenario).

Thanks and best regards

You're welcome!

Go to forum: Juicebox-Pro Support

558 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

With regard to the speed at which your gallery images load, there are several contributing factors.
(1) The speed of the web server hosting the site.
(2) The speed of your own internet connection.
(3) The file size of the gallery images.
(4) The value of the imagePreloading configuration option.

You have little or no control over #1 and #2 is not relevant to Google search results (but can certainly play a part when viewing a gallery yourself).

With regard to #3, make sure that your image file sizes are not too large.
If using JuiceboxBuilder-Pro to create your gallery with default image dimensions (1024px x 768px at 80% quality), then resulting gallery images should be somewhere within the range of between 100KB and 200KB each.
If your image file sizes are much larger than this, then try tweaking the image dimensions and/or quality to bring the file sizes down to a reasonable level for web gallery use.

With regard to #4, the imagePreloading configuration option "Determines how images are preloaded. Also controls if images are kept in memory after being viewed." (Please see the Main Image Options in the Config Options page for details.)

The default value for imagePreloading is PAGE (whereby all images on the current thumbnail page are preloaded) but you could change this to NEXT (so that, when the gallery is initially loaded, only the next image in the gallery is downloaded and cached by the browser) or ALL (so that all gallery images are initially downloaded) to see if this makes a difference.

imagePreloading is supported by Large Screen Mode only so I don't think it'll have any effect on Google's mobile search results (Juicebox uses Small Screen Mode on mobile devices unless screenMode is explicitly set to LARGE in JuiceboxBuilder-Pro's 'Customize -> General section) but you might like to try changing its value as this is the only configuration option which has anything to do with the loading of the images.

Unfortunately, I know of no other ways to influence Google search results as far as image loading is concerned.

Go to forum: Juicebox-Pro Support

559 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

The captionPosition configuration option is active in Large Screen Mode only (noted in the Caption Options section of the Config Options page).
However, by default, when a gallery is viewed on a mobile device, Juicebox will display the gallery in Small Screen Mode where the value for captionPosition of OVERLAY is used (as screen real estate is generally limited on mobile devices and this value gives captions as much space as possible).

It is not possible to change the value of captionPosition for Small Screen Mode but you can force your gallery to be displayed in Large Screen Mode in all browsers and on all devices if you like by setting screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).

For reference, more information about Screen Modes can be found in the Gallery Tour.

I hope this helps to clarify things a little.

Go to forum: Juicebox-Pro Support

560 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

I have tried to replicate the problem you describe (using a small image, setting imageScaleMode to SCALE_DOWN and comparing the size of the displayed image in Irfanview and JuiceboxBuilder-Pro's live preview window) but I do not see the problem shown in your screenshots. Both images are displayed at the same size for me.

There are, however, some known issues with JuiceboxBuilder-Pro's live preview window being unable to display the gallery with 100% accuracy (due to the internal browser not fully supporting CSS 3).
Please see the Known Issues section of the JuiceboxBuilder-Pro User Guide.

I don't know if it will help but try viewing the gallery in a modern and up-to-date browser (Chrome, Edge, Firefox, Opera, Safari) rather than JuiceboxBuilder-Pro's live preview window to see if this makes a difference (and make sure that your browser's zoom functionality is set to 100%).

Incidentally, I've also just created a test gallery using your own gallery's 'config.xml' settings from your post above (in case there's some odd combination of settings which is causing the problem) but I still cannot replicate the problem myself so the issue could potentially lie somewhere within your own system.

Check that your Windows 'Settings -> Display -> Scale and layout' value is 100% (in case this is currently set to a higher values such as 125%).

Go to forum: Juicebox-Pro Support

561 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

What I'm seeing when I view your gallery is expected behavior but maybe an explanation of what I'm seeing will help to clarify some things.

The first image in your gallery has dimensions of 665 x 999 and your gallery currently sets imageScaleMode="NONE".

When I view your gallery in small browser window (shorter than the image's actual height), the image is displayed at its actual size (without any dynamic scaling), but because the browser window (and, therefore, the gallery's image area) is not large enough to accommodate the image in its entirety, it is cropped (equally at the top and bottom), as noted on the Config Options page ("NONE: No scaling. Large images are cropped to fit Image Area.").

When using imageScaleMode="NONE", the image will be seen in its entirety (without cropping) only when the users browser window (or, more specifically, the gallery's image area) is large enough to accommodate the entire image.

With a responsive gallery whose dimensions change depending on the shape and size of the user's browser viewport (such as your full page gallery), you really have no way of knowing the shape and size of your gallery (it is dependent on the user's device and browser window) so the only way to be sure that your gallery images will be seen in their entirety is to set imageScaleMode to either SCALE_DOWN (the default value) or SCALE.

SCALE_DOWN is the default value as this scales down large images to fit within the gallery's image area (if necessary) but does not scale up small images (as this will likely decrease their visual quality.

I hope this helps to explain what you are seeing.

Go to forum: Juicebox-Pro Support

562 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

Images in a Juicebox gallery are dynamically scaled according to the imageScaleMode configuration option (in the 'Main Image' section).
The default value for imageScaleMode (which is used when imageScaleMode is not explicitly defined in the gallery's 'config.xml' file) is SCALE_DOWN, whereby large images are scaled down (if necessary) to fit within the gallery's image area (whilst repsecting their aspect ratios and without cropping) but small images are not scaled up.
You can check out the list of all possible values for imageScaleMode (including short descriptions for each) in the Main Images section of the Config Options page.
Your gallery's 'config.xml' file does not seem to include a value for imageScaleMode (at least not in the portion you included in your post above) so the default value of SCALE_DOWN will be used.

Is it possible to show them at the original size ?

If you do not want Juicebox to scale your gallery images at all, then set imageScaleMode to NONE. (This will work best with a gallery of fixed size where the gallery's dimensions are known and large enough to accommodate your images without them needing to be scaled up or down to fit within the gallery's image area.)

Go to forum: Juicebox-Pro Support

563 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

Now all i need to do is ask if we can have the first image in the slideshow set as the icon!

Unfortunately, as I'm sure you're already aware, there is no easy way to do this.
What you are doing is probably as automated as possible (using JuiceboxBuilder-Pro).
(With the Juicebox plugin for Lightroom, you could quite easily point towards the first image in the gallery but there would be no way to process the image to create multiple different sizes so you'd need to rely on the browser's algorithms to dynamically resize the image as and when required.)

Thanks for the help - it worked really well.

You're welcome!

Go to forum: Juicebox-Pro Support

564 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

I'm sorry that you've not been able to resolve your problem.
It does seem to be some kind of server setup issue.
If I view the source of the gallery's web page in a browser and click on the 'src' attribute's value for any <script> tag, I should be able to see the contents of the file but, for every JavaScript file I've checked, the server just displays the site's error 404 (file not found) page.
Likewise, I cannot view the gallery's dynamically-generated XML data in isolation either. The same error 404 is returned. (This is in a desktop browser.)
It looks like the server might have some kind of hotlink protection for JavaScript and XML files (and possibly other file types) which could certainly be preventing the gallery from being displayed. If a browser cannot access a gallery-specific file directly, then Juicebox will not be able to see it either.
A change of web host might be the best course of action if the current host is unwilling or unable to help.

Go to forum: Juicebox-Pro Support

565 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

You could place your icon into the 'template/jbcore' folder, (JuiceboxBuilder-Pro copies the entire 'template/jbcore' folder across to the gallery folder), e.g.:
Mac: /Applications/JuiceboxBuilder-Pro.app/Contents/Resources/template/jbcore/icon.png
Windows: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\jbcore\icon.png

Your <link> tag would then look something like this (with a relative path to the icon file within the gallery's 'jbcore' folder):

<link rel="apple-touch-icon" href="jbcore/icon.png"/>

Use a similar path for any other <link> tags you use.

Go to forum: Juicebox-Pro Support

566 Reply by Steven @ Juicebox

(2 replies, posted in Tricks and Tips)

Just a couple of quick clarifications and expanded explanations:

None of which are in the Config Guide.

All the configuration options which are used by Juicebox when the gallery is displayed in a browser (i.e. those options which make a difference to the layout and functionality of a gallery) are included in the Config Options page.
JuiceboxBuilder-Pro does write some extra settings to the gallery's 'config.xml' file which are not included in the Config Options page.
These settings mostly refer to image generation and are included so that if the gallery is opened and edited by JuiceboxBuilder-Pro in the future, the same image settings (e.g. dimensions and quality) will be used.

Side Note: config.xml and index.html are really a pair of files to be considered together. JbB changes both files depending on settings selected.

All configuration options (required by both Juicebox and JuiceboxBuilder-Pro) and image data are stored in the gallery's 'config.xml' file.
The 'index.html' file contains just the gallery's embedding code and the SEO Content (if the 'Add SEO Content' checkbox is selected in JuiceboxBuilder-Pro's 'Customize -> Sharing' section).
The SEO Content contains the image paths, titles and captions.
The only configuration options that are stored in the embedding code are the Embed Options, backgroundColor, galleryWidth and galleryHeight.
JuiceboxBuilder-Pro writes values for these options to the 'config.xml' file (again options which are not used by Juicebox when the gallery is displayed) so that the application's interface can be populated with the correct values when the gallery is opened for editing.
(JuiceboxBuilder-Pro reads only the gallery's 'config.xml' file (and not the 'index.html' file) on opening a gallery so all data required to recreate a gallery is stored in the 'config.xml' file.)

Now, there will always be a setting for 'show open button' in your config.xml.

As you correctly mention, default values do not need to be written to the 'config.xml' file.
If a particular configuration option is not present in the 'config.xml' file, then Juicebox will use the option's default value.
If you reset an option to its default value using its own input field (e.g. checkbox or combobox), then the option will remain in the 'config.xml' file (with the correct default value).
However, if you reset an option's value using the 'cross-in-a-circle' icon to the right of the option (in JuiceboxBuilder-Pro's interface), then the option will be removed from the 'config.xml' file.
Essentially, if a value is set by the user (even to a default value), then the option will be present in the 'config.xml' file.

I don't know what performance that might make on slower, low powered devices.

Having all configuration options listed in a 'config.xml' file really won't make any noticeable difference in a real-world scenario and is nothing to worry about.

Go to forum: Tricks and Tips

567 Reply by Steven @ Juicebox

(1 replies, posted in Tricks and Tips)

Stickied! Thanks!

Go to forum: Tricks and Tips

568 Topic by Steven @ Juicebox

(0 replies, posted in Tricks and Tips)

To quickly and easily copy configuration options from one gallery to another, you can create a preset (noted in the JuiceboxBuilder User Guide) from the original gallery and apply the preset to a new gallery.

(1) Open the original gallery in JuiceboxBuilder.
(2) Save the gallery's configuration options as a preset file (select 'Presets -> Save Preset...' from the drop-down menu at the top of the application).
(3) Open or create a new gallery in JuiceboxBuilder.
(4) Load the preset file ( 'Presets -> Load Preset...' ) to apply the configuration options stored in the preset file to the gallery.
(5) Save the gallery on the 'Publish' tab.

Those who are confident manually editing files can simply copy and paste the configuration options from one gallery's 'config.xml' file to another. (Configuration options are stored as attributes to the opening <juiceboxgallery> tag.)

Go to forum: Tricks and Tips

569 Topic by Steven @ Juicebox

(0 replies, posted in Tricks and Tips)

The Juicebox Plugin for Lightroom does not support a traditional 'preset' file (as used by JuiceboxBuilder) but you can create a 'template' in Lightroom which can be loaded at any time to apply a certain combination of configuration options to a gallery. (This will save you from having to set each configuration option individually.)

With the settings as you want to save them (in the Lightroom plugin's interface), click the + sign to the right of the text 'Template Browser' (in the left panel of the 'Web' section) and select a name for your template.
At any time in the future, if you want to apply these settings to a new gallery, just expand the 'Template Browser' control panel, scroll down to the 'User Templates' section and select your template.

Go to forum: Tricks and Tips

570 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Examining the config.xml and index.html created in the past does not help because the tags in those files don't match the names of the settings in the LR UI.

The configuration options (stored as attributes to the opening <juiceboxgallery> tag in the gallery's 'config.xml' file) should match up with their corresponding settings in the Lightroom interface.
For example showAutoPlayButton (in the 'config.xml' file) is listed as "Show Auto Play Button" in the Lightroom plugin's 'Appearance -> Button Bar' section.
If you're not sure which section a certain configuration options is listed under, then search for the option name on the Config Options page and check which section header it comes under (and then scroll down the 'Appearance' section in the Lightroom plugin's interface until you find section header that you are looking for).

In Lightroom, you can save a set of Juicebox configuration options (like a JuiceboxBuilder preset) as a template.
With the settings as you want to save them, click the + sign to the right of the text 'Template Browser' (in the left panel of the 'Web' section) and select a name for your template.
At any time in the future, if you want to apply these settings to a gallery, expand the 'Template Browser' control panel, scroll down to the 'User Templates' section and select your template.

Alternatively, for a quick and easy way to copy configuration options from one gallery to another, you can just copy and paste the options (essentially the entire opening <juiceboxgallery> tag) from one gallery's 'config.xml' file to another (in a plain text editor).

Another thing you could do is open a gallery (whose options you'd like to copy) in JuiceboxBuilder-Pro.
Now, go to 'Presets -> Save Preset...' from the drop-down menu at the top (to save the gallery's configuration options as a preset file).
You can now open any other gallery in JuiceboxBuilder-Pro and load the preset file (Presets -> Load Preset...') to apply all the configuration options stored in the preset file to the gallery. (Then, just re-save the gallery on the 'Publish' tab.)

I hope this helps.

Go to forum: Juicebox-Pro Support

571 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

Thanks!

Go to forum: Juicebox-Pro Support

572 Topic by Steven @ Juicebox

(0 replies, posted in Tricks and Tips)

With Juicebox, you are able to create as many individual galleries as you like but if you want to link them together, you would normally need to do so manually following the online examples in the Embedding Multiple Galleries support section.

Otherwise, for an automated solution, you could use Showkase (a PHP web application) to create a complete portfolio website online, integrating as many Juicebox galleries as you like (all indexed on gallery index pages) without the need for any manual coding at all.

However, for a quick and easy way to link together a few Juicebox galleries, you might like to try this method.

(1) Create your Juicebox galleries as normal (with JuiceboxBuilder, for example) and name the gallery folders 'gallery1', 'gallery2', etc. (This naming convention is important for this method to work.)
(2) Use the code below to create an HTML file, put the file in the same directory as the gallery folders and open the HTML file in a browser.

That's it. The file will initially load the first gallery ('gallery1') and will provide links to all Juicebox galleries.
You can edit the HTML code (to change the page header, colors, etc.) in a plain text editor if you like.

This is not intended to be anything like a replacement for Showkase (which is a fully-featured website creation tool with full support for creating Juicebox-Pro galleries within its interface).
It is just a quick and easy way to display a few already-made Juicebox galleries.

I hope it helps someone!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            html, body {
                height: 100%;
                overflow: hidden;
            }
            body {
                background-color: #222222;
                margin: 0px;
            }
            #header {
                background-color: #222222;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                padding: 10px 0px;
                text-align: center;
                width: 100%;
            }
            #page {
                font-size: 30px;
            }
            #menu {
                padding: 10px 40px 0px 40px;
            }
            #footer {
                background-color: #222222;
                bottom: 0px;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                left: 0px;
                position: relative;
                text-align: center;
                width: 100%;
            }
            #wrap {
                margin: 0 auto;
                width: 80%;
            }
            .gallery {
                cursor: pointer;
            }
            .gallery.selected {
                text-decoration: underline;
            }
            span.gallery:hover {
                color: #888888;
            }
        </style>
        <script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
        <title></title>
    </head>
    <body>
        <div id="header">
            <div id="page"></div>
            <div id="menu"></div>
        </div>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
        <div id="footer">
            <div id="description"></div>
        </div>
        <script type="text/javascript">

            // Enter Page Title here
            var page = "Multiple Galleries";

            // Initialize Juicebox object variable name
            var jb;

            // Function to process all galleries
            function doProcess(counter, gallery) {
                $.get('gallery' + counter + '/config.xml', function(data) {

                    // Build gallery folder name
                    var base = 'gallery' + counter;

                    // Create space between links
                    if (counter > 1) {
                        $('#menu').append($('<span />').html('&nbsp;&nbsp;&nbsp;'));
                    }

                    // Fetch Gallery Title from gallery XML file
                    var title = $.trim($(data).find('juiceboxgallery').attr('galleryTitle')) || 'Untitled';

                    // Fetch Gallery Description from gallery XML file
                    var description = $.trim($(data).find('juiceboxgallery').attr('galleryDescription')) || '';

                    // Add link to Document Object Model
                    $('#menu').append($('<span />').attr('id', base).addClass('gallery').data('description', description).html(title));

                    // Initially load gallery
                    if (counter === gallery) {
                        loadGallery(base, description);
                    }
                }).done(function() {

                    // Process next gallery
                    doProcess(++counter, gallery);
                }).fail(function() {

                    // Show header and footer when all galleries have been processed
                    $('#header, #footer').css('visibility', 'visible');

                    // Layout page and resize gallery
                    doLayout();
                });
            }

            // Function to layout page and resize gallery
            function doLayout() {
                var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height(), 10);
                var headerHeight = parseInt($('#header').outerHeight(true), 10);
                var footerHeight = parseInt($('#footer').outerHeight(true), 10);
                var galleryHeight = windowHeight - headerHeight - footerHeight;
                $('#wrap').height(galleryHeight);
                if (jb) {
                    var galleryWidth = parseInt($('#wrap').innerWidth(), 10);
                    window.setTimeout(function() {
                        jb.setGallerySize(galleryWidth, galleryHeight);
                    }, 500);
                }
            }

            // Function to load gallery, underline selected link and show Gallery Description in page footer
            function loadGallery(base, description) {

                // Load gallery
                jb = new juicebox({
                    backgroundColor: "#222222",
                    baseUrl: base + "/",
                    containerId: "juicebox-container",
                    galleryHeight: "100%",
                    galleryWidth: "100%"
                });

                // Style selected link
                $('.gallery').removeClass('selected');
                $('#' + base).addClass('selected');

                // Show Gallery Description in page footer
                $('#description').css('padding', description ? '10px 40px' : '0px').html(description);
            }

            // Show Page Title in browser tab
            document.title = page;

            // Check if jQuery is loaded
            if (typeof jQuery === 'undefined') {

                // Show Page Title in page header
                document.getElementById('page').innerHTML = page;

                // Show message if no galleries found
                document.getElementById('menu').innerHTML = '<span>No galleries found.</span>';
            } else {

                // Run following when Document Object Model is complete
                $(document).ready(function() {

                    // Register resize handler to run doLayout function when browser window is resized
                    $(window).resize(doLayout);

                    // Register click handler to run loadGallery and doLayout functions when link is clicked
                    $('#menu').on('click', '.gallery', function() {
                        var base = $(this).attr('id');
                        var description = $(this).data('description');
                        loadGallery(base, description);
                        doLayout();
                    });

                    // Show Page Title in page header
                    $('#page').html(page);

                    // Hide header and footer until all galleries have been processed
                    $('#header, #footer').css('visibility', 'hidden');

                    // Fetch gallery id from query string
                    var gallery = 1;
                    var term = 'gallery';
                    if (window.location.search) {
                        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 queryInteger = parseInt(queryArray[term], 10);
                        if (!isNaN(queryInteger)) {
                            gallery = Math.abs(queryInteger);
                        }
                    }

                    // Process all galleries
                    doProcess(1, gallery);
                });
            }
        </script>
    </body>
</html>

Go to forum: Tricks and Tips

573 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

You're welcome!
I've also created a new forum for your 'Tricks and Tips' thread here.
I figured it might be difficult to find a particular tip if they were all in a single thread so I've split the thread into individual tips (so that each tip can have its own conversation and replies), each with its own topic heading.

Go to forum: Juicebox-Pro Support

574 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

We've now changed the order of options in the Config Options page so that it matches the order in JuiceboxBuilder-Pro.
It should hopefully be a little easier to find the definition of any specific option now.

Go to forum: Juicebox-Pro Support

575 Reply by Steven @ Juicebox

(2 replies, posted in Tricks and Tips)

That's right, the 'config.xml' file can be opened (and edited) in any plain text editor.

Just to avoid any confusion, captions are included in the 'index.html' file only if the 'Add SEO Content' checkbox is selected in JuiceboxBuilder-Pro's 'Customize -> Sharing' section. The SEO Content is included primarily for SEO purposes (please see here for further details) but it also has the added bonus of allowing the images (and captions) to be seen in browsers which have JavaScript disabled.

Go to forum: Tricks and Tips