You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
As noted here:
Note that the Juicebox gallery will not show in Dreamweaver's design preview. To view your gallery, view the HTML page in a browser.
When previewing your gallery, make sure that your web page files have actually been exported to your hard drive (ready for upload to your web server) rather than still being a work-in-progress within Dreamweaver.
Please ensure that you are using the latest version of WP-Juicebox (v1.3.2.0) which can be downloaded from this web page.
What you have been doing sounds correct and I have just followed the steps that you have described in a test gallery and the Pro Options are included in the gallery's XML file OK (although setting galleryTitlePosition="NONE" will override galleryTitleHAlign="RIGHT" in that the Gallery Title will not be displayed and, therefore, its horizontal alignment is redundant).
Please post the URL to your gallery so that I can take a look and help further.
when the menu on the left got longer than the screen it wasnt scrollable
The point of the template is that the web page is scaled to fit the user's browser (no matter what its size) without any scroll bars. If you want to have scrollable sections in your web page, then you will need to try a different page layout (or perhaps modify the existing template to suit your needs).
Your web page's side menu does not seem to have so much content that scroll bars should be essential.
Perhaps just tweaking the size of your logo and the font size of your text will help make it all fit on a smaller screen.
As your web site is a portfolio web site showcasing multiple galleries, you might be interested in another one of our products: Showkase.
Showkase is a PHP web application which allows you to create a complete portfolio web site (integrating multiple galleries) online.
Showkase has full support for Juicebox-Pro (and SimpleViewer-Pro) galleries and the galleries are created within the application itself in a web browser interface.
You can create Gallery Index pages and have as many galleries listed on each Gallery Index page as you wish.
Each gallery is represented by a thumbnail image (with the gallery title displayed below) and the gallery is opened when the user clicks on the image.
You can also create non-gallery pages (such as an 'About' page or a 'Contact' page).
Demo sites can be found here and a sample Gallery Index page can be found here.
You should set:
showThumbsOnLoad: 'false',
showSmallThumbsOnLoad: 'false',
showThumbsButton: 'false',
showSmallThumbsButton: 'false',Your code is missing the showThumbsOnLoad entry and showSmallThumbs and showLargeThumbs are not valid Thumbnail Options in the current version of Juicebox-Pro (v1.3.2).
Please make sure that your gallery uses the latest version of Juicebox-Pro (v1.3.2) to ensure than any bugs which were present in previous versions but have since been fixed are not contributing to your problem.
For a full list of changes, please see the Version History.
For instructions on how to get the latest version and how to upgrade existing galleries, please see the Upgrading Juicebox page.
Also, ask your client to try clearing their browser's cache and to temporarily disable any browser extensions that they may have installed before reloading the gallery to see if this helps.
If this does not help, please post the URL to your gallery so that I can take a look.
I do not know. The best thing to do would be to keep an eye on our Twitter account @juiceboxgallery to be informed of any offers as soon as they appear.
If you are a SimpleViewer-Pro user, you can get a 30% discount off the price of Juicebox-Pro. You can find details of this offer in this SimpleViewer news article.
Once you adapt the template for your own web site, you should no longer have the problem.
Try viewing the sample gallery here on a mobile device and you should see the Splash Page in its entirety.
i would like to move it to the top-left corner
Open the 'jbcore/classic/theme.css' file in a plain text editor and change line 538 from:
bottom: 0;... to:
top: 0;The line number above refers to the current version of Juicebox (v1.3.2).
Unfortunately, this promotion (from April 2013) is no longer running.
Set your languageList configuration option in your gallery's XML file as an attribute to the opening <juiceboxgallery> tag rather than in your gallery's embedding code, e.g.
<juiceboxgallery languageList="Toon miniaturen|Verberg miniaturen|Expandeer galerie|Sluit galerie|Open foto in nieuw venster">Your gallery currently uses Juicebox-Pro v1.2.0 but uses configuration options introduced in v1.3.0 (showThumbsButton, showThumbsOnLoad, showSmallThumbsButton, showSmallThumbsOnLoad).
For a full list of changes, please see the Version History.
Try upgrading your gallery to v1.3.2 by replacing it's 'jbcore' folder with the one from the Juicebox-Pro v1.3.2 download package ('juicebox_pro_1.3.2/web/jbcore/'), set the following configuration options in your gallery's XML file and clear your browser's cache after upgrading and before reloading your gallery to be sure that your browser fetching the most recent gallery files from your web server.
showThumbsButton="FALSE"
showThumbsOnLoad="FALSE"
showSmallThumbsButton="FALSE"
showSmallThumbsOnLoad="FALSE"- if i make an image of say 250x250px as the splash image and there is more space on the phone left than that, will the image be interpolated to be bigger and fill up the remainig space, or always stay the original size?
The image will be scaled up to fill the Splash Page area.
- if i want to change the font of the splash page, i change ".jb-splash-info h3" and "a.jb-splash-view-glry" in theme.css, right?
does that affect any other typography as the first class is also called h3? or does it really only concern the splash page?
You can change the font face for all gallery text by setting the galleryFontFace configuration option (in JuiceboxBuilder-Pro's 'Customize -> General' section).
If you want to change just the Splash Page's font face, add something like the following to your CSS.
.jb-splash-info {
font-family: Courier;
}All elements of the Splash Page (the Splash Button Text, the Splash Title, the Gallery Description and the Splash Image Count) will inherit this font face.
the color property of "a.jb-splash-view-glry", didnt seem to change the color of the "view gallery" text. does something else influence that? i only tried on one phone though.
To change the color of the 'View Gallery' text, try changing the color on line 894 in this CSS section:
.jcbx-glry-classic a{
color:#FFF;
}
and what do ".jb-splash-info", ".jb-splash-info p" and "p.jb-splash-desc" do?
.jb-splash-info - main class for Splash Page text
.jb-splash-info p - will affect splashShowImageCount text
p.jb-splash-desc - will affect galleryDescription text
- if i define the splash images in the juicebox-interface for each gallery, can i still use one external jbcore folder
Yes. You can set a unique splashImageUrl for each gallery. The value for the splashImageUrl is stored in each gallery's XML file.
on loading, the writing at the bottom is cut off (step1). i can then scroll inside the splash image to show all of the writing (step2).
but then the splash page is still cut off at the bottom. the amount thats missing at the bottom is exactly the amount, that the adress bar of the browser uses, when i choose to have it displayed (step3).
the juicebox-container is inside a div, so i dont know, if the problem is safaris rendering of the div or the splash itsself.
It looks like the layout of your page in conjunction with Mobile Safari may be causing this problem.
If I replicate your scenario in a test page and replace the Splash Page with the gallery itself (by setting screenMode="LARGE"), the gallery is truncated, just like the Splash Page (so it is not just a problem with the Splash Page).
As you have just two main elements on your web page (your side menu and the Juicebox gallery), try implementing the 'View Resizable Gallery with Side Menu Example' from the Using a Resizable Gallery with a Header guide.
You can view the source of the page in your browser and modify it to suit your own needs (swapping the gallery for your own and replacing the side menu content with your own navigation menu).
There are no configuration options to control the cropping of the Splash Page image.
Rather than have Juicebox use the first image from your gallery (as it does by default), you could perhaps create a new image specifically for your Splash Page (with smaller dimensions than the first image in your gallery, which is 833px x 1200px) and use the splashImageUrl configuration option to display it.
For reference, the Splash Page configuration options can be found here.
I have run into an issue where if I go back and edit a gallery, regardless of the customization I have set, JuiceBox always publishes it the same way.
It sounds like a program may have put a temporary lock on one or more of your gallery files which may be preventing JuiceboxBuilder from overwriting the old gallery files with the new ones.
Make sure, when re-saving a gallery, that you do not have any gallery files open in any other programs (such as the 'index.html' file open in a browser or the 'config.xml' file open in a text editor).
Also, make sure that the permissions on your gallery folder are not too restrictive (for example, read-only) which would also prevent JuiceboxBuilder from overwriting the old gallery files with the new ones.
(1) Please see the note regarding Using Percentage Heights and try changing:
<div id="right">... to:
<div id="right" style="height: 100%;">(2) Try scaling the content of your web page for mobile devices by using the <meta> viewport tag.
Try using the following line of code in your web page's <head> section.
<meta name="viewport" content="width=device-width, initial-scale=1">Do these problems happen when you preview the gallery locally on your computer or when the gallery has been uploaded to a web server (or does it not make a difference)?
I do not see either of these problems when I view your galleries online in Firefox 22.0 on a PC.
However, here are a few things to try which may help.
If you are not already using the latest version of Firefox (v22.0), try upgrading it to see if it makes a difference.
Try temporarily disabling any browser Add-ons which you may have enabled.
Try fixing the HTML errors on your web pages. They seem trivial but it should not take long to do and might make a difference. You can check the code on your web pages with the W3C Markup Validation Service.
Try changing your Doctype Declaration from HTML 4.01 Strict to HTML 5 (<!DOCTYPE HTML>). Again, this may not help but it should be quick to try.
All the Juicebox gallery files must be on the same domain/subdomain as the JavaScript embedding code due to the same-origin policy. Please see this web page for further information.
As you have uploaded your entire Juicebox gallery folder to your 'cromarin.com' domain, you could load the gallery's 'index.html' file ('cromarin.com/web/index.html') into an iframe on your '11thdistrict.com' page. For example, replace your existing embedding code with the following iframe code:
<iframe src="http://cromarin.com/web/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>This works because the gallery is actually embedded (using the JavaScript embedding code) into the 'index.html' file which is on the same domain as all the other gallery files.
This method of embedding is documented as Option #2 here.
The Embedding in a Web Template Site instructions (which fits your scenario) also uses this technique.
I choose Open Gallery from the menu (Gallery, Open), choose the folder by marking it (which contains the config.xml file)
Try navigating inside the gallery folder before clicking the 'Select Folder' button.
nothing happens
Do you see the following message?
'config.xml' file not found in the selected Gallery Folder. Check the selected folder is a Juicebox gallery folder.
Make sure that your gallery's XML file is named 'config.xml' and is located in the root of your gallery folder.
If you have renamed or moved the file (for example if using a configUrl or baseUrl) JuiceboxBuilder-Pro will not be able to open the gallery.
If none of the above helps, try reinstalling JuiceboxBuilder-Pro.
Make sure that you have the latest version (v1.3.2). Instructions on how to get the latest version can be found on the Upgrading Juicebox page.
After uninstalling the old version and before installing the new version, manually delete the following folder (if it exists):
Mac: /Users/your_username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro
Windows (XP): C:\Documents and Settings\your_username\Application Data\Adobe\AIR\ELS\JuiceboxBuilder-Pro
Windows (Vista, Win 7, Win 8): C:\Users\your_username\AppData\Roaming\Adobe\AIR\ELS\JuiceboxBuilder-Pro
Your baseUrl embedding code looks fine and the paths within it are correct (for your current folder structure) but the embedding code is not present in your 'zukan.html' file.
Make sure that you have uploaded a copy of your 'zukan.html' file to your web server which contains the embedding code and if you are in any doubt as to whether the old version of the file is being overwritten, try deleting it from your web server first before uploading the new version in its place.
(When deleting any files from your web server, please be sure to make backup copies first in case anything goes wrong and you have to reinstate them.)
@Joel
According to this web page, it sounds like the Share Dialog may be available only from within other Apps (rather than web pages).
Please post suggestions in the Feature Requests forum thread.
This keeps them all together and ensures that they are not overlooked. Thank you.
The social sharing buttons work fine on the desktop version, correctly referencing the image as contained within the local gallery and posting the correct thumbnail with the exception of Google+ which references the Flickr gallery, not the local one. (Is there any way to change this?)
This cannot be changed and is due to a limitation of the Google+ Share Link which supports only a single URL. Please see this forum post for further details.
On the mobile site however, the Facebook share doesn't work at all.
Thank you for reporting. I have logged this as a bug report.
While all the other buttons do (Google+ still referencing Flickr of course, not the local gallery) they point through the browser to the mobile sites of the social networks instead of through the native app. This seems pretty cumbersome to me and I'd like to know how to change it.
This cannot be changed as Juicebox does not support integration with Social Sharing Apps.
The shared links are simply web site URLs and, as such, are opened in the default web browser.
The image file names themselves should not contain spaces but your image Titles and Captions (which are displayed on-screen in the gallery) can contain spaces and other characters if you like.
You can enter whatever text you like in the Title and Caption text fields in JuiceboxBuilder-Pro.
You may even want to embed Titles and Captions within the images themselves (in the IPTC metadata) using an imaging program such as Adobe Photoshop and then extract these for use in the gallery by going to 'Images -> Titles -> Use IPTC Title' and 'Images -> Captions -> Use IPTC Caption'.
I do not know what could be causing this error message.
Unfortunately, debugging this problem may require some trial and error and perhaps the best course of action would be to remove elements from your web page, one by one, until the error no longer occurs and you find the cause of the problem.
So, can you tell me if what I am seeing here is of any potential danger?
There is no danger. What you are seeing is just the gallery's XML file which stores the image information used to display the gallery.
Although the page is generated dynamically by a PHP file, it is essentially just a web page and Google is indexing it like any other web page.
If you want to prevent Google from indexing this '/wp-content/plugins/wp-juicebox/config.php' file on your web site, you could try using a 'robots.txt' file. Please see this web page for details.
You can embed multiple galleries using the baseUrl method as documented here.
You can keep each gallery as a self-contained entity in its own folder and upload the complete gallery folders to your web server but all the HTML pages into which the galleries are embedded can be anywhere on your web server (all in the same folder if you wish).
A Juicebox gallery will resize dynamically with the size of the user's browser window only if the dimensions of the gallery itself and those of all parent containers are expressed as percentages. If there is an absolute pixel value anywhere up the chain, the gallery's size will become fixed (e.g. 100% x 100% x 800px = 800px).
The example you quoted has a header of a fixed height and then uses jQuery to assign new fixed height (not a percentage) to the gallery each time the user's browser window is resized.
You can view the source of the sample web pages in a browser and copy/modify them to suit your needs.
As an example, if you wanted a web page with a fixed height header and a gallery which takes up the remainder of the available space in the user's browser window, take a look at this forum post.
For reference, the Embedding Multiple Galleries support section can be found here.
You can view the source of the sample web pages in a browser and copy/modify them to suit your needs.
As an example, if you wanted a web page with a fixed height header and a gallery which takes up the remainder of the available space in the user's browser window, try the following as your gallery's 'index.html' page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Juicebox Gallery</title>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<style type="text/css">
html, body { height: 100%; overflow: hidden; }
body {
margin: 0;
padding: 0;
background-color: #222;
color: #666;
font-family: sans-serif;
font-size: 20px;
}
#header {
text-align: center;
background-color: #333;
width: 100%;
height: 20px;
padding: 10px 0;
}
#juicebox-content {
width: 100%;
}
</style>
<script type="text/javascript">
function doLayout() {
var winHeight, footerHeight;
winHeight = window.innerHeight ? window.innerHeight : $(window).height();
headerHeight = $('#header').outerHeight();
var newH = parseInt(winHeight) - parseInt(headerHeight);
$('#juicebox-content').height(newH);
}
$(document).ready(function () {
doLayout();
$(window).bind('resize', doLayout);
new juicebox({
containerid: 'juicebox-container'
});
});
</script>
</head>
<body>
<div id="header">
<span>Header content goes here</span>
</div>
<div id="juicebox-content">
<div id="juicebox-container"></div>
</div>
</body>
</html>Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.