You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
@wspollack
I'm not sure of the netiquette of reiterating a request.
No problem at all!
I really don't know which suggestions will be picked up and implemented in future versions but there is no problem with your repeated request. Thank you for your continued interest in Juicebox.
Many thanks for posting the screenshot. It's most appreciated.
Summary of thread - Instructions to open an existing gallery in JuiceboxBuilder (to edit it):
(1) Click the 'Open Gallery...' button on the 'Start' tab (or select 'Gallery -> Open...' from the drop-down menu at the top of the application).
(2) In the pop-up 'Select Gallery Folder...' dialog window:
Mac - Navigate towards and then double-click the gallery folder.
Windows - Navigate towards and then select (with a single left-click) the gallery folder (not a file within the gallery folder) and click the 'Select Folder' button.The gallery folder is the folder which contains the gallery's XML file and the gallery's XML file must be named 'config.xml'. (If you have renamed or moved this file, then the gallery will not be able to be opened by JuiceboxBuilder.)
It sounds like JuiceboxBuilder just fires up the system's native file chooser rather than creating a custom one which would look identical on all systems (which I'm not even sure is possible within Adobe AIR).
This would explain the difference you describe.
Unfortunately, it looks like your screenshot was not successfully attached to your last post.
It might be helpful for other users to have a record in the forum of what the 'Select Gallery Folder...' dialog window looks like on a Mac so I'd be very grateful if you could try to attach your image again.
Thank you (and thanks again for sharing the double-click trick on the Mac).
The Splash Page itself seems to be responsive (in both the horizontal and vertical dimensions).
The problem seems to be just with the display of the image within the Splash Page.
Your 'main.css' file contains some global CSS rules which the Splash Page is inheriting and which is affecting the display of the Splash Page image.
For example, on line 1319 of your 'main.css' file is the following code:
*, *:before, *:after {
box-sizing: inherit;
}This CSS rule is being applied to all elements on your web page (including those within the Juicebox gallery) and seems to be responsible for truncating the right-hand side of your Splash Page.
It is difficult for Juicebox to protect itself from such global CSS rules and I would recommend that you apply CSS rules to only those elements on your web page which require them through use of CSS selectors (ids and classes).
It looks like there may be other global CSS rules in your 'main.css' file (being applied to all instances of certain HTML elements) which may be affecting the display of your Splash Page so it would certainly be worthwhile checking this out.
Also, your web page seems to have breakpoints (where the layout of your web page changes with a jump when the browser window dimensions cross certain thresholds).
If you find that the Splash Page does not resize as expected when these breakpoints are crossed, then you might need to put your gallery's embedding code into a JavaScript function and call the function (to reload the gallery) each time a breakpoint is crossed (and after your custom code has assigned new dimensions to the containers on your web page).
For example:
<script src="jbcore/juicebox.js"></script>
<script>
function loadGallery() {
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
}
</script>
<div id="juicebox-container"></div>Then, each time you want to load or reload the gallery (when the web page is initially loaded and each time a breakpoint is crossed), you can call the JavaScript loadGallery() function.
Incidentally, using dimensions of 70% means that the gallery (or in your case the Splash Page) will not fill the parent container (and this can result in blank space to the right-hand side and below the gallery or Splash Page).
You might like to consider using dimensions of 100% (so that you can be sure that the gallery or Splash Page fills the parent container) and then size the parent container on your web page accordingly (using CSS).
I hope that these suggestions help.
From that instruction I was expecting a button in the dialogue that says "Select Folder"...
There is a button labelled 'Select Folder' within the 'Select Gallery Folder...' pop-up dialog window (see screenshot attached).
Double-clicking the gallery folder within the 'Select Gallery Folder...' pop-up dialog window does not work on my Windows 10 PC. It just takes me inside the gallery folder (which does not help in the process of trying to open a gallery in JuiceboxBuilder).
Selecting the gallery folder (via a single left click) and then clicking the 'Select Folder' button works fine.
Maybe double-clicking the gallery folder works as a shortcut on your system but selecting the gallery folder and clicking 'Select Folder' should work on all systems.
Regardless, I'm glad to hear that you've been able to resolve your problem.
Thank you for letting me know.
I want to open the gallery I just created (and uploaded successfully, ta-dah)...
If you have uploaded a complete gallery folder to your web server, then you should be able to view the gallery on a web page of its own by opening open the 'index.html' file (from directly inside the gallery folder) in your browser.
For example, if your gallery folder is named "my_gallery" and you have uploaded the complete gallery folder to the root directory of your web space (in this example, on a domain named "example.com"), then the gallery can be viewed by entering this URL in your browser's address bar: http://example.com/my_gallery/index.html
... there's no files in there that can be opened directly by JB.
You can view a Juicebox gallery by opening the gallery's 'index.html' page in any modern browser (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
Otherwise, you can embed the gallery into an existing web page (following the embedding instructions here) and open that web page in a browser instead.
If you are trying to open an existing gallery in JuiceboxBuilder-Lite (for example to edit it), then you need to click 'Open Gallery...' (or 'Gallery -> Open...' from the drop-down menu at the top) and then navigate towards and select the gallery folder itself (not a file within the gallery folder) before clicking 'Select Folder'. The gallery folder is the folder which contains the gallery's XML file and the gallery's XML file must be named 'config.xml'. (If you have renamed or moved this file, then the gallery will not be able to be opened by JuiceboxBuilder-Lite.)
I hope this helps to clarify things.
Please let me know how you get on and if I can be of any further assistance.
Thank you.
Both options (using the Splash Page and creating your own image link) are just as robust as each other (and both are valid HTML 5 options).
It's really just personal preference as to which option you choose to use.
The Splash Page option involves embedding the gallery into your web page (see here for details) but once this is done, you can configure the Splash Page (the image and text displayed) via the available Splash Page Options without the need for any further manual coding.
However, there's absolutely nothing wrong (in terms of design and/or code validity) with just manually creating a plain and simple image link to a gallery's 'index.html' page if that's what you'd rather do.
If you are still undecided, you could always try both approaches and see which one you prefer/which one works best for you within your own website.
It's unfortunate that you are unable to add all your images at once but it's a simple enough workaround that gets the job done.
I'm glad it works for you. Thank you for letting me know.
I'm sorry to hear that you are having problems with JuiceboxBuilder-Pro.
Hopefully my notes below will help.
First of all, it might help to know exactly how the error message is triggered.
Does the error message occur as soon as you click the 'New Gallery' button or is there a set of steps that seems to cause the problem (and if so, what are they)?
If the error message occurs when you try to add many images to JuiceboxBuilder-Pro at once, then Adobe AIR (the platform on which JuiceboxBuilder-Pro runs) may not be able to allocate enough memory for the task at hand. Even if your computer has plenty of free RAM, Adobe AIR applications are limited to around 1GB of memory allocation. The workaround is to add your images in smaller batches.
If this is not the case, then try uninstalling and then reinstalling JuiceboxBuilder-Pro to see if this helps.
Please follow the procedure below.
(1) Uninstall JuiceboxBuilder-Pro.
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.
(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) Reinstall JuiceboxBuilder-Pro following the instructions here.
(I realise that you are using a Windows PC but I've included notes for Mac above, too, in case any Mac users are experiencing similar issues and are reading this forum thread.)
Hopefully this will help.
If not, then try uninstalling and reinstalling Adobe AIR itself, too.
You can download the latest version (v30.0) from here.
Also, it might help to check the Windows Event Viewer.
There should be an entry in the 'Windows Logs -> System' section corresponding to the crash. (The easiest way to find the relevant entry is to take a note of the time of the crash and look for entries around that time in the log.)
If you highlight the relevant entry, then the details displayed in the 'General' and 'Details' tabs should help to pinpoint the exact cause of the problem.
If you post these details in this forum thread, I might be able to help further.
However, hopefully a complete uninstall and reinstall of JuiceboxBiilder-Pro will solve your problem.
It's certainly very strange that the problem manifested itself in only your gallery when viewed in Safari 11.1.1, especially when an identical test gallery (except for the gallery image and hosting web server) did not demonstrate the problem in the same browser.
However, I'm glad that everything seems to be OK at the moment with your new configuration options.
If you encounter the problem again, please let me know (just post back here) and I will ask the developers to investigate further. Thank you.
Thanks for the video and additional information.
Unfortunately, as the problem happens only in a browser that I do not have access to (and, therefore, I cannot replicate the problem myself), I'm going to need your help to troubleshoot further.
Here's a test gallery using exactly the same configuration options that your gallery uses except for the value of emailAddress . (I've removed your email address from the test gallery.)
The test gallery even uses a baseUrl as your gallery does (with the same folder name) and also has the same dimensions and background color.
Also, both galleries (yours and mine) use the same version of Juicebox-Pro (v1.5.1).
The only two differences between your own gallery and mine should be:
(1) the images in the galleries
(2) the web server that the galleries are hosted on
Test Gallery: [Link removed.]
Please take a look at this test gallery in Safari 11.1.1 to see if you still see the problem.
This might help to narrow down the root of the problem and eliminate certain factors.
Also, are you able to update to the latest version of Safari (11.1.2) just in case the problem is somehow unique to Safari 11.1.1?
If this turns out to be a browser-specific bug in Juicebox-Pro (which it looks like it might be), I may not be able to solve your problem immediately but, once I've gathered as much information as possible, I can at least contact the developers who will investigate further.
Thank you.
You could just upload the video you your web server and post a link if you like.
In order to troubleshoot further, try displaying your gallery on a page of its own (just use the 'index.html' file generated by JuiceboxBuilder-Pro) rather than viewing it embedded in your web page (alongside all your other content).
Does the problem still happen (in your Safari browser) when you view the gallery in isolation?
Also, here's a full page demo gallery and an embedded demo gallery (on our own web server) both featuring thumbnails with rounded corners.
Do you see the problem (in your Safari browser) in these galleries (or just your own)?
If the problem does not happen when you view the gallery on its own or in our own demo galleries, then the problem may be some kind of CSS and/or JavaScript conflict originating from the custom code on your embedding page.
If this is the case, then duplicate your web page (to use for testing purposes) and then remove different parts of your custom code bit-by-bit (checking the gallery's behavior afterwards) until the thumbnail corners become stable and you find the root of the problem.
I hope this points you in the right direction.
It sounds like your problem could be resolved by using the gallery's Splash Page.
The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a web page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window) and may may too small to be usable.
The Splash Page is essentially an image link for the gallery which displays an image (by default, the first image in the gallery) and some text.
When the user clicks or taps the Splash Page, the gallery is expanded to fill the browser window (giving the images more space to be displayed).
More information about the Splash Page can be found in the Screen Modes section of the Gallery Tour.
Here is a demo gallery featuring the Splash Page.
To always use the Splash Page in your gallery (not just when the gallery is displayed on small screen devices), set showSplashPage="ALWAYS" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
Then, just embed the gallery in your web page following the instructions in the Juicebox Embedding Guide.
The Splash Page will be displayed in your web page at the gallery dimensions (galleryWidth and galleryHeight) and, when the user clicks or taps the Splash Page, the gallery will be expanded to fill the browser window.
You can configure the Splash Page further using the available Splash Page Options.
Otherwise, you could just upload the entire gallery folder to your web server and create a manual image link to your gallery's 'index.html' file inside the gallery folder (which displays the gallery on a page of its own).
For example:
<a href="path_to_gallery_folder/index.html"><img src="path_to_gallery_folder/mages/image0001.jpg" width="600" height="400" alt="image" /></a>I hope this helps.
Thank you for providing the link to your gallery's web page.
I have viewed your gallery in Edge, Chrome 67, Firefox 61.0.1, Internet Explorer 11 and Opera 54.0 (on a Windows 10 PC).
The rounded corners on the thumbnails seem stable in all the browsers I've noted above. (I've not yet seen the rounded corners change to rectangular corners in any of these browsers.)
The only problem I encountered was when viewing your gallery in Safari 5.1.7 (the last version of Safari for the PC).
(I do not currently have access to a Mac so cannot view your gallery in the latest version of Safari.)
In Safari 5.1.7, the thumbnails all have rectangular corners (and are stable as such) but this is probably due to Safari 5.1.7 being woefully out-of-date now (released May 2012) and having limited (or no) support for CSS 3. (Apparently, Safari 6.1 and earlier did not apply border-radius correctly to image borders, as noted here.)
My results in Safari 5.1.7 are essentially of no relevance but I include them here simply for the sake of completeness and because Safari is the only browser that you see the problem in (albeit most likely a different version).
Out of interest, what version of Safari are you using?
There are really only a couple of things that spring to mind that I would try myself.
(1) Try resetting your Safari browser (clearing the cache and temporarily disabling all extensions) to see if this helps.
(2) Try validating your web page with the W3C Markup Validator and fix any errors reported.
I notice that your web page has several errors (many are trivial, others not so) and fixing the errors so that code on your web page validates correctly should help your web page to be displayed with greater consistency and predictability across different browsers.
For example, I notice that your web page has some HTML code (loading 6 external JavaScript files) after the closing </html> tag. (This code should be inside either the <head> ... </head> section or the <body> ... </body> section of your web page.)
I hope my notes above help somewhat, even though I'm not currently able to see (or replicate) the problem myself (which makes troubleshooting that much more difficult).
It sounds like it might be a browser-specific issue (rather than a Windows update).
the firefox didn't display the gallery
What exactly do you see (just a blank space where the gallery should be or something else)?
Do you see any error messages when viewing your gallery? If so, what do they say?
Try completely clearing your browser's cache before reloading your gallery's web page to see if this makes a difference.
It might also help to temporarily disable any and all browser extensions that you might have installed (such as ad blockers) to see if this helps.
Also, try viewing your gallery in different browsers (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari) to see what happens.
Also, please let me know if you are viewing your gallery locally (from your computers hard drive) or online (from your web server).
If your gallery has been uploaded to your web server, then please post the link to your gallery's web page so that I can take a look at it for myself.
Once I'm able to see the gallery, I might be able to determine the cause of the problem and propose a solution.
If you are viewing your gallery locally, then perhaps you could zip your gallery and upload it somewhere (and provide a link) so that I can download it and investigate further.
I hope these notes help but, if not, with a little more information, I'm sure we'll figure out what is causing your problem.
That sounds very strange. As far as I can recall, no-one has reported such a problem before.
Please post a link to your gallery so that I can see the problem myself.
Also, please let me know what browser(s) you see the problem in. The problem might somehow be browser-specific so if you have multiple different browsers installed (Chrome, Edge, Firefox, Opera, Safari), try viewing your gallery in whatever browsers you have available to see if it happens in them all. Thank you.
In the meantime, try clearing your browser's cache before reloading your gallery's web page to see if this makes a difference.
Also, make sure that you are using the latest version of Juicebox-Pro (v1.5.1) just in case a bug from a previous version which has since been fixed is contributing to your problem. If necessary, full instructions for upgrading JuiceboxBuilder-Pro and existing galleries can be found here.
As Juicebox was written from the ground up for a different platform than SimpleViewer (HTML5 vs Flash), Juicebox and SimpleViewer share similar but not identical feature sets. As such, it may not be possible to exactly match a SimpleViewer-Pro gallery using Juicebox-Pro (there may not be direct equivalents for all SimpleViewer-Pro configuration options in Juicebox-Pro), although you should certainly be able to get close.
If you want to have two columns of thumbnails to the left of your main images and vertically aligned to the top of the gallery (like your existing SimpleViewer gallery), set:
thumbsPosition="LEFT"
thumbsVAlign="TOP"
maxThumbColumns="2"
maxThumbRows="7"All these thumbnail options can be found in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section.
When thumbsPosition is set to either LEFT or RIGHT, the number of thumbnail columns is fixed at the maxThumbColumns value whereas the number of thumbnail rows is variable (up to the maxThumbRows value) depending on the dimensions of the thumbnails and the space available in the user's browser.
For reference, here is a list of all Thumbnail Options.
To replicate your existing SimpleViewer gallery, you might also like to set:
captionPosition="BELOW_IMAGE"The caption area will be positioned below the main images and the width of the caption area will match the width of the currently-displayed image.
You can also change the gallery background color, change the thumbnail dimensions and add some image padding to match your existing SimpleViewer gallery if you like.
Here's a demo gallery using the suggestions above: https://juicebox.net/demos/pro/default/ … Padding=50
You could certainly tweak the gallery further if you like.
Here's a list of all Juicebox-Pro Config Options.
Please note that all the options I've used in the demo gallery above (except for backgroundColor) are Pro-only options which are supported by Juicebox-Pro but not Juicebox-Lite (the free version).
I hope this helps.
Unfortunately, Opera Mini in not a supported browser.
On mobile devices, we recommend that Juicebox galleries are viewed in either Mobile Chrome or Mobile Safari.
Can you try to view your gallery in either Mobile Chrome or Mobile Safari on your mobile device to see what happens?
A Juicebox gallery should work fine in the desktop version of Opera, though.
If you are having trouble viewing a Juicebox gallery in Opera on a computer, then please let me know exactly what you mean when you say that "juicebox is crashing".
Also, please post the link to your gallery's web page so that I can see the problem for myself.
Once I'm able to see the gallery live on your web server, I should hopefully be able to determine the cause of the problem and propose a solution.
Thank you.
Worked.
That's great! Thank you for letting me know.
Thanks!
You're welcome!
You can add your Google Analytics code to the 'index.html' template file that the Juicebox Plugin for Lightroom uses to generate the gallery's 'index.html' file. (You can do this before or after the plugin has been installed.)
Location of file to modify before installation:
Extract the 'juicebox_pro_1.5.1.zip' file and you'll find the 'index.html' template file in this location:
juicebox_pro_1.5.1\adobe-lightroom-plugin\juicebox_pro.lrwebengine\index.html
Location of file to modify after installation:
Mac: Users/Username/Library/Application Support/Adobe/Lightroom/Web Galleries/juicebox_pro.lrwebengine\index.html
Windows: C:\Users\Username\AppData\Roaming\Adobe\Lightroom\Web Galleries\juicebox_pro.lrwebengine\index.html
Just open the plugin's 'index.html' file in a plain text editor and add your Google Analytics code to it as you would for a regular gallery's 'index.html' file.
There is some Lightoom-specific code in the file (mostly at the top) but you'll see the regular HTML <head> and <body> tags which should let you know where to add your Google Analytics code.
Then, each time you generate a new gallery with the plugin, your Google Analytics code will automatically be in place.
I hope this helps.
If you use the baseUrl method of embedding, (documented here), then this should cut down on the amount of manual tweaking that you currently do.
If you upload the entire gallery folder (not just the contents), then the gallery's own 'index.html' file (inside the gallery folder) will not overwrite the existing 'index.html' file on your web server (which would not be inside the gallery folder).
You can then either:
(1) Open the 'index.html' file (from inside the gallery folder) in a browser to view the gallery on a web page of its own.
(2) Use the baseUrl embedding code (see link above for an example) to embed the gallery into an existing web page (such as your own custom 'index.html' file).
Either way, there will be no need to modify any paths within the 'config.xml' file.
The baseUrl embedding code is essentially the same as the regular embedding code but with a baseUrl entry pointing towards the gallery folder. The baseUrl entry can be absolute or relative (to the web page containing the embedding code).
If does not matter where on your web server you upload the gallery folder to as long as the two paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself) are correct.
I hope this helps to cut down the number of steps in your current workflow.
Using the standard Piwik analytics code will log hits to just the gallery's web page.
Setting enableDirectLinks="TRUE" in your gallery will give each image in the gallery a unique URL (using a # identifier at the end of the URL) but the web page is not refreshed/reloaded each time a new image is selected so the analytics code will not be rerun (it will be run only once when the web page is initially loaded).
You'll likely need to manually register a hit each time a new image is selected using the Juicebox-Pro API's onImageChange(e) event.
Keep the standard Piwik code in your gallery's web page and then use something like the code below:
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container",
enableDirectLinks: "TRUE"
});
jb.onImageChange = function(e) {
var imageNumber = e.id;
_paq.push(['trackEvent', 'Juicebox', 'Gallery', imageNumber]);
};
</script>
<div id="juicebox-container"></div>You might need to check with Piwik's Event Tracking support page for the correct JavaScript code to use (and you can change the terms 'Juicebox' and 'Gallery' to suit your own needs).
I hope this points you in the right direction.
Wow, thanks a lot for your detailed reply.
You're welcome.
I will gladly use your software and recommend it to other wedding photographers, as this is exactly what I needed. Cheers
Thanks for that! I'm glad you're getting on well with Juicebox-Pro.
You might want to think about adding that sorting option to the left menu...
Please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
I do not know the likelihood of any ideas being implemented but this is certainly the best place for them.
Thank you!
If you drag and drop a selection of images into JuiceboxBuilder-Pro, then the initial order will start with the image that you actually click to initiate the drag and drop action (and then wrap around to the start of the selection).
For example, if you select:
DSC001
DSC002
DSC003
DSC004
... and then drag the selection into JuiceboxBuilder-Pro by clicking and dragging DSC003, the initial order will be:
DSC003
DSC004
DSC001
DSC002
At least this is the default action on my Windows PC. The same thing happens when I copy files from one folder to another (in Windows File Explorer): the copy process always starts with the file I initially click and drag within a selection (although if the sort order for the destination folder is by 'Name', then the images end up in the expected order and the copy process order is rarely noticed, especially if the files are small and the copy process is completed quickly).
You should be able to avoid this by dragging the selection into JuiceboxBuilder-Pro via the very first image in your selection (or by adding the images via the 'Browse...' button instead of dragging and dropping).
In any case, there's a very easy way to order the images (either by File Name or by File Date) once they are in JuiceboxBuilder-Pro.
Just go to 'Images -> Sort -> By File Name' or 'Images -> Sort -> By File Date' from the drop-down menu at the top.
Please see the screenshot attached.
I hope this helps.
You don't need a Flickr Pro account but you do need your Flickr images to be public (instead of private).
It looks like your Flickr images are currently private. When I go to the link you provided, I see the following error message "It appears you don’t have permission to view this album.".
Make sure that all your Flickr image are public and Juicebox should be able to find and display them.
Incidentally, if you use a Flickr Set Id, there is no need to use a Flickr User Id as well. A Flickr Set Id will work fine in JuiceboxBuilder-Pro without a Flickr User Name or Flickr User Id.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.