You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Please see these forum threads which deal with how to add new images to a gallery by just uploading them to a designated folder (and without having to modify any gallery files).
http://juicebox.net/forum/viewtopic.php?id=91
http://juicebox.net/forum/viewtopic.php?id=1811
My answer to Query #3 here is probably what you are looking for: http://juicebox.net/forum/viewtopic.php?pid=383#p383
Try manually setting the permissions of the '/wp-content/uploads/juicebox/' folder to 755. That should hopefully work as those are the permissions that WP-Juicebox tries to automatically set and if the plugin sees that the permissions are already 755, it should skip onto the next check.
I'm glad you've got it working.
Thank you for posting back to let me know.
... there is no config.xml file included in the export.
There should always be a 'config.xml' file in every gallery generated by the Lightroom plugin.
If your gallery folder does not contain a 'config.xml' file, then something is wrong (and the gallery will not be able to be displayed in a browser or opened in JuiceboxBuilder-Pro). Try reinstalling the plugin from scratch to ensure that all core files are present and correct. Also, check that you are not exporting your gallery to a folder with read-only permissions.
I deduce that if I want a responsive gallery then I should create it manually in JuiceboxBuilder-Pro, correct?
The Lightroom plugin creates a gallery very similar to JuiceboxBuilder-Pro (with no functional differences with regard to responsiveness).
With both applications, you can select the gallery size (Gallery Width and Gallery Height) and the 'index.html' page generated will contain the gallery on its own at the specified dimensions with no other content on the page.
Gallery dimensions can be percentages (of the gallery's parent container) or fixed pixel values. The default gallery size for both the Lightroom plugin and JuiceboxBuilder-Pro is 100% x 100%.
If you use percentages, then the gallery's parent container in the 'index.html' page generated by the Lightroom plugin and JuiceboxBuilder-Pro is the <body> tag (the entire browser window).
For more information on how to make a gallery responsive, please see this forum post.
@chrisw
Many thanks for sharing your code!
That's good to hear.
Thanks for posting back to let me know.
(1) No. All gallery files must be on the same domain (or subdomain) as the document containing the gallery's JavaScript embedding code due to the same-origin policy. The only way around this would be to implement a Cross-Origin Resource Sharing (CORS) solution by adding the following line of code to the .htaccess file in the root directory of the domain which hosts the 'jbcore' folder.
Header add Access-Control-Allow-Origin "*"It would be much easier to just keep all gallery files on the same domain.
(2) Juicebox uses a <h3> tag for the Splash Title and your custom CSS styles all <h3> tags within the #sidebar container (which is where your gallery is), overriding the gallery's own CSS. It is not possible to isolate an element on a web page to prevent it from inheriting global CSS rules and the best solution might be to use more specific CSS selectors so that the rules are applied to only those elements that require them. However, this might be difficult to do in a WordPress environment. Perhaps the easiest solution would be to open the 'jbcore/classic/theme.css' file in a plain text editor and add the following two lines to the .jb-splash-info h3 section (lines 607-615). The line numbers refer to the current version of Juicebox-Pro (v1.4.3.2).
background-color: transparent !important;
border-style: none !important;(3) You could have a link in a gallery (in an image title or caption, for example) which would link to another gallery's web page but it is not possible to have a gallery within a gallery.
You could switch between different galleries in a single container (an online example can be found here) but this might be difficult to achieve in a WordPress environment.
I notice that you have taken the 'juicebox.js' file outside the 'jbcore' folder.
Juicebox needs all the files within the 'jbcore' folder to work correctly (and no files within the 'jbcore' folder should be renamed or moved).
Upload the complete 'jbcore' folder to your web server and load the 'juicebox.js' file from inside the 'jbcore' folder.
This should hopefully solve your problem.
Please check that you are using the latest version of Juicebox-Pro (v1.4.3).
If necessary, upgrading instructions can be found here.
Also, please make sure that you are using a wi-fi connection rather than 3G/4G. If you are using 3G/4G, then please see this FAQ for a solution: Why can't I view my gallery on a 3G mobile connection?
If you continue to experience difficulties, then please post the URL to your gallery (so that I can take a look at the problem for myself) and let me know what mobile device and browser (and version numbers) you are using.
Thank you.
No problem!
You're welcome!
I'm glad I was able to help and that you can use my suggested workaround.
I think I know what the problem is.
A gallery's 'config.xml' file holds image size information and when you load a gallery, the image size information held in the 'config.xml' file will be used (or gallery default values, rather than custom default values, if image size information is not explicitly specified).
Custom default values will work only if you create a gallery from scratch using JuiceboxBuidler-Pro.
Try saving custom default values and then close and reopen JuiceboxBuilder-Pro and check the image sizes (click 'New Gallery'). You will probably find that they are your own values.
One possible way to workaround this would be to add the image size information to your gallery's 'config.xml' file before you open the gallery in JuiceboxBuilder-Pro.
As you initially create your galleries with the Lightroom plugin, you could add the image size information to all your gallery 'config.xml' files by adding the required configuration options to the template file that the plugin uses to create the XML files.
Open the 'juicebox_pro.lrwebengine/config.xml' file in a plain text editor and add the following on line 34 (currently a blank line just below "<juiceboxbuilder"), changing the values as required.
maxImageWidth="1024"
maxImageHeight="768"
imageQuality="80"
thumbWidth="85"
thumbHeight="85"
thumbQuality="90"
useSmallImages="true"
smallImageWidth="800"
smallImageHeight="600"
smallImageQuality="80"
useLargeImages="true"
largeImageWidth="2048"
largeImageHeight="1536"
largeImageQuality="80"Each time a new gallery is created with the Lightroom plugin, the image sizes will be in the 'config.xml' file ready for JuiceboxBuilder-Pro.
The code I posted above is actually already set up to display the galleryDescription below each gallery.
You can enter a galleryDescription for each gallery in JuiceboxBuilder-Pro's 'Customize -> General' section.
Alternatively, if you want the same text to be displayed in the footer regardless of the gallery currently being displayed, then you can replace the #footer div with something like the following:
<div id="footer">
<div id="description" style="padding: 10px 40px;">Custom text goes here.</div>
</div>... and then remove (or comment out) the following line:
$('#description').css('padding', desc ? '10px 40px' : '0px').html(desc);I cannot see the title of the splash image gallery in the white stripe across the image in the left column (its 3/4 of the way down in the white bar) nor can I find any way to to fix this problem.
This problem is due to some custom CSS code in your 'colorado.css' file which is overriding the gallery's own CSS, specifically lines 683 - 695:
#sidebar h3 {
font-size:12px;
color:#990000;
font-weight:bold;
margin:5px 70px 2px 70px;
background-color:white;
border-style:inset;
border-width:1px;
border-color:#400000;
padding-top:1px;
padding-bottom:1px;
padding-left:20px;
}Juicebox uses an <h3> tag for the Splash page and the Juicebox gallery is nested within the #sidebar container so the gallery is inheriting the rules above. Try applying your custom CSS rules to only those elements on your web page which require them by using further CSS selectors (ids or classes).
question 1) whenever juicebox updates I will only have to update this file to keep my current galleries on countyfairgrounds.net working? That would be nice. -
Yes. If all your galleries share a single 'jbcore' folder, then you would just need to update that single 'jbcore' folder to upgrade all your galleries when a new version of Juicebox is released.
2) I do not understand how to do this - more explanation please.
All you need to do is upload a single instance of the 'jbcore' folder and point each gallery's embedding code towards it.
If you choose to upload your 'jbcore' folder to this location: http://www.countyfairgrounds.net/jbcore
... then you can start each gallery's embedding code with the line:
<script src="/jbcore/juicebox.js"></script>like here - http://www.countyfairgrounds.net/jbcore - that is what I am going to do now. ...hope that is right....
That is absolutely fine. It does not matter where the 'jbcore' folder is located on your web server as long as the path in the embedding code points towards it correctly.
Your Colorado gallery currently uses the 'jbcore' folder in the 'colorado' directory but you could change the following (on the 'colorado.php' page):
<script src="jbcore/juicebox.js"></script>... to:
<script src="/jbcore/juicebox.js"></script>... for the Colorado gallery to use the shared 'jbcore' folder in your root directory instead (and then you could safely delete the 'jbcore' folder from the 'colorado' directory).
Juicebox-Pro does not feature such functionality.
You could perhaps set it up manually but it could turn out to be a complex task and programming knowledge (HTML, JavaScript and PHP) would likely be required.
You would need to add a guest book to the web page containing your gallery and this would require a server-side scripting language (such as PHP) to store the comments in a database or file on your server. Try a web search with terms such as 'PHP guest book' to get you started.
If you wanted the comments to be specific to a particular image in a gallery (rather than just relating to the gallery as a whole), then you could determine the current image being displayed in the gallery using the Juicebox-Pro API (specifically the getImageIndex() method) and then perhaps somehow integrate this into the guest book you choose to use (if it is flexible enough to allow such modifications).
It would not be a quick or easy task (as Juicebox-Pro was not designed with this in mind) but I hope this points you in the right direction.
Maybe you could build a web site with WordPress. You could create your galleries with the WP-Juicebox plugin and just use WordPress's own built-in commenting system (although the comments would be per page or post rather than per image in a gallery).
I have just double-checked this functionality and it works OK for myself in JuicboxBuilder-Pro v1.4.3.
Please ensure that you are using the latest version of JuiceboxBuilder-Pro (v1.4.3).
If necessary, instructions for upgrading can be found here.
Also, after clicking 'Save Defaults' and then clicking 'OK' in the 'Save Image Size Defaults' pop-up window, be sure to click 'OK' in the 'Set Image Sizes' parent window (the window with the 'Save Defaults' text).
The easiest thing to do might be to just use the code <img src="mylogo.png" /> and then place the 'mylogo.png' file inside the gallery folder after the gallery has been created (and when the gallery folder exists).
The logo will not show up in the live preview window but it will display fine in the gallery itself.
Ordinarily, in order to have the logo display in the live preview window, it would be necessary to add this extra resource file to the plugin's 'manifest.lrweb' file (to let Lightroom know about the image file for use in preview mode) but this cannot be done as the 'manifest.lrweb' file is compiled and cannot be modified.
However, as the 'jbcore' folder is already included as a resource folder, you could add your 'mylogo.png' file to the 'juicebox_pro.lrwebengine/jbcore/' folder and then use the code <img src="jbcore/mylogo.png" />.
Then logo will be displayed in the live preview window and when the gallery is created, the logo file will automatically be copied across into the gallery's 'jbcore' folder.
If your WordPress widget accepts HTML code (like the standard Text widget does), then there is no reason why you cannot paste your gallery's embedding code in there.
If embedding a gallery into a widget, I would recommend using the baseUrl method of embedding as documented here.
This will prevent problems with knowing where to upload your gallery files to as the baseUrl will define the path to the gallery folder.
Essentially, the baseUrl method allows you to keep all the gallery files inside the gallery folder and you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into your widget. 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.
For example, you could upload a gallery folder (in this example named 'web') to your web space's root directory and paste the following code into your widget.
<!--START JUICEBOX EMBED-->
<script src="/web/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: "/web/",
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "250",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->(The leading slash in the paths denotes your root directory.)
You could certainly just copy the structure of your colorado page/gallery for each of the other state pages.
To embed a new gallery for a different state, copy the gallery files into the '/state/' folder and use the exact same embedding code (no changes at all) that you use on your 'colorado.php' page on the '/state/state.php' page.
As you plan to have multiple galleries on your web site, you could have all your galleries share a single 'jbcore' folder if you like. Please see here for details.
Essentially, all you would need to do is use a single 'jbcore' folder on your web server and ensure that the path to the 'jbcore/juicebox.js' file is correct in each gallery's embedding code.
This is not necessary at all but it does mean that you would be able to upgrade all the galleries on your web server at once (when a new version of Juicebox is released) by simply replacing a single 'jbcore' folder.
Please see these two FAQs which should hopefully help.
How do I change the order of images from Flickr?
How do I change the order of images in a Flickr Photo Set?
Please note that flickrSort is a Pro-only configuration option (which is not supported by Juicebox-Lite).
Make sure that your Back Button Url actually starts with http://
If if does not, then it will be treated as a relative path and will be tagged on to the end of the current web page URL.
I have just double-checked the current version of the Lightroom plugin (from the Juicebox-Pro v1.4.3.2 zip package) and entering an absolute Back Button Url such as http://www.example.com/index.html seems to work as expected so please double-check your Back Button Url entry. Try completely clearing your Back Button Url input field (to make sure there is no text hiding before of after your Url and then enter http://www.lauralei.com/CubaCosta15/
This should hopefully work fine.
Unfortunately, Juicebox was not designed with such functionality in mind and trying to implement it (especially within a Drupal environment) would be quite difficult.
The only way I have been able to achieve this is as follows:
(1) Create a sample gallery with JuiceboxBuilder-Pro
(2) Set imageClickMode="OPEN_URL" (so that the corresponding linkURL is opened when the image is clicked)
(2) Set all your linkURLs (in the gallery's XML file) to linkURL="javascript: func();" (to run the JavaScript func() function in the gallery's index page when the image is clicked)
(3) Set all your linkTargets (also in the gallery's XML file) to linkTarget="_self"
(4) Use the following code as your gallery's 'index.html' file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="minimal-ui" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
imageClickMode: "OPEN_URL",
showExpandButton: "TRUE"
});
var fullscreen = false;
jb.onExpand = function(expanded) {
fullscreen = expanded;
}
function func() {
if (!fullscreen) {
jb.toggleExpand();
}
}
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>This would be difficult to implement within Drupal (even more so when using the Juicebox module) and there may be problems that might need to be overcome. (This will not work in conjunction with a baseUrl and nothing happens when you click an image once the gallery has been expanded.)
If you decide to proceed further, I hope that my suggestion above points you in the right direction but I would recommend that you use the Expand Button only to expand the close the gallery.
The path to the 'juicebox.js' file in your gallery's embedding code is incorrect.
Your gallery uses the following code:
<script src="jbcore/juicebox.js"></script>... so your 'juicebox.js' file should be located here (but it is not): http://www.countyfairgrounds.net/colora … uicebox.js
Please check the location of your gallery files on your web server and the path to the 'juicebox.js' file.
- I have Juicebox-Pro installed on my desktop and laptop, and both machines were having the same issue.
- I downloaded Juicebox-Lite from the link you provided, and it loaded all images normally, via drag and drop and Browse methods
It certainly sounds like the problem was with the version of JuiceboxBuilder-Pro which you have installed on both your computers (v1.4.0). I think the problem you were experiencing might have been caused by the following bug (in relation to the issue raised in this Adobe forum thread) which was fixed in JuiceboxBuilder v1.4.1 (both Lite and Pro).
FIXED - Image import failing for bad EXIF data [JuiceboxBuilder]
Please see the Version History for a full list of changes between versions.
Hopefully, all will be well now that you have JuiceboxBuilder-Pro v1.4.3 installed.
Thank you for your reply,
You're welcome.
it sounds like the best way for my client to get the control that they would want would be to use flickr.
I agree. I think it is probably easier to upload and manage images in Flickr than in the WordPress Media Library (although it is obviously another web site to log into and another step in the workflow). Juicebox-Pro has many built-in Flickr configuration options so it should be relatively easy for your client to display tagged images or a Flickr Set.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.