I'm glad it turned out to be a relatively easy fix.
Thanks for all of your help!
You're welcome!
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
I'm glad it turned out to be a relatively easy fix.
Thanks for all of your help!
You're welcome!
I've done some further testing and it looks like if you remove the two blank lines at the top of your 'functions.php' file and the two blank lines at the bottom of it, everything should be fine.
The whitespace should no longer appear at the top of your HTML or dynamically-generated XML pages or before the Gallery Ids in the Juicebox shortcodes.
One thing *I* haven't happened to see, is that it's easy to make line breaks in the Title and/or Caption.
You can use HTML tags in image titles and captions so you can insert HTML line breaks ('<br>') to separate an image title or caption into different lines. For example:
Line #1<br>Line #2<br>Line #3
Please see this FAQ for details:
How do I add HTML formatting to image captions and titles?
If I've understood correctly, the settings in a Preset file end up in the config.xml file?
That is correct. Loading a 'Preset' is a quick and easy way to set a combination of different configuration options at once.
When you load a 'Preset' the configuration options listed in the preset file are applied to the gallery and when you save the gallery on the 'Publish' tab, all the configuration options currently set (including those applied to the gallery via the 'Preset') will be included in the gallery's 'config.xml' file.
As for this config.xml, is there any way to rename it/them?
It is not possible to rename the XML file from within JuiceboxBuilder-Pro.
You could certainly rename the 'config.xml' file after the gallery has been created and then use a configUrl configuration option within your gallery's embedding code to point towards the new filename.
For example:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
configUrl: 'custom.xml',
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
Please note that if you rename a gallery's XML file, the gallery will no longer be able to be opened by JuiceboxBuilder-Pro.
If you want an easy way to keep track of multiple galleries, then you could keep each gallery in its own separate folder (giving each gallery folder a unique name). This would avoid the need to rename any files within the gallery folders.
You could then upload the complete gallery folders (rather than just the contents) to your web server and embed the galleries in your web pages using the baseUrl method of embedding as documented here.
WP-Juicebox can be used only to embed Juicebox galleries directly into pages or posts.
It is not possible to use the plugin to embed galleries elsewhere (such as a header or sidebar widget).
Each WP-Juicebox gallery is associated with a specific page or post and it is not possible to manually insert a Juicebox shortcode somewhere which refers to a gallery associated with a different page or post.
However, you should be able to manually embed a Juicebox gallery anywhere (at least anywhere that you are able to insert the required embedding code) using the baseUrl method of embedding as documented here.
Essentially, once you have created a gallery with JuiceboxBuilder-Pro, you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code wherever you want the gallery to appear. 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, pointing towards the gallery folder) are correct.
It looks like your problems may be due to your custom theme introducing whitespace in certain places.
Your theme inserts whitespace before the Gallery Id in the Juicebox shortcode which results in the search for a valid shortcode failing (which, in turn, results in the 'juicebox.js' file not being loaded).
For example, a Juicebox shortcode should look like this:
[juicebox gallery_id="1"]
... but yours looks like this:
[juicebox gallery_id=" 1"]
... (note the space before the '1').
Also, your theme inserts four blank lines at the top of your gallery's XML file which appear before the XML declaration resulting in the following error (which may be the reason for the "Config XML file not found" message being displayed).
XML Parsing Error: XML or text declaration not at start of entity
WP-Juicebox cannot prevent against your theme adding whitespace.
(There are also four blank lines above the Doctype Declaration on your main page. These are likely to be coming from the same source.)
Check your theme's PHP files and make sure that there is no whitespace which might be output when the files are loaded. For example, you have blank lines at the top and bottom of your 'functions.php' file which are likely to be the cause of the XML file problem.
I'll try to clarify a couple of other issues from your post above.
On your FAQ there is a line saying "Make sure the config.xml file is in the gallery folder" but I don't see a gallery folder.
WP-Juicebox galleries dare not structured like regular galleries are.
There are no gallery folders for galleries created by WP-Juicebox. All WP-Juicebox galleries share a common 'jbcore' folder (in the 'wp-content/plugins/wp-juicebox/' directory), the images are stored in the Media Library and the XML files for WP-Juicebox galleries are created dynamically when the galleries are displayed.
Does Juicebox require jquery?
Juicebox itself comes with its own version of jQuery (bundled within the 'juicebox.js' JavaScript file) so there is no need to load a separate version of jQuery into your web page.
WP-Juicebox requires jQuery but it uses the version which comes bundled with WordPress, so again, there is no need to load a separate version of jQuery into your web page.
I just mention all this in case it helps anyone else new to the application but having similar difficulties.
Thank you for sharing your findings.
I hope your quest for an Adobe alternative to embed IPTC data proves to be successful.
WP-Juicebox loads the 'juicebox.js' file in the web page only if it is required (if a Juicebox shortcode is discovered on the page).
However, for some reason, the 'juicebox.js' file is not being loaded in your web page.
I do not know why this might be but you can ensure that the 'juicebox.js' file is loaded into all your web pages by opening the 'wp-juicebox.php' file in a plain text editor and changing line 31 from:
add_action('the_posts', array(&$this, 'shortcode_check'));
... to:
add_action('wp_enqueue_scripts', array(&$this, 'add_scripts_wp_core'));
Unfortunately, IPTC data entered using IrfanView does not seem to be picked up by JuiceboxBuilder-Pro.
If you enter your IPTC data using an Adobe program (such as Photoshop or Lightroom), then there should be no such problems.
For example, if you use Adobe Photoshop to enter your IPTC data, then use the IPTC Document Title field for the image title and the IPTC Description field for the image caption.
As far as I am aware, IrfanView does not write the IPTC data to an XMP block like Adobe applications do.
JuicboxBuilder-Pro, which runs on an Adobe platform (Adobe AIR), looks for IPTC data in an XMP block where other Adobe applications would write the data to.
I realise that not everyone has access to Adobe products but you might be able to find another free image editor which allows you to enter IPTC data in the same way that Adobe products do.
In fact, if you are a Windows user, you can just right-click an image, select 'Properties', go to the 'Details' tab and enter a 'Title' in the 'Description' section. This should be picked up by JuiceboxBuilder-Pro (in both the title and caption section) and might be suitable for your scenario.
When the browser window is resized, the thumbnails are redrawn (thumbnails may be added or removed from the current thumbnail page depending on the new size of the browser window) so you might need to wait a short while after the browser window is resized before removing the click handlers.
Introducing a short delay (such as 200ms) before running off('click') using window.setTimeout() should hopefully be a suitable workaround.
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container'
});
$(document).ready(function() {
jb.onInitComplete = function() {
$('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
};
jb.onThumbPageChange = function() {
$('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
};
$(window).resize(function() {
window.setTimeout(function() {
$('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
}, 200);
});
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
Thank you for letting me know of this issue.
It looks like a bug which affects only some browsers (it does not seem to affect Firefox 37.0.1) and only when the page is loaded in a browser window where the bottom of the gallery is hidden (and needs to be vertically scrolled to be seen).
Unfortunately, I do not have a fix or know of a workaround at the moment but I have logged a bug report with the developers who will investigate further and hopefully fix it in the next version.
Thank you, once again, for reporting this problem.
You need to give your 'juicebox' object a variable name (such as 'jb' in my example above) so that it can be referenced by the API methods.
In your own web page's embedding code, change:
new juicebox({
... to:
var jb = new juicebox({
The second code example in your post above probably fails because you are trying to remove the click handlers at a time when the .jb-idx-thumb and .jb-idx-thb-frame classes do not yet exist on the page. The code needs to be put inside the onInitComplete() function (to ensure that the .jb-idx-thumb and .jb-idx-thb-frame classes are present before off('click') is applied to them).
I'm glad you've got it working.
As you noticed, the embedding code on JuiceboxBuilder-Pro's does not include a baseUrl. (JuiceboxBuilder-Pro has no knowledge of where you might upload the gallery folder to on your web server and the 'index.html' page generated by JuiceboxBuilder-Pro does not need a baseUrl to work as all the gallery files are in the same folder as the HTML page.)
I'm glad that you found the example in the baseUrl support section.
Your embedding code is fine. However, there is one minor point. Your embedding code uses two types of path:
/wp-content/uploads/juicebox/test_13/jbcore/juicebox.js
wp-content/uploads/juicebox/test_13/
The leading slash in /wp-content means that the path is relative to your root directory whereas wp-content (without the leading slash) is relative to the HTML page containing the embedding code.
This works OK in your case as /wp-content and wp-content both resolve to the same location but for consistency (and no other reason), you might want to use the same notation for both paths. (It does not matter which one you choose. They are both equally valid and will both work equally well.)
Unfortunately, there is no direct download functionality within Juicebox-Pro.
The best way to download an image currently is to click the 'Open Image' button (to open the image in a browser tab of its own) and then right-click 'Save Image As...'.
Please see this forum post for more information on direct downloading images.
There is also no zooming functionality within Juicebox-Pro.
If you would like to make any suggestions for future versions, please post them in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers. Thank you.
The only folder you need to upload to use WP-Juicebox is the plugin folder itself ('wp-juicebox') to the '/wp-content/plugins/' directory.
The '/wp-content/uploads/juicebox/' directory is used internally by the plugin to store files created by the plugin itself.
It is not possible to manually upload files to this directory and have the plugin find them and somehow use them.
The plugin creates its own galleries (from within the WordPress interface) and cannot display galleries which have already been created (for example by JuiceboxBuilder-Pro).
For reference, instructions for using WP-Juicebox can be found here.
If you want to embed a gallery which you have created with JuiceboxBuilder-Pro into a WordPress page or post, then you could use the baseUrl method as documented here.
Essentially, once you have created a gallery with JuiceboxBuilder-Pro, you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into the body of your WordPress post (ensuring that the method of entry is 'Text' rather than 'Visual'). 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, pointing towards the gallery folder) are correct.
If you choose to use the baseUrl method, then there is no need to use WP-Juicebox and you should deactivate the plugin to avoid loading the 'juicebox.js' file into your web page twice.
I hope this helps to clarify things.
You're welcome.
Set showSmallBackButton="TRUE" in JuiceboxBuilder-Pro's 'Customize -> Back Button' section and the Back Button should then display in Small Screen Mode.
The click handlers are generated dynamically by the 'juicebox.js' JavaScript file.
Try something like the following:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container'
});
$(document).ready(function() {
jb.onInitComplete = function() {
$('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
};
jb.onThumbPageChange = function() {
$('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
};
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
Hopefully this will point you in the right direction.
Please note that my suggestion above uses jQuery. Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if your web page uses any jQuery code at all, I would recommend including a separate jQuery JavaScript file (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).
I try to embed the Juicebox video code using the <> button on Squarespace, and is says "Invalid Video".
A Juicebox gallery is not a video but a collection of individual images and resource files (such as CSS, JavaScript and font files).
You can embed a Juicebox gallery in a web page following the embedding instructions here.
As Squarespace is not a regular web host (where you can upload Juicebox gallery files to the web space that they provide via FTP), you may need to host your gallery elsewhere (such as Google Drive) and load your gallery into your Squarespace web page using an iframe. Instructions on how to achieve this can be found in the Embedding in a Web Template Site support section.
As far as I am aware, there are no plans to release a new major version (ie. Juicebox v2.0) any time soon.
The next release is likely to be v1.4.4 - a free upgrade for all Juicebox-Pro v1.x users.
No news of a workaround or fix yet but the issue has been logged as a bug and it will certainly be investigated fully.
I will update this thread with any news I have (but, unfortunately, I do not know when this might be).
You're welcome!
You're welcome!
The error message is displayed because an XML file corresponding to the requested Gallery Id cannot be found (and it certainly looks like it does not exist in the case of your sample web page showing Gallery Id 11). If it has not been deleted, then perhaps there was a problem with the XML file being created in the first place (although if this was true, I would have expected an error during the creation process rather than just when the gallery is displayed).
Please double-check the permissions on your '/wp-content/uploads/juicebox/' directory (where the gallery XML files are stored) to ensure that they are not too restrictive. Default permissions of 755 should be fine.
It looks like there may only be 5 WP-Galleries on your web site (with IDs 1 to 5).
Have you deleted any galleries at any time? (This would account for a gap in the ID numbering but ordinarily should not cause any problems).
Also, how many galleries are listed on the 'Manage Galleries' page and what IDs do they have?
OK. Thanks for trying.
I'll certainly update this thread when I have any news on this issue.
setting 50% height might work at full screen, but not at a tablet size
Your sample gallery is not a fully formed web page. There is no Doctype Declaration, <head> or <body> tags.
After creating your gallery with JuiceboxBuilder-Pro, try using or modifying the gallery's 'index.html' page rather than uploading an HTML file with just the gallery's embedding code. The gallery's embedding code really needs to be within a complete and valid HTML web page, otherwise Juicebox may not be able to determine its actual height (if a percentage height is used) and different browsers may treat the isolated HTML snippet differently. A complete and valid web page should provide more predictable and consistent results across different browsers.
Also, your 'juicebox-container' <div> is nested inside a parent 'container' <div> which has not been assigned a height via CSS. If your gallery's height is defined as 100% (for example), then it will be 100% of the height of the parent container. Try explicitly assigning a height to the parent container via CSS. Please also see the note regarding Using Percentage Heights in the Embedding in a HTML Page support section.
How can I keep the container to the same height as the photo?
If all your images are the same height and you just want your gallery to be taller, then set your gallery's height to be a large fixed pixel value (rather than a percentage).
If you really want to gallery's height to change depending on the height of the image which is currently being displayed, then you will need to use JavaScript to check the image's height (each time a new image is displayed) and adjust the height of the gallery accordingly. You would need to use the Juicebox-Pro API's onImageChange() event and setGallerySize() method.
(Usually, each time a new image is displayed, the gallery's dimensions remain constant and the new image is scaled to fit within the gallery's image area.)
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.