This bug has now been fixed in v1.2.0. Please see this Juicebox Blog entry for further details.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
This bug has now been fixed in v1.2.0. Please see this Juicebox Blog entry for further details.
This bug has now been fixed in v1.2.0. Please see this Juicebox Blog entry for further details.
This bug has now been fixed in v1.2.0. Please see this Juicebox Blog entry for further details.
This bug has now been fixed in v1.2.0. Please see this Juicebox Blog entry for further details.
Juicebox-Pro does not feature lightbox functionality but you could incorporate a lightbox into your gallery and have each image displayed in the lightbox when clicked by following the instructions below.
(1) This example uses Shadowbox so you would need to download and include the Shadowbox CSS and JavaScript files on your gallery's HTML page as documented here.
(2) This example also uses jQuery so would need to download and include the jQuery JavaScript file on your gallery's HTML page.
(3) Set imageClickMode="OPEN_URL" in your gallery's XML file (so that the corresponding linkURL is opened when a main image is clicked).
(4) Set every linkURL in your gallery's XML file to point to a JavaScript function (see Step #5 below) in your gallery's HTML page: linkURL="javascript: func();"
(5) Set every linkTarget in your gallery's XML file to '_self': linkTarget="_self"
(6) Set up the JavaScript function (in this example named func()) in the gallery's HTML page to use the Juicebox-Pro API (specifically the getImageIndex() and getImageInfo() methods) to determine the URL of the image to open in Shadowbox.
(7) Open the image in Shadowbox using the JavaScript method documented here.
Your gallery's HTML page would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="This is a Juicebox-Pro Gallery. Get yours at www.juicebox.net" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css">
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
var jb;
$(document).ready(function () {
jb = new juicebox({
containerId : 'juicebox-container'
});
});
function func() {
var index = jb.getImageIndex();
var info = jb.getImageInfo(index);
var url = info.imageURL;
var title = info.title;
Shadowbox.open({
content: url,
player: 'img',
title: title
});
}
</script>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>... and a single <image> entry in your gallery's XML file would look something like this:
<image imageURL="images/wide.jpeg"
thumbURL="thumbs/wide.jpeg"
linkURL="javascript: func();"
linkTarget="_self">
<title><![CDATA[Title text]]></title>
<caption><![CDATA[Caption text]]></caption>
</image>@pedro.pissarra
This is not possible using JuiceboxBuilder-Pro. You would need to create your own composite images in an image manipulation program such as Photoshop prior to feeding them to JuiceboxBuilder-Pro and your gallery would have only one thumbnail per composite image (not one thumbnail for each image within a composite image).
There is no way to set unique captions for each image within the Juicebox Photoshop Plugin's interface.
The plugin automatically uses the image's filename for the Juicebox <title> and leaves the Jucicebox <caption> empty.
If you wish, you can change this default behavior by opening the plugin's 'Juicebox.jsx' file in a plain text editor and modifying lines 544 and 545. Please note that these line numbers refer to the current version of the plugin (v1.1.1).
If you plan to edit the 'Juicebox.jsx' file, this Photoshop JavaScript Scripting Reference might come in useful.
Alternatively, you could edit the gallery (after it has been created by the plugin) in JuiceboxBuilder-Pro to add titles and captions to your images or you could edit the gallery's XML file ('config.xml') manually in a plain text editor and add your titles and captions there.
Do you have any forwarding or redirecting active on your domain?
WP-Juicebox uses the WordPress plugins_url method to determine the path to the 'jb-config.php' file so it should return the correct path and there should ordinarily be no issues, as long as WordPress sees the same domain name that you use to access your WordPress installation.
Also, I would try temporarily disabling all other plugins to see if this makes a difference. If this works, re-activate each plugin one by one until it fails and you find out which plugin is causing the problem.
I am glad you have found a solution to your problem.
Thank you for posting back to let me know.
There should be no need to change the permissions on the 'wp-juicebox' folder itself (or any files contained within it).
Your defaults of 755 (for the 'wp-juicebox' folder) and 644 (for the 'jb-config.php' file) are fine.
The first thing I would try is to reinstall WP-Juicebox from scratch to ensure that all the necessary files are present and correct on your web server (just in case something went wrong with your initial upload and a file is missing or corrupt).
The current version of WP-Juicebox (v1.1.1) can be downloaded from this web page: http://www.juicebox.net/support/wp-juicebox/
If you continue to get this error when clicking the Juicebox icon on the 'Visual' toolbar, try changing the method of entry to 'HTML' and click the 'Add Juicebox Gallery' button there to see if you still get the error message.
Try giving your <div class="menu"> a high 'z-index' value via CSS so that it is stacked on top of all other HTML elements on your web page (including your Juicebox glalery).
Try adding the following code to the CSS section in the <head> of your web page:
.menu {
z-index: 9999;
}The reason that the content of your page requires a scrollbar is that your gallery has a height of 100% and your header and footer have finite heights. (100% + header height + footer height > browser window height).
Possible solutions would be to either:
(1) Add the following code to the <head> section of your page to allow a vertical scrollbar to appear:
<style type="text/css">
body {
overflow: auto !important;
}
</style>... or:
(2) Define your gallery's height as an absolute pixel value rather than as a percentage which will also allow a vertical scrollbar to appear.
... or:
(3) Implement the Using a Resizable Gallery with a Header solution, whereby you can specify absolute heights for your header and footer and the Juicebox gallery will occupy the remainder of the browser window (no matter what size it is) without the need for a vertical scrollbar.
It looks like incorrect MIME types on your web server might be the cause of your problem.
If you view my test gallery's XML file in a browser, you can see the code itself: http://juiceboxgallery.appspot.com/config.xml
If you view your gallery's XML file in a browser, the browser tries to render the page as if it were HTML: http://www.abbybedford.com/photography/config.xml
Also, If you view the first image in my test gallery directly in a browser, you can see the image: http://juiceboxgallery.appspot.com/images/wide.jpeg
If you view the first image in your gallery directly in a browser, the browser displays the source of the image: http://www.abbybedford.com/photography/images/wide.jpeg
Check with your web host to see if they can help you with this problem.
I created a test gallery using HTML 4.01 Transitional because that is the Doctype that you were using at the time and having a problem with and I wanted to show that using this Doctype can work OK.
It is not essential to use HTML 5. As long as your web page validates correctly, you can use whatever Doctype you like. As far as I am aware, there are no known issues with any Doctype in any browser as long as the code validates OK. However, if you are starting a web site from scratch, we recommend HTML 5 because it is the way of the future and has a very short Doctype Declaration which is difficult to get wrong: <!DOCTYPE html>
So, once again, I want to build a site in HTML5 and use Juicebox Lite embedded with it. Is it possible ?
Yes.
You recommand HTML5 and you give examples with HTML 4.01. Why ?
Perhaps the examples on the site should all use HTML 5 but they all use recognised Doctype Declarations, contain valid code and the galleries all work fine.
It would be possible to point a thumbURL towards a blank image (which does not visually represent the corresponding main image) but it is not possible to have Juicebox skip over a thumbnail and still have the main image displayed.
The Thumbnail Button in your gallery has a semi-transparent background when I view your gallery in IE9, just like in other browsers (see this screenshot [Screenshot removed.]). (The screenshot was taken whilst your gallery used the HTML 4.01 Transitional Doctype Declaration and the browser window was intentionally made small to ensure that there was content behind the button.)
Make sure Compatibility View is switched off.
You can name the Juicebox object anything you like.
Here is an example page using the Juicebox API (with the Juicebox object named 'abc') which contains links to show and hide the gallery using the API method showGallery().
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="This is a Juicebox-Pro Gallery. Get yours at www.juicebox.net" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script src="jbcore/juicebox.js"></script>
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var abc;
$(document).ready(function () {
abc = new juicebox({
containerId : 'juicebox-container',
galleryWidth: '400',
galleryHeight: '400'
});
});
function show() {
abc.showGallery(true);
}
function hide() {
abc.showGallery(false);
}
</script>
</head>
<body>
<div id="click">
<a href="#" onclick="javascript: show();">Click here to show gallery.</a>
<a href="#" onclick="javascript: hide();">Click here to hide gallery.</a>
</div>
<div id="juicebox-container"></div>
</body>
</html>Currently, your gallery does not display correctly in IE9 because your gallery's HTML index page uses the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Instead, use the full HTML 4.01 Doctype Declaration as documented on this web page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">You can use <html> code within your captions to add an anchor <a> tag to create a link.
If using JuiceboxBuilder-Pro to create or edit your gallery, you can enter the code directly into a caption text field on the 'Images' tab, such as:
<a href="http://www.example.com/">Click here</a>If editing your gallery's XML file manually in a plain text editor, you will need to enclose your caption within CDATA tags so it will look like this:
<caption><![CDATA[<a href="http://www.example.com/">Click here</a>]]></caption>Thank you for reporting.
I think the secret to avoiding this overlapping of gallery elements is simply to keep the gallery title short.
However, I will notify the developers and investigate further.
I have just created a Juicebox-Lite v1.1.1 test gallery using the HTML 4.01 Transitional Doctype Declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">... on the gallery's HTML index page (the page containing the embedding code for the gallery) and the gallery displays correctly (including all titles and captions) in IE9 on my PC. It should not be essential to use the HTML5 Doctype Declaration but a Doctype Declaration of some description should be used.
If you could post the URL to a gallery which exhibits the behavior you describe in your first post, I would be happy to take a look and investigate further.
All web pages must use a Doctype Declaration in order for the browser to know what set of standards the page's code should adhere to.
Please see this FAQ: My gallery looks strange in Internet Explorer 9. Why? and this note about Juicebox and Doctypes.
We recommend using the HTML5 Doctype <!DOCTYPE html>, but whatever Doctype you use, you can check that your web page's code is valid for that particular Doctype with the W3C Markup Validation Service. If any errors are reported, they should be fixed in order for your web page to be rendered with greater consistency across different browsers.
If you wish to have a resizable gallery with a header without the need for a scrollbar on the page, please see the Using a Resizable Gallery with a Header section of the Juicebox Embedding Guide. There is an online example (View Resizable Gallery with Top Menu Example) which has a header, a footer and a resizable gallery which takes up the available space in between. You can view the source of the page in your browser and modify the code to suit your needs.
Thank you for providing the screenshots. They certainly confirm what you are describing but I am still unable to see the problem on my own PCs.
I've just viewed your gallery again on monitors with resolutions of 1280 x 1024 and 1280 x 800 and, in both cases, in a maximized IE9 window, your main image increases in size when I hide the thumbnails.
However, I will log a bug report and hopefully one of my colleagues will be able to replicate the problem.
I have just viewed your gallery in IE9 (9.0.8112.16421) on my PC (Windows 7 SP1 x64) and the main images are enlarged when the thumbnails are hidden (just like in other browsers).
If it works on my PC, then there would appear to be no problem with the gallery itself.
The effect should be more obvious in a browser window which is much wider than it is tall. Try resizing your browser window to such an aspect ratio to see if the main images really do not increase in size when the thumbnails are hidden or if it is perhaps due to the current aspect ratio of your browser window.
Also, you could try clearing your browser's cache just to make sure that your browser is using the current gallery files on your web server (which seem to work find when I view the gallery in IE9 on my PC).
It looks like the problem may be related to the customizations you have made to the 'theme.css' file in your gallery.
Try using the original 'theme.css' file from the Juicebox-Pro v1.1.1 'jbcore/classic/' folder.
Do you still see the 'autopx' entries using the unmodified 'theme.css' file?
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.