Juicebox v1.5.1 Released!

2014-11-24 21:54:05

So the question is: is there an easy (i.e. via options) way to set the whole full-screen block, including image and image caption, so that it has ~90% viewport width, ~5% margin-left and right, and of course auto height to preserve image ratio?

As long as you are referring to the normal rather than fullscreen (expanded) gallery display, then you can set the gallery's width to be 90% in the embedding code and horizontally center the gallery's div in its parent container as follows:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
    containerId: 'juicebox-container',
    galleryWidth: '90%'
});
</script>
<div id="parent">
    <div id="juicebox-container" style="margin: 0 auto;"></div>
</div>
<!--END JUICEBOX EMBED-->

No matter what the height of the gallery is, Juicebox will respect the aspect ratio of the main images as long as imageScaleMode is set to SCALE_DOWN or SCALE.

I hope this helps.

2014-11-24 21:46:52

Thank you for clarifying the problem.
Please try this version of the plugin. [Link removed.] Hopefully it will resolve the issue.

Thank you for reporting this problem. I will ensure that it is fixed in the next version of the Lightroom plugin.

2014-11-23 20:16:15

The default metadataExportMode value has changed from 'All' to 'Copyright Only' but all you need to do to change it to 'All' is scroll down to the 'Metadata' field in the 'Output Settings' section, click on the 'Copyright Only' label (to reveal the drop-down menu) and select 'All'.

2014-11-23 20:05:41

The code you posted will give the gallery (the 'juicebox-container' div) a z-index value of 9999 (via the 'menu_devant' class) which will force the gallery in front of all elements with a lower z-index value.

Remove the following code from your style-menu2.css file:

 .menu_devant {
 position:absolute;
 z-index:9999;
 }

... and change line 49 (in the 'menu' class section) from:

  z-index : 1;

... to:

  z-index : 9999;

My own tests with your gallery files show that this should work fine.

2014-11-22 06:44:08

I'm glad you've been able to resolve your problem.
Thank you for posting back to let me know.

Incidentally, you would have a Transaction Id only if you purchased Juicebox-Pro via PayPal. (You would not have a Transaction Id if you paid with a credit card via Gumroad.)

2014-11-21 06:28:33

I'm glad you've been able to resolve your problem.
Thanks for posting back to let me know.

2014-11-20 19:34:24

The 'full.html' file should find the gallery's XML file as specified by your configUrl.

Please make sure that that your gallery uses the current version of Juicebox-Pro (v1.4.2) to ensure that any bugs which were present in previous versions but which have since been fixed are not contributing to your problem.
If necessary, instructions to download the current version and upgrade existing galleries can be found on the Upgrading Juicebox support page.

If this does not help (or is not relevant), then please post the URL to your gallery's web page so that I can take a look and help further.

2014-11-20 07:53:12

I'm glad that you have found a solution to your problem.
However, please be aware that shifting gallery elements via CSS can sometimes have unexpected results.
Juicebox will not be aware of such modifications and will expect the gallery elements to be elsewhere. This can sometimes cause problems when resizing a gallery window or when an animation or transition is carried out of the elements which have been shifted.

2014-11-20 07:49:46

The 'full.html' file contains no PHP code so there is no need to change the extension of the 'full.html' page. A web site can happily contain a mixture of both HTML and PHP files.
In any case, the 'full.html' file cannot be renamed as it is referenced from within the 'juicebox.js' file which is obfuscated and cannot be modified.
Under normal circumstances, there should be no need to modify (rename or move) any files within with 'jbcore' folder.

The 'full.html' file is used when a gallery is expanded on a page of its own. This will happen when expandInNewPage="TRUE" or when expandInNewPage="AUTO" and an iOS device is detected. Please see the Expand Gallery Behavior support section for further information.

2014-11-19 10:10:42

When using thumbsPosition="TOP", the thumbnail area will be above the main image area. Because your column of thumbnails extends beyond the height of the browser window, the main image will be outside the browser window (the top of the main image will be below the last thumbnail in your column) and will never be visible.
Using thumbsPosition="LEFT" instead (or reducing maxThumbRows from 100 to something much smaller) should hopefully be a suitable solution.

2014-11-17 09:50:37

That's great to hear! I hope you enjoy using Juicebox-Pro.
Setting expandInNewPage="TRUE" in JuiceboxBuilder-Pro's 'Customize -> General' section is certainly the easiest way to solve the problem until the next version of Juicebox is released with the bugfix.

2014-11-17 09:46:18

For the thumbs, I was meaning if there was a way to increase the number of *visible* thumbnails with regard to the percentage area of the page.

Juicebox determines the actual number of thumbnails displayed on the page depending on the size of the thumbnails and the amount of space available within the gallery. You can set only the maximum number of columns and rows using the maxThumbColumns and maxThumbRows configuration options respectively

I found that if I set them to top/left/top, then they extend down the page, but as a result the main image is no longer displayed when I click or mouse-over the thumbnails, so in effect, the page is broken.

This certainly sounds like a bug but I have been unable to replicate it in a test gallery of my own (using Juicebox-Pro v1.4.2).
First of all, please ensure that you are using the current version of Juicebox-Pro (v1.4.2) to ensure that any bugs which were present in previous versions but which have since been fixed are not contributing to your problem.
If necessary, instructions to download the current version and upgrade existing galleries can be found on the Upgrading Juicebox support page.
Also, please try using the stock 'jbcore' folder (with no modifications) and display the gallery on a page of its own to see if any custom CSS code is conflicting with the gallery and causing the problem.
If the problem persists, then please post the URL to your gallery so that I can take a look and investigate further. Thank you.

2014-11-17 08:45:44

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

2014-11-16 20:52:57

None of what you are looking to achieve can be done with the available configuration options and using CSS to tweak the position of gallery elements can often involve some trial and error. Doing so can also sometimes cause unpredictable results as Juicebox will not know of any changes you make. For example, if you move an element within the gallery via CSS, Juicebox will expect it to be elsewhere and this may cause problems and/or unwanted knock-on effects (perhaps when the browser window is resized). As such, CSS modifications to shift gallery elements around are not officially supported and you do so at your own risk. That said, I hope you find the notes below helpful.

I would like to lower the vertical position of the caption and page number.

Try adding CSS code such as the following to your gallery's web page:

/* Image number */
.jb-cap-frame .jbac-number {
    margin-top: 20px !important;
}

/* Image Title */
.jb-caption .jb-caption-title {
    margin-top: 20px !important;
}

/* Image Caption */
.jb-caption p {
    margin-top: 20px !important;
}

(I'd also like them to be level!)

Some trial and error may be required but tweaking the margins (as above) should work.

Is there a way to have the thumbs extend lower?

Other than changing the thumbsVAlign setting (TOP, CENTER, BOTTOM), you could try using the following CSS code:

/* Thumbnails */
.jb-idx-thumbnail-container {
    margin-top: 20px !important;
}

/* Thumbnail Navigation Arrows */
.index-navigation.jb-navigation {
    margin-top: 20px !important;
}

2014-11-16 19:42:34

I notice that your gallery uses Juicebox-Pro v1.2.0.
Please upgrade to the current version (v1.4.2) and your problem should be solved.
There was a bug in v1.2.0 affecting 2-image galleries which was fixed in v1.3.0.

Instructions for downloading the current version and for upgrading existing galleries can be found on the Upgrading Juicebox support page.

2014-11-16 11:13:49

You could embed the gallery directly in a web page rather than using the Splash Page by setting showSplashPage="NEVER". However, this is a Pro-only option, too.

Maybe the best solution for Juicebox-Lite at the moment (until the bug is fixed) would be to create your own version of a Splash Page (an image link using HTML) which would link directly to the gallery's own HTML index page (opening the gallery on a web page of its own). Even a text link such as the following would work:

<a href="gallery_folder/index.html">Click to open gallery.</a>

2014-11-15 11:22:34

Would the expandInNewPage in the pro version fix this?

Yes (although this should not be necessary).
What you are describing is actually a known bug whereby elements which have explicitly been assigned a CSS 'position' are not covered when the gallery is expanded either from the Splash Page or by clicking the Expand Button (they should be). This bug has already been addressed and will be fixed in the next version of Juicebox (although I do not know when it will be released).
In the meantime, the workaround (for Juicebox-Pro users), is to set expandInNewPage="TRUE" so that, when the gallery is expanded, it is displayed on a page of its own rather than on top of the embedding page.

2014-11-15 11:19:51

I'm very happy to hear that you have been able to resolve your problem.
I'm glad I was able to help in some small way (by reporting my findings and at least pointing you in the right direction).
Thank you very much for taking the time to email me back to let me know and for posting details of your problem and solution in the forum thread.
Hopefully it will help other users facing a similar problem.

2014-11-14 12:22:01

Each user will have different requirements and, in resizing images, it may help to know the target audience.
For example, if your gallery is likely to be viewed on a mobile device, then you could probably get away with having much smaller images in your gallery than if the gallery is likely to be displayed on a large desktop monitor (the content of the images and web site may play a part in determining this).
The default values in JuiceboxBuidler-Pro usually result in a good compromise between size and quality for most users (or at least a good starting point for the values to be tweaked).

Personally, I convert my own RAW images to JPEG and then feed these JPEG images to JuiceboxBuilder.
The source JPEG images are approximately 10MB each and, using the default 'Large Images' settings of 2048 x 1536 at 80%, the resulting large images are approximately 400KB each. The resulting image look good enough for me (although I understand that everyone will have their own opinion as to what is 'good enough' for their own galleries).

I do not know exactly how JuiceboxBuilder-Pro internally resizes PNG images (using whatever resizing library or algorithm that Adobe AIR provides) but the only user controls are the dimensions and quality settings.
It looks like you would have much smaller (file size) images if you worked with JPEG images from start to finish.

As long as your source images are of a high enough quality, it is unlikely that the images used in your gallery would be visually unacceptable (especially if you kept the quality setting high enough).

Otherwise, you could always create your own set of large images in Photoshop and copy them across into your gallery's 'images/large/' folder. It might be an extra step in your workflow but if it results in a gallery that you are more happy with, then it might be worth doing.

2014-11-14 11:56:18

In a 100% x 100% gallery on a mobile device (where the gallery is the only element on the web page and the web page fills the browser window), the viewport is locked and pinch-zooming is disabled. It would not be possible to change this.
Pinch zooming would be possible only if the gallery is embedded in a web page alongside other content (at dimensions of less than 100% x 100%) which would result in the viewport not being locked by Juicebox.

2014-11-14 11:34:04

The z-index value of your menu should be higher than that of your gallery (and its internal components) so that the menu is stacked on top of the gallery. I would recommend trying a z-index value of 9999 for your menu (and not manually applying a z-index value to any gallery elements at all).

Also, you will need to ensure that the z-index value is assigned to the correct class or id of your menu system.

If you are unsure which classes or ids should be assigned z-index values, please post the URL to your web page so that I can take a look and hopefully help further.

2014-11-13 11:19:43

Juicebox proposes to copy the embedding code "as is" into the HTML page (it even provides a separate button for copying)! Which doesn't mean to modify the text, does it?

The embedding code should be copied into your web page unmodified as HTML code.
If RapidWeaver thinks that whatever you are pasting should be displayed on screen as plain text (rather than parsed by the browser as HTML code), then it will escape certain entities (as you have reported).
It looks like you may need to check that you are entering the embedding code as raw HTML rather than plain text. Please check the input mode on your editor.

I'm using the standard Safari browser, running with Mavericks, so what shall be wrong with this browser?

There is nothing wrong with this browser. My point was that if any browser sees a line such as:

<script src=&bdquo;jbcore/juicebox.js&bdquo;></script>

... then the browser will fail to load the 'juicebox.js' file into the web page and the Juicebox gallery will, therefore, fail to display (as that is no longer valid HTML code, having been modified by Rapidweaver).

Going deeper I got this:

The error message you pasted suggests that your gallery files may be on a different domain or subdomain to the web page containing the gallery's embedding code. All gallery files must be on the same domain or subdomain due to the JavaScript same-origin policy. Otherwise, you could implement a Cross-Origin Resource Sharing (CORS) solution by adding the following line of code to the .htaccess file in the root directory of the domain which currently hosts your gallery.

Header add Access-Control-Allow-Origin "*"

Please tell me an address where to send it to.

It would certainly help if I could see the code you are using and the file structure of your site.
If possible, please send me a zip file of your complete project. I have sent you a message with an email where you can forward it to me.
In the meantime, please make sure that you are entering your embedding code in RapidWeaver's raw HTML (rather than plain text) input mode so that your double-quotes are not escaped. I am not familiar with Rapidweaver but their own support (or a web search) should hopefully be able to help you with this.

2014-11-13 00:50:53

It's not so much Juicebox that doesn't understand src=&bdquo;juicebox/jbcore/juicebox.js" but your browser.
RapidWeaver may be escaping the initial double quote in order to display the actual embedding code as text on your web page.
Please make sure that you are entering your embedding code as HTML code rather than plain text.

Incidentally, &bdquo; is a double low-9 quotation mark. You should probably be using standard double quotation marks (which would escape to ") instead.

After undoing this replacement, at least juicebox.js shows a gray area and immediately the text message "Juicebox Error: Config XML file not found" though the config.xml file is still at the same place as it was before.

Please post the URL to your gallery's web page so that I can take a look and help further. The problem is likely to be the path to the gallery's XML file.

Even using the option configUrl does not help (where RW6 again substitutes the first apostrophe with the HTML syntax which juicebox cannot deal with).

Again, ensuring that you are entering your embedding code as HTML code rather than plain text should hopefully solve this problem. Chapter 7 in this web page may help with this.

2014-11-13 00:41:14

This bug is due to be fixed in the next version of Juicebox (although I do not know when it will be released).
If you would like to be notified when new versions are released, then please join the mailing list at the foot of our homepage, follow us on Twitter @JuiceboxGallery or subscribe to our blog RSS feed.

2014-11-12 09:27:38

The 'theme.css' file which comes bundled with Juicebox-Pro v1.4.2 is the correct one (even though it is labelled as v1.4.1).
The labelling of the file as v1.4.1 was just an oversight (it should have been labelled as v1.4.2).
v1.4.1 and v1.4.2 actually use the same 'theme.css' file.

The only change in Juicebox from v1.4.1 to v1.4.2 was the handling of Flickr API URLs (please see the Version History for full details of changes between versions) and this did not require any CSS changes.

I hope this helps explain things and reassures you that the 'theme.css' file in v1.4.2 is OK.

Juicebox v1.5.1 Released!

Search options (Page 131 of 235)

Posts found: 3,251 to 3,275 of 5,863

3,251 Reply by Steven @ Juicebox 2014-11-24 21:54:05

Re: fullScreen customization [SOLVED] (5 replies, posted in Juicebox-Pro Support)

3,252 Reply by Steven @ Juicebox 2014-11-24 21:46:52

Re: Lightroom plugin, metadata option disappeared ? [SOLVED] (5 replies, posted in Juicebox-Pro Support)

3,253 Reply by Steven @ Juicebox 2014-11-23 20:16:15

Re: Lightroom plugin, metadata option disappeared ? [SOLVED] (5 replies, posted in Juicebox-Pro Support)

3,254 Reply by Steven @ Juicebox 2014-11-23 20:05:41

Re: to put the menu in front of the gallery (3 replies, posted in Juicebox-Pro Support)

3,255 Reply by Steven @ Juicebox 2014-11-22 06:44:08

Re: XML Path Variable (2 replies, posted in Juicebox-Pro Support)

3,256 Reply by Steven @ Juicebox 2014-11-21 06:28:33

Re: rename of full.html ... How ? [SOLVED] (7 replies, posted in Juicebox-Pro Support)

3,257 Reply by Steven @ Juicebox 2014-11-20 19:34:24

Re: rename of full.html ... How ? [SOLVED] (7 replies, posted in Juicebox-Pro Support)

3,258 Reply by Steven @ Juicebox 2014-11-20 07:53:12

Re: Move image & caption down without changing stage & image padding (2 replies, posted in Juicebox-Pro Support)

3,259 Reply by Steven @ Juicebox 2014-11-20 07:49:46

Re: rename of full.html ... How ? [SOLVED] (7 replies, posted in Juicebox-Pro Support)

3,260 Reply by Steven @ Juicebox 2014-11-19 10:10:42

Re: Caption position (5 replies, posted in Juicebox-Pro Support)

3,261 Reply by Steven @ Juicebox 2014-11-17 09:50:37

Re: Problems with mobile browser pictures expanding into window [SOLVED] (6 replies, posted in Juicebox-Lite Support)

3,262 Reply by Steven @ Juicebox 2014-11-17 09:46:18

Re: Caption position (5 replies, posted in Juicebox-Pro Support)

3,263 Reply by Steven @ Juicebox 2014-11-17 08:45:44

Re: Juicebox.js Problem [SOLVED] (4 replies, posted in Juicebox-Pro Support)

3,264 Reply by Steven @ Juicebox 2014-11-16 20:52:57

Re: Caption position (5 replies, posted in Juicebox-Pro Support)

3,265 Reply by Steven @ Juicebox 2014-11-16 19:42:34

Re: Juicebox.js Problem [SOLVED] (4 replies, posted in Juicebox-Pro Support)

3,266 Reply by Steven @ Juicebox 2014-11-16 11:13:49

Re: Problems with mobile browser pictures expanding into window [SOLVED] (6 replies, posted in Juicebox-Lite Support)

3,267 Reply by Steven @ Juicebox 2014-11-15 11:22:34

Re: Problems with mobile browser pictures expanding into window [SOLVED] (6 replies, posted in Juicebox-Lite Support)

3,268 Reply by Steven @ Juicebox 2014-11-15 11:19:51

Re: Shows don't open after upgrade to RapidWeaver 6 (7 replies, posted in Juicebox-Pro Support)

3,269 Reply by Steven @ Juicebox 2014-11-14 12:22:01

Re: Multi-size images support question–balancing quality and performance? (1 replies, posted in Juicebox-Pro Support)

3,270 Reply by Steven @ Juicebox 2014-11-14 11:56:18

Re: Pinch gesture in same Window (3 replies, posted in Juicebox-Pro Support)

3,271 Reply by Steven @ Juicebox 2014-11-14 11:34:04

Re: to put the menu in front of the gallery (3 replies, posted in Juicebox-Pro Support)

3,272 Reply by Steven @ Juicebox 2014-11-13 11:19:43

Re: Shows don't open after upgrade to RapidWeaver 6 (7 replies, posted in Juicebox-Pro Support)

3,273 Reply by Steven @ Juicebox 2014-11-13 00:50:53

Re: Shows don't open after upgrade to RapidWeaver 6 (7 replies, posted in Juicebox-Pro Support)

3,274 Reply by Steven @ Juicebox 2014-11-13 00:41:14

Re: Please please fix iPad iOS8 "Jump to top bug" ASAP! [SOLVED] (9 replies, posted in Juicebox-Pro Support)

3,275 Reply by Steven @ Juicebox 2014-11-12 09:27:38

Re: Juicebox Pro 1.4.2 has theme 1.4.1 installed [SOLVED] (2 replies, posted in Juicebox-Pro Support)

Posts found: 3,251 to 3,275 of 5,863