You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Try removing the line:
<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" />... from your http://meowcreative.businesscatalyst.co … index.html page.
It looks like the CSS is not required (as the page contains only the gallery and no other content) and removing the CSS will speed up the loading of the page and ensure that there are no CSS conflicts between the 'ModuleStyleSheets.css' file and the gallery itself.
Unfortunately, the Thumb Paging Text is hardcoded within the 'juicebox.js' JavaScript file which is obfuscated and cannot be modified.
The top of the gallery is in line with the top of your left content. However, in a browser window with a large height, the main image is vertically centered within the gallery (with space above and below the main image).
Rather than have your gallery's height expressed as 100%, try setting it to an absolute pixel value, no larger than you need to accommodate your images.
In this test, the gallery resizes, but starts to cut into the image (right and bottom) when resized horizontally on a wide image.
http://www.qr-presse.eu/ritz-html-embed3.html
This is because part of your gallery (to the right and bottom) spills over beyond the bounds of the browser window and is no longer visible.
Your gallery (and container div) both have a height of 100% so, under normal circumstances, the gallery should fill the height of the browser window. However, you have introduced margins which push the gallery down (truncating the gallery at the bottom).
In this test, the gallery will not resize vertically inside the 'inline' container div.
http://www.qr-presse.eu/ritz-html-embed4.html
Please see the note for Using Percentage Heights in the Embedding Guide.
In your test, the gallery takes up 70% of the browser window height (though this is not explicitly specified anywhere).
Change:
<DIV ID="item1">... to:
<div id="item1" style="height: 70%;">Your gallery at http://www.peterotoole.me/phone/design.html includes the following code:
<script src="http://meowcreative.businesscatalyst.com/phone/home_page_mobile/jbcore/juicebox.js"></script>baseUrl : 'http://meowcreative.businesscatalyst.com/phone/home_page_mobile/',All gallery files should be on the same domain or subdomain as the page into which the gallery is being embedded due to the JavaScript same origin policy.
It looks like you have uploaded your gallery folder to your www.peterotoole.me domain so just change the paths in your embedding code as follows and your gallery should display fine.
<script src="http://www.peterotoole.me/phone/home_page_mobile/jbcore/juicebox.js"></script>baseUrl : 'http://www.peterotoole.me/phone/home_page_mobile/',Alternatively, you could use relative paths within your embedding code as follows:
<script src="home_page_mobile/jbcore/juicebox.js"></script>baseUrl : 'home_page_mobile/',There is a tutorial on how to convert images to grayscale using JavaScript on this web page.
However, I do not think that there is any way to integrate it into Juicebox-Pro to achieve your goal of only having the selected thumbnail in color.
Please see the Converting a SimpleViewer Gallery section of the Creating Galleries page for further information.
Try adding the following code to the end of your gallery's 'jbcore/classic/theme.css' file:
.jb-idx-thumb {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.jb-thm-thumb-selected {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}Your Juicebox-Pro gallery is inside your #pageDiv container which has been given a fixed height of 950px.
Your Juicebox gallery has a height of 100% (of its parent container) so 100% of 950px is 950px which results in your gallery having a fixed height of 950px (regardless of the height of the user's browser window).
Try changing the height of your #pageDiv container to a percentage (such as 100%) and your gallery should dynamically resize in both dimensions.
The 'Expand' button is not being displayed because your galleries are being embedded in an iframe. The 'Expand' button is automatically disabled in galleries embedded within iframes. This is documented in the Using an iframe section of the Embedding Guide.
Instead of targeting an iframe with individual galleries, try embedding all the galleries on your page using the baseUrl technique (documented here) and switch between the galleries using the Juicebox-Pro API showgallery() method.
If you are following the Embedding with Adobe Muse instructions, then it is recommended that you upload your entire gallery folder (not just the contents) to the same directory on your web server that you upload your Muse files to.
It does not actually matter where on your web server you upload your gallery folder to as long as you know where it is and that the two paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl) are both correct.
If you continue to experience difficulties, please post the URL to the web page into which you are trying to embed your gallery so that I can help further.
Juicebox-Pro supports a Back Button (which you can use to link to any URL you wish).
The Back Button configuration options can be found here.
Please note that the Back Button can be positioned TOP, OVERLAY or NONE (but cannot be positioned at the bottom of the gallery) and is available only in Juicebox-Pro galleries (and not in Juicebox-Lite galleries).
Alternatively, you could overlay an HTML hyperlink on top of the gallery using HTML and CSS, such as the following in the <body> section of your page:
<div id="overlay" style="position: absolute; bottom: 10px; left: 10px;">
<a href="../index.html">Click here to return to home page</a>
</div>You can justify the titles and captions to the right-hand margin of the caption area by setting captionHAlign="RIGHT" in your gallery's XML file.
However, please note that this is a Juicebox-Pro configuration option which is not available in Juicebox-Lite galleries.
I am glad that you have resolved your problem.
Thank you for posting back to let me know.
Rather than just double-clicking the .mxp file, right-click the link for your Adobe Extension Manager, select 'Run as administrator' and then go to 'File -> Install Extension' from the drop-down menu at the top and navigate towards the .mxp file.
Otherwise, you could download the .zip file for Photoshop CS2 or CS3 and follow the instructions for installing it on this page.
The plugin files are exactly the same when extracted, they are just packaged in a .zip file for CS2 or CS3 instead of a .mxp file for CS4 or higher.
You can link the main images to individual unique URLs by setting imageClickMode="OPEN_URL" in your gallery's XML file.
If using JuiceboxBuilder-Pro to create or edit your gallery, this configuration option can be found in the 'Customize -> Main Image' section.
When the user clicks a main image, the corresponding linkURL will be opened (in the specified linkTarget window) in the browser.
linkURLs and linkTargets can be entered for each image on the 'Images' tab.
All three of your galleries seem to be working fine and I do not see the 'Config XML File Not Found.' message in any of them.
It is possible that your client's browser has cached a non-working version of your gallery (before you solved the problem).
Try asking your client to clear their browser's cache to see if this makes a difference.
When creating a gallery with JuiceboxBuilder-Pro, try creating an empty folder somewhere on your hard drive before creating your gallery and then save the gallery to that folder.
Save each new gallery you create to a new empty folder.
Try validating your page with the W3C Markup Validation Service and fix the errors reported so that we can be sure that any HTML errors on your page are not contributing to your problem.
Here is the same gallery again, this time embedded in html as recommended by JuiceBox.
http://www.qr-presse.eu/e/ritz-html-embed.html
As you can see the gallery doesn't resize at all.
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).
With this in mind, you could perhaps try using the baseUrl method of embedding (instead of an iframe) and use a layout which would allow this to happen.
Perhaps you published your gallery to a folder which already had restrictive permissions in place.
Check to see if this might be the reason for your problem.
The 'Juicebox' branding is appearing in the bottom right of the gallery. Isn't that removed when upgraded to 'Pro'?
Yes. The Juicebox badge/link at the bottom right corner of the gallery is present only in Juicebox-Lite galleries and is not present in Juicebox-Pro galleries.
Try clearing your browser's cache before reloading the gallery to ensure that your browser is not hanging onto and using older versions of your gallery files.
If you still see the Juicebox badge/link after clearing your browser's cache, then your gallery's 'jbcore' folder has not successfully been replaced with the Pro 'jbcore' folder.
If you are in any doubt as to whether or not your gallery's 'jbcore' folder is being overwritten, try deleting it from your web server first before uploading the Pro 'jbcore' folder in its place.
Please post the URL to your gallery so that I can take a look.
In the meantime, if you have made any modifications to your gallery, you may need to clear your browser's cache before reloading your gallery to ensure that your browser is not hanging onto and using older versions of your gallery files.
After editing your gallery and saving the changes, try clearing your browser's cache before reloading the gallery to ensure that your browser is not hanging onto and using older versions of your gallery files.
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look.
Here are a few other suggestions to try.
(Unfortunately, I am unable to replicate the problem that you are currently experiencing so I cannot try the following suggestions myself to know whether or not theyu will help in your scenario.)
(1) Try changing line 148 of the 'wp-juicebox/config.php' file to the following:
echo $new_dom_doc->saveXML($new_settings_tag);(2) Try adding the following on line 147 of the 'wp-juicebox/config.php' file:
ob_clean();(3) Try removing line 3 of the 'wp-juicebox/config.php' file:
header('Content-type: application/xml');If any of the above work, please post back to let me know.
Thank you.
If you resize the window with a vertical image active, then open a horizontal, the horizontal image is cut off the the right.
Happens in Firefox and Safari.
I do not see this in Firefox 19.0 or Safari 5.1.7 on my PC.
Try clearing your browser's cache to make sure that your browser is not hanging onto and using any older gallery files.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.