You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Yes. JuiceboxBuilder-Pro (which comes with Juicebox-Pro) has individual controls for each and every Pro configuration option (except for languageList and the Embed Options which are not required for a gallery created with JuiceboxBuidler-Pro to function correctly) so there will be no need for you to add code manually within your gallery files.
thanks alot the picasa links are working,
That's great! Thank you for letting me know.
btw whiles i was replacing the 'wp-juicebox.php' file i saw a 'save-galler.php' file, could this file also hv a bug?
There should be a file named 'save-gallery.php'. If yours is named 'save-galler.php', please rename it to 'save-gallery.php'.
The 'save-gallery.php' file is used only when first creating a gallery (having clicked the 'Add Juicebox Gallery' button).
It is not used when editing a gallery so the problem is unlikely to lie within this file.
It will be very difficult for me to troubleshoot this issue unless I can see it for myself (and I have been unable to replicate it in my own test WordPress installations).
If you are happy to allow me access to your web server so that I can investigate further, please let me know.
Only Google really know how their image indexing works. The algorithm they use is probably very complex.
It may help to have descriptive filenames though (rather than filenames such as '130_3027.jpg').
Also, I do not know how the 'feedthebot' tool works (I have no access to their source code) but I have created a few test scenarios (both with and without Juicebox) and it seems to display images (in my test pages, at least) whose paths (the 'src' attributes to the 'img' tags) are expressed as absolute URLS (e.g. 'http://www.example.com/images/image.jpg') rather than relative. There should be no problem with Google being able to index images with relative URLs though (this is perfectly valid)
If you want to give your images the best chance of being indexed, make sure you give them all titles and captions (so that each <img> tag's 'title' and 'alt' attributes are filled in). It might also help to give your images descriptive filenames and if you want your images to be displayed in the 'feedthebot' tool, try changing the relative paths to absolute (though I would expect that this is not necessary for Google).
Is this possible?
Yes. You can disable thumbnails and navigation buttons and have just the main image and a Back Button.
For reference, a full list of configuration options can be found here.
We have many sample galleries which demonstrate the flexibility of Juicebox here. None of them exactly match your requirements (although the MultiSize demo comes close) but it would certainly be possible to layout a gallery as your require with the available configuration options.
We also offer a money-back guarantee as noted in this FAQ.
There is currently a known bug whereby elements which have explicitly been assigned a CSS position are not covered by the fullscreen gallery (they should be). This bug should hopefully be fixed in a future version of Juicebox. In the meantime, please try one of the two following suggestions:
(1) Set useFullscreenExpand="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' section).
... or:
(2) Set expandInNewPage="TRUE" in (in JuiceboxBuilder-Pro's 'Customize -> General' section). When the gallery is expanded, it will be displayed on a page of its own rather than on top of the embedding page.
Hopefully one (or both) of these suggestions will be a suitable solution to your problem until the bug is fixed.
Thank you for providing the URL to your test gallery.
I have found a bug in WP-Juicebox relating to Picasa/NextGEN. Please replace the 'wp-juicebox.php' file in your 'wp-content/plugins/wp-juicebox/' directory with the 'wp-juicebox.php' file from this zip file [File removed.]. (Just extract the zip file to your 'wp-juicebox' directory, overwriting the existing 'wp-juicebox.php' file.) Once the new file has been uploaded, there is no need to do anything else other than reload your web page to display your test gallery.
It should certainly fix the Picasa/NextGEN issue. Please let me know if it also solves the 'unable to edit existing galleries' issue.
(I do not think it will. The problems seem unrelated.)
In order to troubleshoot the editing problem further, it would help greatly if I had access to your WordPress installation and web server (as I am unable to replicate the problem myself). If you are agreeable to this, please let me know and I will email you with an address where you can send me login details. Thank you.
I create my galleries with the Lightroom plugin.
If you are creating your galleries with Lightroom and want to give your galleries a transparent background, just drag the Background Image Opacity slider down to 0% in the 'Web -> Juicebox -> Color Palette' control panel.
This will save you modifying any files (or creating a new 'index.html' file in JuiceboxBuilder-Pro and then uploading this file to the gallery folders on your web server).
i changed the permissions on the juicebox folder to 777
Try using permissions of 755 for the 'wp-content/uploads/juicebox/' directory (some web servers do not like the use of 777).
heres my PHP Version : 5.3.24
WP-Juicebox requires PHP v5.2.0 or later so v5.3.24 should be fine.
Also as a side note im not able to make a gallery linked to picasa
How far into the process are you able to get? Are you able to select 'Picasa Web Album' as the 'Image Source'?
If so, enter 'picasateam' for the Picasa User Id and 'Vegas Weekend' for the Picasa Album Id/Name to display the sample Picasa Web Album.
If you are able to get this far, what do you see when you try to view the gallery?
Please try this and then post the URL to the gallery so that I can take a look.
All the image paths and image titles and captions have to be listed in a separate XML file.
There is no way to pass this information to Juicebox without using a separate XML file.
The XML file can either be a static file (a .xml file created in advance) or a file generated dynamically by a server-side scripting language (such as PHP) so that the file is fully-formed when it is fed to Juicebox.
An example of this can be found in the answer to Query #3 in this forum post.
Please also see this FAQ:
Can Juicebox handle a custom data source, for example RSS or Instagram?
My menu page is comprised of 3 tables of different heights and cells, but the same width.
It sounds like your web page would benefit from using the template used for the View Resizable Gallery with Top Menu Example in the Embedding Multiple Galleries support section.
The example uses a header and a footer (both of fixed height) and a Juicebox gallery takes up the remainder of the web page, no matter what the size of the user's browser window is.
You could use this template for your main web page and just swap the header and footer content and then replace the sample gallery with your own thumbnail content. (You can view the source of the web page in a browser and copy/modify it to suit your own needs.)
In the Juicebox Gallery, the main Image gets smaller and larger depending on how large or small you make the browser window.
What command code makes this possible?
If you need to know how to resize a div respecting its aspect ratio when a browser window is resized, then try a web search with terms such as "resize div respect aspect ratio" and check out the StackOverflow links that appear at the top of the results.
Is there a way to limit KB's for photos when exporting a Gallery besides adjusting the JPG Quality?
When creating a Juicebox gallery with the Lightroom plugin, you can set the Resolution and quality for the resulting images in the 'Web -> Output Settings' control panel. It is not possible to set a target filesize but with a little trial and error, you should be able to find suitable settings.
You would change the background color in the embedding code in the HTML web page which contains your gallery (the page you view in your browser to see your gallery), not the gallery's XML file.
If you create a gallery with JuiceboxBuilder-Pro, then, by default, the gallery's HTML page will be called 'index.html'.
However, if you have embedded your gallery in another web page, then it is this web page that you will need to edit.
I am glad that your problem has been resolved. Thank you for posting back to let me know.
(I think it may depend on the <meta> 'viewport' tag being used as to whether setting expandInNewPage to either TRUE or FALSE turns out to be the fix.)
In any case, the developers are aware of this problem and it should be fixed in a future version of Juicebox.
Until then, it would be safer to keep using expandInNewPage="FALSE" (in your case).
You can give your Juicebox gallery a transparent background by setting the Background Color Opacity to '0' (zero) in JuiceboxBuilder-Pro's 'Customize -> Lite' section.
The Opacity can be a decimal value from 0 (fully transparent) to 1 (fully opaque).
If you are setting the background color manually in your gallery's embedding code, then use something like:
backgroundColor: 'rgba(0,0,0,0)'... where the fourth number in the rgba notation is the opacity (the alpha channel).
For example:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: 'rgba(0,0,0,0)'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->So, if I set the Position of the gallery to 'relative', will it still be in the center of the browser on any size computer?
Yes, but if your gallery is a 100% x 100% gallery which fills the web page, there is no need to set the position of the parent container div to relative. If the Facebook div (the div with the position of absolute) has no parent container with a position of relative, the containing block will be the 'html' tag which is essentially the entire web page - exactly the same area as the gallery itself).
For more information on CSS Positioning, please see this web page.
WP-Juicebox requires PHP v5.2.0 or later so the upgrade to v5.5 should not have made a difference.
Also, permissions of 777 should work OK. By defenition, 777 permissions gives full permissions to all but it looks like your web server may actually restrict access when using 777.
In any case, I am glad that your problem has been resolved.
Thank you for posting back to let me know.
I was just confirming that I do not see the problem in either Chrome or Mobile Safari (in iOS 6).
Do you see the problem in Mobile Safari or just in Chrome in iOS 7.1?
(This might confirm whether the problem is specific to Chrome or iOS 7.1 in general.)
Have you tried replacing the <meta> 'viewport' tag as I suggested in my last email?
If so, did it make any difference?
I would still expect the value of expandInNewPage to make a difference (due to the known bug). It certainly makes a difference in my own test galleries (in both Chrome and Mobile Safari).
Please double-check this by setting expandInNewPage="TRUE" and expandInNewPage="FALSE" (at different times) and checking your web page (after clearing your browser's cache) with each setting.
There is a comprehensive list of things to check/try in this forum post. It looks like you may have tried everything on the list but maybe going through the list will help.
Here are a couple of other things to consider.
(1) If JuiceboxBuilder-Pro used to work OK but now does not, try winding back your system using Time Machine (Mac) or System Restore (Windows) to a time when it did work OK.
(2) If you use Avast (anti-virus), try making an exception in the program for JuiceboxBuilder-Pro. (There have been several reports recently of Avast interfering with Adobe AIR applications.)
(3) If using Windows, have you tried creating a new User Account with administrator rights and installing JuiceboxBuilder-Pro from within this new account? (It should not be necessary but it might help to know whether this works or not.)
Juicebox uses only one set of configuration options for both normal and expanded modes and it is not possible to change configuration options once a gallery has been loaded.
Also, the layout of a Juicebox gallery is complex and I would not recommend trying to alter a gallery's expanded layout using CSS. Juicebox was not designed with such a customization in mind and if you try this, you may very quickly get caught up trying to fix unwanted knock-on side-effects. There is no documentation for such a customization. You would need to check the ids and classes of elements to change using a browser's developer tools and apply your custom CSS rules using JavaScript when the Juicebox-Pro API onExpanded() event is fired.
It may not be an ideal solution to your problem but I would recommend settling on a design which works for you in both normal and expanded modes.
It is not possible to watermark Flickr images using Juicebox. Only local images can be watermarked by JuiceboxBuilder-Pro.
Watermarking is a feature of JuiceboxBuilder-Pro (the application used to build Juicebox-Pro galleries) rather than Juicebox-Pro itself.
The watermarks are not applied to the images by Juicebox-Pro at the time the images are displayed in the gallery. The watermarks are baked into the images (by JuiceboxBuilder-Pro) at the time they are resized when the gallery is created.
As JuiceboxBuilder-Pro does not process Flickr images when a gallery is created, the Flickr images cannot be watermarked.
You would need to add watermarks to your images (perhaps using JuiceboxBuilder-Pro or an imaging program such as Adobe Photoshop), upload the watermarked images to Flickr and then display them in your gallery using the available Flickr configuration options.
Thank you for providing the screenshots.
In Chrome 35 on iOS 6 (and in Mobile Safari, too), I see your web page as your 'before' image (not as you see it in Chrome on iOS 7). What version of Chrome are you running? If it is not the latest version, try updating it.
The only way I can make a web page 'zoom-out' in Chrome 35 on iOS 6 is to not use the following <meta> 'viewport' tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Try replacing this <meta> 'viewport' tag with the one which Juicebox now uses in the 'index.html' files generated by JuiceboxBuilder-Pro to see if this helps:
<meta name="viewport" id="jb-viewport" content="minimal-ui" />Also, I notice that your gallery has a width of 100%. Try temporarily giving your gallery a fixed width (just for testing purposes) to see if this makes a difference (to see if the 100% width is somehow forcing the web page's width to expand resulting in a change to the scale of the web page).
1. But is there a way to overlay it at the bottom of the gallery, or will the placement always be absolute because it's an overlay?
If your gallery fills the web page (like in the sample code I posted), you can just change top: 10px; to bottom: 10px;. The position does not have to be absolute (although the container must have a CSS position for the z-index to work).
If you embed your gallery in a web page alongside other content (and your gallery does not fill the web page), then wrap your gallery's container div and your Facebook div in a parent container div (with the same dimensions as your gallery's container) and assign position: relative; to the parent container div and position: absolute; bottom: 10px; to the Facebook div.
2. Can I change the color or transparency of the Like button?
Facebook allow you to change the 'colorscheme' by setting the HTML 5 attribute 'data-colorscheme' to either 'light' or dark'.
Please see this web page for further details.
For example:
<div class="fb-like" data-colorscheme="dark" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>However, actually changing the color of the Like Button is not allowed under Facebook's brand guidelines, as noted on this web page.
Don't
Modify Facebook brand assets in any way, such as by changing the design or color
If you want to include a Facebook Like Button on your page, then, ordinarily, you would need to either make room for the button on your page (alongside the gallery) or overlay the container which contains the button on top of the gallery using CSS.
Details of the code to include on your web page can be obtained from this Facebook page.
For example, if you selected the HTML 5 implementation and wanted the Like Button to overlap the top-left corner of your gallery, then your web page's code would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="minimal-ui" />
<meta name="description" content="" />
<style type="text/css">
body {
margin: 0px;
}
#overlay {
position: absolute;
top: 10px;
left: 10px;
z-index: 9999;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: '#222222',
galleryTitlePosition: 'NONE'
});
</script>
<div id="juicebox-container"></div>
<div id="overlay">
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
</body>
</html>Perhaps an easier method would be to select the IFRAME implementation of the Like Button and paste the entire iframe code into the Gallery Title text field in JuiceboxBuilder-Pro (in the 'Customize -> Lite' section). If trying this, I would also recommend setting galleryTitlePosition="TOP" (in the 'Customize -> General' section) so that the Like button is always visible in your gallery.
Please note that the Like Button will not be displayed until you upload your gallery to your web server.
I hope this helps.
@yvetteo
I have just viewed your gallery in Chrome on on iPod Touch running iOS (6.1.6) and it looks OK to me. (The Splash Page is displayed and when it is clicked, the gallery expands fullscreen.)
What device and iOS version do you use? Also, are you able to upload a screenshot somewhere so that I can see what you are seeing?
If you have made any changes to your gallery recently, try clearing your browser's cache before reloading your gallery to ensure that your browser is fetching and using the most recent versions of your gallery files.
Also, try setting expandInNewPage="TRUE" in your gallery's settings. There is currently a bug (which should hopefully be fixed in a future version of Juicebox) whereby setting expandInNewPage="FALSE" can change the scale of the embedding page. This may be a possible explanation for the problem that you are running into.
Here are a few tips which should help you get your galleries working as expected:
(1) Load the 'juicebox.js' file only once per web page (not once per gallery).
(2) Unless your galleries are nested within parent containers which have been given dimensions via CSS, set gallery dimensions in the embedding code. As you do not currently set dimensions, default values of 100% will be used for both the width and height and unless Juicebox can determine when the 100% refers to, you may have problems with gallery sizing. Try using something like:
galleryWidth: '100%',
galleryHeight: '600',(3) If you have uploaded your entire gallery folders ('live' and 'travel' to your web server), then I would recommend using a baseUrl (to point to your gallery folder) instead of a configUrl. If you use only a configUrl, then the paths to the images within the 'config.xml' file may be incorrect (unless you have edited them manually).
(4) Use relative paths for the configUrl or baseURL. If you hardcode the emmamasseyphoto.com domain in the path, then your gallery will not display if a visitor goes to the www.emmamasseyphoto.com subdomain
I do not see any problem with the containerId entries in the code you posted so you should not be getting any "Cannot find div with id" messages.
Try the following and if it does not work, please double-check that the entire 'live' and 'travel' gallery folders have been uploaded to your root directory.
<script src="/live/jbcore/juicebox.js"></script>
<script type="text/javascript">
new juicebox({
baseUrl: "/live/",
containerid: "livecontainer1",
backgroundColor: "rgba(0,0,0,0.9)",
galleryTitle: "Live",
showSplashPage: "ALWAYS",
showOpenButton: "false",
galleryTitlePosition: "NONE",
showThumbsOnLoad: "false",
imageTransitionType: "CROSS_FADE",
captionPosition: "OVERLAY_IMAGE",
imageNavPosition: "IMAGE",
galleryWidth: "100%",
galleryHeight: "600"
});
</script>
<div id="livecontainer1"></div>
<script type="text/javascript">
new juicebox({
baseUrl: "/travel/",
containerid: "travelcontainer",
backgroundColor: "rgba(0,0,0,0.9)",
galleryTitle: "Travel",
showSplashPage: "ALWAYS",
showOpenButton: "false",
galleryTitlePosition: "NONE",
showThumbsOnLoad: "false",
imageTransitionType: "CROSS_FADE",
captionPosition: "OVERLAY_IMAGE",
imageNavPosition: "IMAGE",
galleryWidth: "100%",
galleryHeight: "600"
});
</script>
<div id="travelcontainer"></div>If you continue to experience difficulties, please post the URL to your web page so that I can take a look and help further.
As noted on this web page:
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Currently, in your style-menu2.css file, only the #menu ul (and #menu li) elements have been given a CSS position.
You would be able to set a z-index value on your 'page' <div> instead if you gave it a CSS position.
For example, the following should work (as an alternative to setting the z-index value on the #menu ul elements):
<div id="page" style="position: relative; z-index: 9999;">Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.