No problem!
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
No problem!
Unfortunately, there is no method in the Picasa Web Albums Data API to request images in a specific sort order.
According to the Picasa Web Albums Data API developer's guide:
Note: The entries in a feed are ordered based upon the display order on the web site.
It certainly seems strange that the API (which WP-Juicebox uses to fetch the images) does not return images in the same order as seen on your Google web page but WP-Juicebox just displays the images in the order in which they are returned.
If you want to re-order the images, you'd need to fetch the images first (in the order in which they are returned by Google) and then sort the array of images manually afterwards by whatever criterion you'd like to use. For example, you could order the images by id, published date, updated date, title, summary or filename (all of which are returned as part of the image data and are available to work with).
First of all, you'd need to add functions to WP-Juicebox so that the images could be ordered using each of the available criteria.
You'd then need to instruct WP-Juicebox to use one of these methods after fetching the images.
Open the WP-Juicebox plugin's 'wp-juicebox.php' file in a plain text editor, scroll down to line 1344 and replace:
/**
* Get attachments Picasa
*
* @param string Picasa user id
* @param string Picasa album name
* @return array attachments
*/
function get_attachments_picasa($picasa_user_id, $picasa_album_name) {
$attachments = array();
$name = $this->remove_whitespace($picasa_album_name);
$term = preg_match('/^[0-9]{19}$/', $name) ? 'albumid' : 'album';
$picasa_feed = 'http://picasaweb.google.com/data/feed/api/user/' . $this->remove_whitespace($picasa_user_id) . '/' . $term . '/' . $name . '?kind=photo&imgmax=1600';
$entries = @simplexml_load_file($picasa_feed);
if ($entries) {
foreach ($entries->entry as $entry) {
$attachments[] = $entry;
}
}
return $attachments;
}... with:
/**
* Get attachments Picasa
*
* @param string Picasa user id
* @param string Picasa album name
* @return array attachments
*/
function get_attachments_picasa($picasa_user_id, $picasa_album_name) {
$attachments = array();
$name = $this->remove_whitespace($picasa_album_name);
$term = preg_match('/^[0-9]{19}$/', $name) ? 'albumid' : 'album';
$picasa_feed = 'http://picasaweb.google.com/data/feed/api/user/' . $this->remove_whitespace($picasa_user_id) . '/' . $term . '/' . $name . '?kind=photo&imgmax=1600';
$entries = @simplexml_load_file($picasa_feed);
if ($entries) {
foreach ($entries->entry as $entry) {
$attachments[] = $entry;
}
}
usort($attachments, array(&$this, 'sort_picasa_xxxxxxxxx'));
return $attachments;
}
/**
* Sort Picasa id
*
* @param string image
* @param string image
* @return integer image
*/
function sort_picasa_id($a, $b) {
$a_id = intval(basename($a->id));
$b_id = intval(basename($b->id));
if ($a_id === $b_id) {
return 0;
}
return $a_id < $b_id ? -1 : 1;
}
/**
* Sort Picasa published
*
* @param string image
* @param string image
* @return integer image
*/
function sort_picasa_published($a, $b) {
$a_published = intval(strtotime($a->published));
$b_published = intval(strtotime($b->published));
if ($a_published === $b_published) {
return 0;
}
return $a_published < $b_published ? -1 : 1;
}
/**
* Sort Picasa updated
*
* @param string image
* @param string image
* @return integer image
*/
function sort_picasa_updated($a, $b) {
$a_updated = intval(strtotime($a->updated));
$b_updated = intval(strtotime($b->updated));
if ($a_updated === $b_updated) {
return 0;
}
return $a_updated < $b_updated ? -1 : 1;
}
/**
* Sort Picasa filename
*
* @param string image
* @param string image
* @return integer image
*/
function sort_picasa_filename($a, $b) {
$a_filename = basename($a->content->attributes()->src);
$b_filename = basename($b->content->attributes()->src);
return strnatcasecmp($a_filename, $b_filename);
}
/**
* Sort Picasa title
*
* @param string image
* @param string image
* @return integer image
*/
function sort_picasa_title($a, $b) {
$a_title = strval($a->title);
$b_title = strval($b->title);
return strnatcasecmp($a_title, $b_title);
}
/**
* Sort Picasa summary
*
* @param string image
* @param string image
* @return integer image
*/
function sort_picasa_summary($a, $b) {
$a_summary = strval($a->summary);
$b_summary = strval($b->summary);
return strnatcasecmp($a_summary, $b_summary);
}Then, all you'd need to do is replace sort_picasa_xxxxxxxxx in the code above with the name of the function you'd like to use to order your images, e.g. sort_picasa_filename.
I hope this helps.
Please note that the line number above refers to the current version of WP-Juicebox (v1.5.0.1).
Thanks for your helpful reply.
You're welcome.
After publishing an album to my desktop from Pro, I only had to upload and replace the config file and the jbcore folder on the website and leave the rest generated by the lite version.
If you are just upgrading a gallery from Lite to Pro (and not changing any of the images), then you can certainly just replace the gallery's 'config.xml' file and 'jbcore' folder. There is no need to re-upload any of the images. However, you could perhaps instruct your FTP program to upload only new or modified files and you could then give your FTP program the entire gallery folder and only the 'config.xml' file and 'jbcore' folder would be uploaded (to save you from having to pick them out individually).
It was also time saving to have the settings saved, so I just could reload them to do the upgrade from lite to Pro. Any comment on this?
You can save a custom combination of configuration options as a 'Preset' file ('Presets -> Save Preset...' from the drop down menu at the top).
When you next edit or create a gallery, you can apply this 'Preset' file to your gallery (to set all your custom configuration options at once and save you from having to set them all individually) via 'Presets -> Load Preset...'.
You can have as many 'Preset' files as you like (each holding different configuration option values).
Please see the 'Presets' section of the JuiceboxBuilder-Pro User Guide for more information.
When you create a new album from scratch and copy all the pictures to Juicebox and start entering the captions, is there a way to delete a picture, without reloading all the pictures again, minus the one you want to delete?
You can delete an image by selecting its thumbnail with a single left-click (on the 'Images' tab) and then hitting Ctrl+D or going to 'Images -> Delete' from the drop-down menu at the top.
(You can also Shift-Click a block of images or Ctrl-Click a selection of images to delete.)
You're welcome!
I'm really glad to hear that you've got it working.
Many thanks for posting back with the update to let me know. It's most appreciated.
I assumed it was maybe a setting in Jukebox such as gallery padding or something like that.
The gallery cannot be positioned on your web page using controls within the gallery itself. The position of the gallery is dependent on where you place the gallery's container within your page's code (in relation to all other containers on your page) and what CSS positioning rules have been applied to the elements on your page.
It's now the horizontal...
The suggestion in my post above should solve this problem.
When you originally entered your gallery's embedding code into your web page, you entered the line:
<div id="juicebox-container">Change this manually to:
<div id="juicebox-container" style="margin-left: -250px;">... and your gallery should shift over to the left (by 250px) to where you want it to be.
Alternatively, add the following to the foot of your 'style.css' file (it will do the same thing: shift your gallery over to the left by 250px).
#juicebox-container {
margin-left: -250px;
}I do not like the way Juicebox loads images with an XML file. What is the advantage? Why did you decide to do it like that?
This was a design choice made by the developers. I cannot tell you why this choice was made (I have no greater insight into the original design of Juicebox than yourself) but image data needs to be stored somewhere and keeping it in an external file means that gallery images can easily be changed without the need to modify the gallery's embedding page. If image data were stored in the gallery's embedding page, then it would likely require more work to update a gallery.
We have like 500 tours, each tour has its own gallery and its own url. This means that I have to create an XML file for each tour?
Each gallery needs to have its own external configuration file (usually a 'config.xml' file).
Can the xml files have a different names?
Yes. You can use whatever filenames you like for the configuration files (and have them located wherever you like on your web server). You can point towards a specific configuration file using the configUrl option in your gallery's embedding code. A short description of configUrl can be found in the Embed Options section of the Config Options page.
For example:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
configUrl: "xml_files/custom_0001.xml",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->If you are building the configuration file dynamically, then you could perhaps use just a single PHP file as a template to generate the gallery's configuration file and point towards different data sources via information in a query string.
For example:
configUrl: "config.php?image_set=1234",Incidentally, since v1.5.0, Juicebox supports configuration data in JSON format as well as XML format (as noted in the Version History and in this blog entry).
A sample JSON configuration file (showing the required format) can be found in this forum post.
You would then use a configUrl such as:
configUrl: "config.json",... or use a PHP script to generate JSON output.
Thank you for posting the URL to your gallery's web page.
It's always easier to troubleshoot a problem when I can see the gallery for myself.
A <div> is just a generic container for content on a web page. (Please see here for more technical details if you like.)
A <div> can be thought of as being just a rectangular block of content on a web page (the content might be text, an image or, in your case, a Juicebox gallery). The gallery container (a <div>) is really just a rectangle on your web page which just needs to be sized and positioned correctly. (It might help to think of the gallery like this instead of the complex image viewer that it is.)
It looks like you're making progress.
However, your gallery's <div> is nested inside another <div> (<div id="body">) which has been assigned CSS in your 'style.css' file as follows:
#body {
float: left;
position: relative;
width: 279px;
margin-top: 216px;
margin-left: -588px;
z-index: 21;
min-height: 872px;
}It's difficult to explain what's going on without referring to the code that is making it all happen but, essentially, the container that the gallery's container is inside has been given a very small width (279px) and all content within this parent container has been told to start very close to the centre of what looks like the 'body content' area of your page (which is why there is currently a lot of blank space to the left of your gallery).
There's a lot of CSS in your 'style.css' file and it might be difficult to try to figure out exactly why each container on your web page has been given the widths and margins that they have (especially as the page layout has been created by a program rather than a human being).
It might be enough to just shift your gallery over to the left (by about 250px) using a negative margin.
Your page already makes extensive use of margins (there are 61 different 'margin' entries in your 'style.css' file which is why trying to figure out where everything should be just by looking at the code is not easy) so adding another margin for the gallery's <div> might be a suitable solution.
In your gallery's embedding code, try changing the line:
<div id="juicebox-container">... to:
<div id="juicebox-container" style="margin-left: -250px;">The alternative would be to adjust the #body <div>'s CSS to accommodate the gallery and this would require knowledge of CSS and a better understanding of the layout of your web page (or, at the very least, some trial and error).
Even if you don't follow everything in this post, just try making the change to the <div id="juicebox-container"> line and hopefully your gallery will appear in the correct position on your web page.
I hope this helps.
A Juicebox gallery is essentially just a <div> container, and it will appear on your web page at the dimensions you give (via the galleryWidth and galleryHeight options in the embedding code) and wherever you put the <div id="juicebox-container"></div> in your web page's code.
It sounds like you might be trying to embed a gallery into a page with a complex layout and the gallery dimensions you are currently using might not be suitable for your page layout.
If you are not already doing so, try using a galleryWidth of 100% (so that the gallery fills its parent container's width) and a fixed galleryHeight such as 600px. (When using a percentage height, you would need to make sure that the gallery's parent container has a height set via CSS, otherwise Juicebox may not be able to determine what its actual height should be a percentage of.)
If this does not help, then please post back with the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further. (It sounds like you may need to either move your <div id="juicebox-container"></div> container to a different location in your web page or change your gallery's dimensions.)
Well you can't include the Juicebox created "index.html" file due to the existing "index.html" file that's already a part of your page, correct?
If you already have a file named 'index.html', then you'll need to take care not to overwrite it with the gallery's own 'index.html' file.
There are 3 options:
(1) Rename the gallery's 'index.html' file before you upload it to your web server (to ensure there are no duplicate filename collisions).
(2) Delete the gallery's 'index.html' file. This file is required only if you want to display the gallery on a web page of its own. If you are embedding your gallery into an existing web page alongside other content, then the gallery's own 'index.html' file is redundant and can safely be deleted.
(3) Use the baseUrl method of embedding documented here. This allows you to upload the entire gallery folder (not just the contents) to your web server so there will be no chance that the gallery's 'index.html' file will overwrite any similarly named files that already exist on your server.
Juicebox is beautiful but I do not understand how it loads images.
Ordinarily, a Juicebox gallery contains a 'config.xml' file which lists the images to display. Each image has its own <image> tag in the XML file and imageURL and thumbURL attributes point towards the images and thumbnails respectively.
When you create a gallery with JuiceboxBuilder, you would add images to a gallery (on JuiceboxBuilder's 'Images' tab). The images and thumbnails are included in the gallery folder and JuiceboxBuilder generates the correct paths for the imageURL and thumbURL attributes.
You can download Juicebox-Lite from the Download Page.
Extract the 'juicebox_lite_1.5.0.zip' file and take a look at 'config.xml' file for the sample 'web' gallery ('juicebox_lite_1.5.0/web/config.xml') in a plain text editor to see what a gallery's XML configuration file looks like.
We need to dinamically get the images for the gallery; is this possible with Juicebox?
Yes. This is certainly possible. Please see this FAQ:
Can Juicebox handle a custom data source, for example RSS or Instagram?
I do not know where your images are stored but you may need to write a script (using a server-side scripting language such as PHP) to fetch the paths to your images and dynamically build a gallery's 'config.xml' file.
Please see this forum post for an example which uses a PHP script to display all images from a designated folder (scroll down to the answer to Query #3).
Dynamically generating a 'config.xml' file will work for both Juicebox-Lite and Juicebox-Pro so you can try things out with Juicebox-Lite before purchasing Juicebox-Pro.
I hope this points you in the right direction.
Juicebox is a responsive gallery?
Yes. Please see this forum post which details how to ensure that your Juicebox gallery is responsive.
Also, check out this demo full page responsive Juicebox gallery.
1.
How can I see when the "Publish" transfer has completed?
If you have a lot of images it can take a while and you never know if you are interrupting the process if you make the wrong guess as to when it has completed.
There is no progress bar when saving a gallery on the 'Publish' tab but the process should not take long at all.
The procedure that takes the longest time to complete is the resizing of the images and this is done when the images are added to the gallery on the 'Images' tab. (There is a progress bar for this, letting you know how many images have been processed and how many there are in total.) All that remains when the 'Save' button is clicked is to write the 'config.xml' file, add the custom embedding code to the 'index.html' file and move the resized images (and copy the 'jbcore' folder) to the specified folder.
You can always click the 'View in Browser' checkbox on the 'Publish' tab and JuiceboxBuilder-Pro will display the gallery (from the gallery folder) when the gallery is ready.
2.
I had a hard time to get the BACK Button to work to get it to take me back to my albumlist. I found that instead of entering the albumlist I had to enter the folder it was located in. However to get it to work I had to edit the config file and remove the URL after the backButton, so it looks like: backButton="2017.htm". I tried to make this change part of the settings file but no luck. Any idea how this can be done so I do not have to edit the config file for each album?
You can set the backButtonURL in JuiceboxBuilder-Pro's 'Customize -> Back Button' section.
The backButtonURL can be an absolute path, e.g. backButtonUrl="http://www.example.com/index.html"
... or a relative path, e.g. backButtonURL="index.html".
If using a relative path, the path will be relative to the web page containing the gallery's embedding code.
There is no configuration option named 'backButton' so if you manually edit backButtonUrl to remove the 'Url' part at the end, you will essentially have no backButtonUrl set and Juicebox-Pro will use the default behavior for backButtonUrl of going back one page in the browser's history.
This may be a repeat but I am lost as to where to add a new post!
If you want to create a new topic, select the forum you want to post in ('Juicebox-Pro Support' or 'Juicebox-Lite Support') and click the 'Post new topic' link just above the second blue menu bar at the right hand side of the page (see screenshot attached).
It sounds like you might be having trouble with WP-Juicebox (the Juicebox plugin for WordPress) and the Visual Composer plugin for WordPress but I can't be sure.
Could you please confirm if this is the case and also explain in detail what the problem is? Thank you.
Is the problem with the creation and/or management of galleries in the WordPress Dashboard or with the visual presentation of the galleries in the front-end of your site?
(Please note that WP-Juicebox does not work in conjunction with any other plugins. It is a standalone plugin which can be used to create a Juicebox gallery in a WordPress page or post. The embedding code is handled internally by the plugin.)
If the problem is with the gallery display, then please check your gallery's web page (using your browser's developer tools) to see if there is any custom CSS which might be interfering with the gallery.
Many WordPress plugins and themes use global CSS rules which might, for example, be applied to all <img> or <div> tags on a web page. If this is the case, then your Juicebox gallery may be inheriting these CSS rules and they may be affecting your gallery's layout or functionality.
Please also check these FAQs to see if any of them describe the problem you are facing and offer a solution.
If you are not using WP-Juicebox but are just trying to embed a Juicebox gallery into a WordPress page manually, then be sure to enter your gallery's embedding code as raw HTML (rather than plain text). Using the regular WordPress editor, you would enter the embedding code in 'Text' mode rather than 'Visual' mode.
I would recommend using the baseUrl method of embedding as documented here.
You can upload your gallery folder to anywhere on your web server as long as the two paths within the baseUrl embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.
If you continue to experience difficulties, then please post back with the URL to your gallery's web page (if the problem is in the front-end of your site) so that I can take a look at the problem for myself and hopefully help further.
If the problem is in the admin section of your site, then please describe what the problem is and provide a screenshot, if possible, so that I can see what you are seeing.
Hopefully my notes above will help.
You're welcome!
It is not possible to save new default values for configuration options in JuiceboxBuilder-Pro but you can save a custom combination of configuration options as a 'Preset' file ('Presets -> Save Preset...' from the drop down menu at the top).
When you next edit or create a gallery, you can apply this 'Preset' file to your gallery (to set all your custom configuration options at once and save you from having to set them all individually) via 'Presets -> Load Preset...'.
You can have as many 'Preset' files as you like (each holding different configuration option values).
Please see the 'Presets' section of the JuiceboxBuilder-Pro User Guide for more information.
(You can save new default values only for image sizes. On the 'Images' tab, you can click the 'Change Sizes...' button in the 'Image Size' control panel to set image dimensions and, if you click 'Save Defaults', then the current values will become default values for new galleries.)
You're welcome.
Is the plugin available on the wordpress plugins repository ?
No. WP-Juicebox is hosted only on our own web site. You can download the plugin from its support page here.
Instructions for installing and using the plugin can be found on the same page.
And is it compatible with the wordpress version 4.7.3. ?
Yes. The pugin's 'readme.txt' file has a 'Tested up to: 4.7.2' tag but this is only because 4.7.2 was the most recent version of WordPress when the current version of the plugin was released. The plugin has been tested with (and is compatible with) WordPress 4.7.3.
Problem resolved via email.
Issue was due to incorrect post id in gallery configuration file.
Solution was to edit the post containing the gallery and click 'Update'.
1
How can I upgrade the galleries I have created with the Lite version, without having to retype all the Captions?
Can I open the lite version galleries in the Pro version and maintain the captions but be able to change the location to below image from overlay? and also add the Back button feature.
You can upgrade a Lite gallery to Pro by either of the following methods:
(1) Open the Lite gallery in JuiceboxBuilder-Pro(click the 'Open Gallery...' button on the 'Start' tab and select the gallery folder) and re-save it on the 'Publish' tab.
... or:
(2) Replace your Lite gallery's 'jbcore' folder with the Pro version from the Juicebox-Pro download zip file ('juicebox_pro_1.5.1/web/jbcore').
All image titles and captions will be preserved using either of the methods above.
If you open your Lite gallery with JuiceboxBuilder-Pro, you can change any of the configuration options (such as the Back Button options) on the 'Customization' tab before re-saving your gallery.
2
Where in the Pro version can I get rid of the button: Open Image in new window?
Deselect the Show Open Button checkbox in JuiceboxBuilder-Pro's 'Customize -> Lite' section.
3
The embedded Code, I have never used and I wonder why it is working with out it and what the benefits are from using it?
I am not sure where I would insert it if I had to use it?
You would use the embedding code to insert your gallery into an existing web page alongside other content.
All galleries need to be embedded into a web page. The 'index.html' files created by JuiceboxBuilder use the embedding code to embed the galleries into web pages of their own (with no other content on the web pages). If you open one of your gallery's 'index.html' pages in a plain text editor, you'll see the embedding code there.
4.
Any way to retain the custom settings for the next gallery I will be creating. It seams to go back to the default settings if I close Juicebox and re-open it? Could it maintain the last settings used?
You can save a combination of configuration options as a 'Preset' ('Presets -> Save Preset...' from the drop down menu at the top). You can then load this preset (to set all your custom configuration options at once and save you from having to set them all individually) via 'Presets -> Load Preset...'.
Please see the 'Presets' section of the JuiceboxBuilder-Pro User Guide for more information.
I'm glad you've got it working.
Thank you for letting me know.
The 'juicebox.js' file must be loaded on its own from within the gallery's 'jbcore' folder. Juicebox looks for a separate <script> tag on the embedding page loading the 'juicebox.js' file in order to determine the location of the 'jbcore' folder (in turn, to load other resource files from within the 'jbcore' folder).
It is not possible to combine the code from the 'juicebox.js' file along with other JavaScript files in one larger combined file. (It sounds like this is what 'Combine Js Plus' does.) As you have discovered, this will break Juicebox galleries.
1. Can I also change the caption font, size and bold beside the location?
Yes. The gallery font face can be changed via the galleryFontFace configuration option (Pro only). A short description of this option can be found in the General section of the Config Options page.
To change font sizes (and to use other styling such as bold), you can use HTML formatting in individual captions or CSS (to change the font size of all captions globally). Please see this forum post for details.
2. Can I delete any of the buttons on the top right side of the page. f.inst. I would not want the email button and others?
Yes. You can choose which buttons you'd like to display on your gallery's Button Bar. Each button can be displayed (or hidden) individually. Please see the Button Bar section for details.
3. If the caption is below the image, will it still show in full screen mode? The caption is often hard to read if it is located on top of the image.
Yes. Captions are still displayed in fullscreen mode. (Juicebox-Pro uses the same captionPosition value for both normal and fullscreen modes.) Try viewing this demo gallery and clinking the expand button to go fullscreen and you'll still see the captions.
4. Does the music in the demo come included with the Pro version?
No.
5 Can you also replace the music with any other?
Yes. You can choose whatever audio track you like (subject to copyright). Please see the Adding Audio support section for details.
For reference, a list of all configuration options can be found here and the home page for our online support is here.
When using Fotomoto in conjunction with Juicebox-Pro, all that is done at Juicebox-Pro's end is to include your fotomotoStoreId as a configuration option. Everything else is handled at Fotomoto's end.
I've found this quote from a Fotomoto help page (dated 2 October 2012) but it looks like the alternative payment methods have not yet been implemented.
For now, we will be offering PayPal and Stripe as payment methods, but over time we will offer more payment methods (Amazon Payments, Google Checkout, and possibly others such as Moneybookers).
Maybe you could contact Fotomoto to see if or when these alternatives might be available.
In the meantime, it looks like you might need to work with what Fotomoto has to offer or perhaps use an alternative e-commerce solution.
Juicebox-Pro provides the ability to link each image in a gallery to a unique purchase URL (which is opened when the Shopping Cart icon is clicked). Please see the Using Custom Purchase URLs support section for details.
You're welcome.
You're welcome!
I'm glad to hear that clearing your browser cache has helped.
Thank you for letting me know.
Unfortunately, it is not possible to change the Email Button's body text. The text is buried deep within the 'juicebox.js' file which is obfuscated and cannot be modified.
We plan to make it possible for users to translate "Regarding image" and "in gallery" (via the languageList configuration option) in the next version of Juicebox-Pro but, as far as I am aware, there are no plans to allow the entire text to be substituted.
The best I can suggest at the moment is that you either:
(1) Suggest your idea (to be able to replace the Email Button's body text) for a future version in the Feature Requests forum thread. This keeps all the ideas together and ensures that they are not overlooked by the developers.
... or:
(2) Override the Email Button and create your own 'mailto' link (with your own custom body text) as suggested in this forum post. (Please note that modifications such as this which override Juicebox's own built-in functionality are not officially supported and while you are free to try them, you might find that you encounter unforeseen knock-on problems which might need to be tackled along the way.)
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.