You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Having your own custom placeholder for the gallery as it loads is certainly a wise decision.
I'm sure that visitors to you site will be willing to wait a few seconds if they know that resource files are still being loading in the background.
There's nothing worse than a blank space and not knowing if the web page has stalled or not!
In this case, 8.1s for a page to START loading content is just too high.
Agreed. However, it sounds like you've got things under control and are doing all you can to optimize things.
Unfortunately, I don't think I can add anything which would help further. I'll certainly post back here if I think of anything.
Thanks for sharing your CSS animated loading icon, though. Very interesting... works well and looks good!
OK, no problem!
You're welcome.
I realise that it's not ideal but at least knowing the root cause of the problem, we can workaround it.
I cannot be sure of the exact reason why your gallery did not load your images (which is why I gave a few different suggestions).
All I can say with any certainty is that when I went to view one of your images directly (bypassing Juicebox), your web server did not display it and when I viewed the source of the 'blank' page in my browser, I saw HTML code which looked like a generic error 404 page.
The HTML code I saw (the source of the 'blank' page on which the image should have been displayed) was exactly the same HTML code that I see when I view the source of any web page on your web site that definitely does not exist, such as: https://www.haselau.eu/this_web_page_do … exist.html
This suggested to me that the images had not been uploaded to the correct location on your web server (and this is why my first suggestion was to check that the images had been uploaded to your web server successfully).
Juicebox can display images which contain accented characters as long as your web server can (my test gallery demonstrates this) so try again with your accented filenames if you like (although I'd still recommend using only web-safe characters for image filenames and leave accented characters for image titles and captions).
However, please note that JuiceboxBuilder-Pro does not accept images which contain #, ? and ' characters.
This is noted in the Known Issues section of the JuiceboxBuilder-Pro User Guide.
These characters are reserved characters in URLs (rather than just being accented characters) and ideally should not be used within image filenames.
Unfortunately, if you are trying 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 (as far as I am aware).
The workaround is to add your images in smaller batches. Trial and error will help to determine a safe number of images per batch (it will depend on your own images) but, if adding 319 images at once fails, try batches of around 150 images as a starting point.
Just as a point of comparison, I have a folder of 400 test images on my desktop and I am able to add them all at once without any problem. The number of images that you will be able to add really does depend on your own image filesizes so I can't really recommend a number. Trial and error really is the best way to determine a safe number of image to add at once.
I hope that adding your gallery images in multiple drag-and-drop actions (instead of just one) is not too much of an inconvenience, although I realise that it is not ideal.
I'm glad that you have been able to resolve your problem but, just to clarify, the problem is with your web server rather than with Juicebox itself.
Essentially, you uploaded an image to your web server with an accented character in its filename and your web server was unable to display it when you went directly to its URL.
(The image happened to be inside a Juicebox gallery folder but this test actually has nothing to do with Juicebox.)
If the browser is unable to display the image directly, then Juicebox will also be unable to display the image in the gallery.
I would always recommend using only web-safe characters for image filenames but, just to let you see that Juicebox can handle accented characters in image filenames, here's a single-image test gallery (created by JuiceboxBuilder-Pro) where the image in the gallery is named "éèâîôñüïç.JPG": [Link deteled.]
As long as the web server is happy with accented characters, then Juicebox will be, too.
Try contacting your web host to see if they have made any changes recently which might be affecting your results.
The problem with your '2018nordart' gallery is with the images on your web server.
According to your gallery's 'config.xml' file (https://www.haselau.eu/jb/2018nordart/config.xml), the first image in your gallery should be located here: https://www.haselau.eu/jb/2018nordart/i … 202018.jpg
However, going directly to the image's URL in a web browser (bypassing Juicebox) displays a blank page instead of the image.
Going directly to the image's URL in a web browser should display the image (completely independent of Juicebox) but this does not happen so the problem is with the image on your web server rather than with Juicebox itself.
First of all, please double-check that the images have been successfully uploaded to your web server.
It looks like the blank page may actually be an error 404 (file not found) page so the images may not have been uploaded to the correct location on your web server.
Please also check out this FAQ:
My images show locally, but not when I upload them to my website. Why?
If this does not help, then the problem could be due to your image filenames containing special characters (such as "ü").
As an image filename forms part of a URL when uploaded to a web server, it would be wise to use only web-safe characters within image filenames. Please see section 2.3 of this document for details.
Characters that are allowed in a URI but do not have a reserved purpose are called unreserved. These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.
You should have no trouble (either in JuiceboxBuilder-Pro or on your web server) if your image filenames use only these web-safe characters.
With this in mind, try renaming your images to use only web-safe characters within their filenames to see if this helps.
Unfortunately, enableDirectLinks does not support multiple galleries embedded on a single web page and there is no way to distinguish between galleries with regard to direct linking.
However, this sounds like a prime candidate for the Feature Requests thread.
Please post any ideas you have for future versions over there where they will be seen by the developers.
I do not know what suggestions will be implemented but this is certainly the best place for all ideas.
Thank you.
Many thanks for the information.
Unfortunately, I'm still not entirely sure how I'd approach the problem myself.
It certainly isn't possible to dynamically remove images after a gallery has loaded.
You'd really need to catch the problem at the time the configuration data is generated or recreate fresh configuration data and reload the gallery.
If you go down the reload route (which might be preferable to having ghost images at the end of a gallery), you could perhaps hide the gallery container using CSS and show it only when everything is ready (after the first load if everything is OK or after the reload if necessary).
This is by no means ideal but it would at least look better to the site visitor.
I can then have the page check back in to validate how many images actually exist, but I don't do that when generating the 'XML' config to reduce loading time.
Have you tried this and timed it in a real-world example? Maybe the time taken would be acceptable (to produce a gallery which does not need to be reloaded).
If your server reports that 0 images are available, could you maybe create configuration data, one image at a time, checking each image's existence as you go (but only if 0 images are reported)?
Also, might you be able to store your configuration data in a variable and perform some string manipulation on it (to check and remove any SVG images) before feeding it to your configUrl?
I'm really just thinking aloud here.
I don't expect to come up with a great solution for you (your workflow is quite complex and I'm not sure I completely understand all the intricacies of it) but maybe my notes above will somehow help.
@tmd
Thank you for sharing your experiences.
A quick test of my own certainly supports your theory: Flickr-added autotags do not seem to be taken into consideration in API searches.
Here's a Flickr API forum discussion regarding autotags and the API (it's a little old but the information still seems to hold true today): https://www.flickr.com/groups/510356128 … 985879334/
... and here's a Stack Overflow forum thread (same topic; same conclusion): https://stackoverflow.com/questions/312 … h/32556404
Summary:
If you want to use the flickrTags configuration option in your Juicebox gallery, then make sure that you have added the tags yourself (and that you are not using autotags added by Flickr).
Even if the gallery's configuration file is generated dynamically (on-the-fly when the gallery is displayed), it will be complete (and cannot be changed) as soon as the gallery loads (and the API can only be used client-side after the gallery has loaded, i.e. after the gallery's configuration file has been generated server-side).
The only way to remove an image from a gallery that has already loaded would be to re-generate a new configuration file and then reload the gallery (using the new configuration file).
I can't quite wrap my head around exactly what you are doing (where the images are coming from and how you would determine if an image is valid or not) so, at the moment, I can't figure out how I might set about solving your problem.
It looks like you'd need to validate your images within the script that generates the gallery's configuration file (the file that stores the image data).
Maybe if you could explain exactly how your gallery's configuration file is generated (and how the problem arises), I might be able to help further. Thank you.
Set enableDirectLinks="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) and each image will have its own unique URL (the gallery page URL with a # followed by the image index number).
For example, to go directly to the 7th image in our Juicebox-Pro Full Browser Demo, use this URL:
https://juicebox.net/demos/pro/full/index.html#7
You'll notice that the # identifier changes in the browser's URL as you select different images within the gallery.
It sounds like you are batch processing images in Lightroom to add IPTC data (to add the same caption text to many images at once) and then using JuiceboxBuilder-Pro's IPTC extraction ('Images -> Captions -> Use IPTC Caption') to populate all image captions at once. (I hope I have that correct. It certainly sounds like the best course of action.)
I hope that the process of adding captions to your images as metadata does not take too long.
At least it has the benefit of always having the caption associated with the image and in the future, as long as you use programs that are capable of reading metadata, you will never have to manually type in the image's caption again!
thank you very much for Your assistance - great job..
You're welcome!
You may look now again on the link I've sent you - hope, you agree :-)
Yes, your caption size certainly looks good on my laptop screen (the only PC I have access to today).
Incidentally, as you are using image captions and not image titles, an alternative solution might have been to enter your caption text for the image titles (instead of the image captions) as Juicebox assigns a larger font-size for the image titles than it does for the image captions.
There's absolutely nothing wrong with the solution you have implemented (your gallery looks good) but I thought I should mention this as a potential alternative solution which does not require any custom coding.
(Of course, using custom CSS, as you currently do, gives you much greater control over the actual font-sizes being used.)
Unfortunately, there are no configuration options available 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.
I hope this helps.
Please let me know how you get on and if I can be of any further assistance.
Thank you.
Unfortunately, JuiceboxBuilder-Pro does not allow for a certain caption to be applied to a selected group of images.
As far as I am aware, the only application which allows batch captioning is Showkase.
Showkase is a PHP web application (installed on your web server rather than your computer) which allows you to create a complete portfolio web site (integrating multiple galleries) online.
Showkase has full support for Juicebox-Pro and the galleries can be created within the application itself in a web browser interface (or created with JuiceboxBuilder-Pro and imported).
Also, you might like to consider embedding your captions within your images as IPTC metadata.
That way, the caption text will become part of the image file itself and wherever the image goes, the caption goes too.
JuiceboxBuilder has the ability to extract the IPTC Document Title as the image title and the IPTC Description as the image caption (so image titles and captions can quickly be set without any manual entry) via the 'Images -> Titles -> Use IPTC Title' and 'Images -> Captions -> Use IPTC Caption' options from the drop-down menu at the top.
You can add IPTC data to images (multiple images at once) in imaging programs such as Adobe Photoshop and Lightroom.
I realise that this would be an extra step in your workflow (prior to using JuiceboxBuilder-Pro) but if every image has its own caption embedded within it, then all captions can be set quickly and easily in a single action.
I'm glad to hear that everything seems to be working as it should.
Thank you for letting me know. (Your step-by-step instructions suggest that you are, indeed, doing everything correctly and, just for the record, I see 93 images in your online gallery.)
I'll mark this thread as solved but please just post back if you run into any further problems.
Thank you.
Just to clarify, Juicebox-Lite (the free version) has an image limit of 50 images per gallery. Juicebox-Pro has no such image limit.
First of all, it looks like your screenshot is showing a gallery folder (named 'christ2019') rather than the template 'jbcore' folder that the Photoshop plugin uses to create galleries.
After a gallery is created by the plugin, there is no need to modify the gallery folder (no need to rename the Pro 'juicebox.js' file to '~juicebox.js' and place it inside the gallery folder).
As long as the plugin has been updated successfully to Juicebox-Pro, galleries created by the plugin will be Pro without any modification necessary.
Also, in your screenshot, I do not see the 'juicebox.php' and 'pswd.php' files (which are present in the Pro 'jbcore' folder but not in the Lite 'jbcore' folder) so it looks like the gallery folder shown in the screenshot is using Juicebox-Lite.
It looks like you'll need to go through the process of upgrading the plugin from Juicebox-Lite (which the plugin comes bundled with) to Juicebox-Pro.
The procedure is outlined on the plugin's support page here.
Here are detailed instructions.
(1) Unzip the Juicebox-Pro zip file (named 'juicebox_pro_1.5.1.zip').
(2) Navigate inside the extracted 'juicebox_pro_1.5.1/web/' folder.
(3) Copy the entire 'jbcore' folder in this location: 'juicebox_pro_1.5.1/web/jbcore'
(4) Paste the entire 'jbcore' folder inside the 'Presets/Scripts/Juicebox/' folder (in your Photoshop folder).
(5) Navigate inside the 'Presets/Scripts/Juicebox/jbcore/' folder and rename the 'juicebox.js' file to '~juicebox.js'.
Once the plugin has the Pro 'jbcore' folder in place, it can only create Pro galleries.
I also tried installing the standalone JuiceboxBuilder Pro. It also only limits me to 50 images for the gallery.
Please double-check that you are using JuiceboxBuilder-Pro rather than JuiceboxBuilder-Lite.
JuiceboxBuilder-Pro creates only Pro galleries (it cannot create Lite galleries) and JuiceboxBuilder-Lite creates only Lite galleries (it cannot create Pro galleries).
Check your JuiceboxBuilder version (Lite vs Pro) via the 'Help -> About...' option from the drop-down menu at the top.
You can quickly and easily check whether a gallery is Lite or Pro by looking for the Juicebox logo.
All Lite galleries have the Juicebox logo/link in the lower right corner. This branding is not present in any Pro galleries.
I hope my notes above help.
Please let me know how you get on and if I can be of any further assistance.
Thank you.
Edit:
Just in case your browser is caching and using any Lite files, be sure to completely clear your browser's cache before reloading your gallery's web page.
Yes, everything between (and including) the <noscript> ... </noscript> tags is the SEO Content Code.
(The Gallery Title (from the 'Customize -> Lite' section) is included between the <h1> ... </h1> tags.)
You can set a URL for the Back Button via the backButtonUrl configuration option (in JuiceboxBuilder-Pro's 'Customize -> Back Button' section).
The URL can be a relative path (relative to the web page containing the gallery's embedding code) or an absolute path (such as http://www.example.com/index.html).
Just set backButtonUrl="http://www.fobgfc.org/?page=gallery" and all should be well.
For reference a list of all Back Button configuration options can be found here.
The <img> tags in the embedding code are primarily for Search Engine Optimization (to help search engines index the gallery images so that they appear in search results).
They also have an added function in that, if JavaScript is disabled in the user's browser and the Juicebox gallery cannot be initiated, the gallery images will still be displayed (in a vertical list, one below another).
Please see the Search Engine Optimization support section for further details.
Incidentally, the SEO Content Code will be generated within the gallery's embedding code only when the 'Add SEO Content' checkbox is selected in JuiceboxBuilder-Pro's 'Customize -> Sharing' section (selected by default).
Many thanks for the details.
As I noted previously, the internal browser within Messenger is not a supported browser so if you share any links to Juicebox galleries within Messenger, it might be worth adding a note along with the link saying something like "For best results, please view in Safari or Chrome."
However, I am very grateful for the extra information that you have provided and I have passed it on to the developers.
Thank you for reporting this issue.
It most certainly did.
That's great! Thank you for letting me know.
Thank you, Steve.
You're welcome!
Please marked this thread solved.
Done!
(1) Enter your gallery's baseUrl embedding code into a 'Formatting -> Custom HTML' Gutenberg block.
(2) Upload your gallery folder to your root directory and use a leading slash in your embedding code paths to denote your root directory. This should work with any permalink structure. For example:
<!--START JUICEBOX EMBED-->
<script src="/gallery_folder/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: "/gallery_folder/",
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "600",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->I hope this helps.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.