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.).
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
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.).
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;
}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.
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.
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.)
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).
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.
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.
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:
jQuery height()
jQuery innerHeight()
jQuery outerHeight()
jQuery outerHeight(true)
JavaScript clientHeight
JavaScript offsetHeight
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.
Why does now add those other lines?
The extra lines you refer to are coming from an updated version of the Lightroom plugin (rather than an updated version of the core Juicebox files).
The latest version of the Lightroom plugin includes settings for all current Lite configuration options (some of which were not available in older versions) and corresponding entries are added for each of these settings in the gallery's 'config.xml' file.
It certainly looks like you have updated the Lightroom plugin at some point. When doing so, the 'jbcore' folder (from the 'juicebox.lrwebengine' folder) which is copied across to the galleries you create would have been overwritten with the version which came bundled in the plugin. You would need to replace this 'jbcore' folder with your own modified version.
It sounds like you may have replaced the plugin's 'jbcore' folder with a stock (unmodified) version of the Juicebox-Pro v1.4.1 'jbcore' folder. If you made any modifications to a previous version of the 'jbcore' folder, then you will need to do likewise with the v1.4.1 version.
But LR is doing something weird because it still says it's JB 1.4 which it can't be since it's from 2013.
Lightroom will display the version of the plugin itself (not the version of Juicebox which you are using).
If you replace the plugin's 'jbcore' folder, the actual plugin itself (the code that interacts with Lightroom to create the gallery) will still remain the same.
I hope this makes sense and helps to clarify things.
Juicebox-Pro uses only one set of configuration options for both normal and fullscreen modes.
All configuration options are set when the gallery is first loaded and it is not possible to change a configuration option (such as imageScaleMode) after the gallery has loaded (for example on going fullscreen). You would need to reload the gallery after changing a configuration option for it to take effect. Also, in order to load a gallery in fullscreen mode, you would need to reload the entire web page with #expanded at the end of the URL.
This would all get very complicated very soon and reloading the entire web page when a user expands the gallery would probably not be a practical solution.
The maxThumbRows and maxThumbColumns configuration options are used only in Large Screen Mode (to determine the upper limit of how many thumbnails will appear on each page).
With maxThumbRows="11" and maxThumbColumns="3" there will be a maximum of 33 thumbnails on each page (and possibly less if the user's browser window is not large enough to accommodate this many thumbnails).
If, for example, you have 50 images in your gallery and your browser window is large enough to display a grid of 11 x 3, then there will be 33 thumbnails on the first thumbnail page and 17 on the next.
In Small Screen Mode, maxThumbRows and maxThumbColumns are not used and the thumbnails will fill whatever space is available.
So the max number in the grid is the rows x columns?
In Large Screen Mode, yes.
I would think the images would fill out the grid and not stop at the combo of rows and columns.
This is what should happen in Small Screen Mode.
If you find that things are not happening as expected, please post the URL to your gallery so that I can take a look and help further.
Juicebox does not have built-in functionality to allow the download of all images in a single action.
You can use the Open Image button (on the Button Bar) to allow a user to open an image in a new window. The image can then be downloaded via the right-click 'Save image as...' browser option.
You could perhaps zip all your images in advance, upload the zip file to your web server and offer it as a download to users via a link in your gallery. You can create a link in the Gallery Title, the Back Button or an image title or caption by using HTML code as documented in these FAQs:
How do I add HTML formatting to image captions and titles?
How do I add HTML formatting to the Gallery Title or Back Button?
But the first problem, which appears only by changing orientation, should be fixed somehow...
I changed the script, but that doesn't fix Safari problems - maybe I made a mistake?
No, you have not made a mistake.
What version of iOS do your devices run?
Also, as I am unable to replicate the problem, could you please upload a screenshot somewhere so that I can see what you are seeing? Thank you.
The doLayout() function uses jQuery functions and uses the version of jQuery bundled within the 'juicebox.js' JavaScript file. It is possible that there may be a problem in this version of jQuery with the functions used (such as outerHeight) in Mobile Safari and it might be worth including the current version of jQuery (v1.11.1) in your page to see if this makes a difference. Download jQuery v1.11.1, place the 'jquery-1.11.1.min.js' file in the same directory as your gallery folders and include the following line of code in the <head> section of your main page:
<script src="jquery-1.11.1.min.js"></script>It's a long shot but it might be worth trying.
This works quite well on all devices, but on iPad or iPhone I notice a white border on the bottom part of the screen after I turn the device to landscape modus.
I do not see this problem on an iPod Touch running iOS 6.1.6.
What version of iOS are you using? Also, do you see the problem in Chrome or just in Mobile Safari?
One possible fix for this might be to run the doLayout() function (to resize the gallery to fill the page) when the device's orientation is changed. Try adding the following JavaScript to your web page:
window.onorientationchange = function() {
doLayout();
};Also expanding in landscape modus, turning to letter modus and reexpanding results in a smaller gallery.
I see this problem (but only in Mobile Safari under iOS 6.1.6 and not in Chrome).
Ordinarily, it should be possible to run the doLayout() function when a gallery is closed (from its expanded state) within the onExpand Juicebox-Pro API event.
However, this will not work on iOS devices as the gallery is expanded in a new page and the onExpand event will not be fired when the gallery is closed. Please see here for details.
You could force expandInNewPage="FALSE" but this will change the scale of the embedding page (which has currently been logged as a bug and should hopefully be fixed in a future version).
Unfortunately, I do not see an easy fix for this (other than to either not rotate your device between expanding and closing a gallery or to use Chrome in preference to Mobile Safari, both of which I realise are not practical solutions).
Sorry. I should have said "complete <image> entries" rather than "imageURLs" in my post above. (I have now corrected it for others reading the post.)
To manually remove an image from a gallery, open the 'config.xml' file in a plain text editor and delete the entire <image> tag corresponding to the image you wish to remove.
A complete <image> entry will look something like this:
<image imageURL="images/wide.jpg"
thumbURL="thumbs/wide.jpg"
linkURL="images/wide.jpg"
linkTarget="_blank">
<title><![CDATA[Title text goes here.]]></title>
<caption><![CDATA[Caption text goes here.]]></caption>
</image>(You can also delete the corresponding images and thumbnails from the 'images' and 'thumbs' folders but this is not strictly necessary to remove an image from a gallery. If the image is not listed in the XML file, then it will not be displayed in the gallery.)
In any case, this is no longer necessary.
The Juicebox-Pro download zip file has been repackaged with the fixed version of JuiceboxBuilder-Pro (the Juicebox-Pro core files remain the same) and you can download it using the link from your purchase email.
Once you install the latest version of JuiceboxBuilder-Pro, you should no longer experience this issue.
Instructions for upgrading can be found here.
This is a known bug. However, it has already been addressed and will be fixed in the next version.
Unfortunately, if you need to remove images from an existing album, the only workaround at the moment would be to remove them manually (delete the images and thumbnails from the 'images' and 'thumbs' folders and delete the corresponding complete <image> entries from the gallery's XML file).
From the look of your screenshot (in the email you sent me), you are entering www.dennisandes.com/show/learningexpress-background.jpg. You need to start this absolute URL with http://, otherwise, the URL will be seen as a relative path (relative to the HTML document which contains the gallery's embedding code).
Use http://www.dennisandes.com/show/learningexpress-background.jpg and your background image should be displayed.
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.
It looks like there is, indeed, a problem with pasting via keyboard in Adobe AIR v14.0. Please see these links for further details:
https://forums.adobe.com/thread/1495749
https://bugbase.adobe.com/index.cfm?eve … id=3775354
In the meantime, workarounds would be to either:
(1) Paste the text via mouse context menu.
(2) Type the text into the input field.
(3) Paste the text via keyboard and manually delete the duplicate entry.
(4) Revert to a previous version of Adobe AIR (not necessary if using #1, #2 or #3 above). Previous versions of Adobe AIR can be downloaded from this web page.
Thank you for reporting this problem. It has already been reported in this forum thread.
The double-paste issue seems to happen:
(1) Only on Mac (not on PC).
(2) Only when pasting via keyboard (not via mouse context menu).
(3) Only under Adobe AIR v14.0 (not previous versions).
I have notified the developers of this problem but it looks like there is, indeed, a problem with pasting via keyboard in Adobe AIR v14.0. Please see these links for further details:
https://forums.adobe.com/thread/1495749
https://bugbase.adobe.com/index.cfm?eve … id=3775354
In the meantime, workarounds would be to either:
(1) Paste the text via mouse context menu.
(2) Type the text into the input field.
(3) Paste the text via keyboard and manually delete the duplicate entry.
(4) Revert to a previous version of Adobe AIR (not necessary if using #1, #2 or #3 above). Previous versions of Adobe AIR can be downloaded from this web page.
Thank you for sharing your findings.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.