You are not logged in. Please login or register.
Active topics Unanswered topics
Juicebox v1.5.1 Released!
Search options (Page 215 of 235)
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?
Differences in how your web page is rendered in different browsers can often be attributed to HTML errors on the page.
Try validating your web page with the W3C Markup Validation Service and fix the errors reported.
You can also check the CSS on your page with the W3C CSS Validation Service.
Once your web page validates, it should be rendered with greater predictability and consistency across different browsers.
There does not look to be many errors on the page (and most seem trivial) but there is a stray </script> tag.
If the problem still occurs after fixing the errors, then at least we can eliminate the HTML errors a being a possible cause.
Also, try clearing your browser's cache before reloading the gallery.
For the record, your navigation menu functions correctly when I view your web page on my iPod Touch 4.
In the style declaration that comes from JB in the gallery, it outputs the following (at least for mine):
<img class="jb-thm-thumb-image" src="http://url.com/image.jpg" style="display:block;position:absolute;padding:0;left:0px;top:0px;width:autopx;height:autopx;">
I do not see this in my own Juicebox-Pro v1.1.1 galleries.
I know you have said you are using 'the current JuiceBox build' but could you please confirm that your gallery is, indeed, a Juicebox-Pro v1.1.1 gallery? It might also help to know which gallery settings you use.
Could you please post a URL to your own gallery which shows this so that I can take a look and investigate further? Thank you.
Try giving your navigation menu <div> a high z-index value (e.g. '9999') via CSS so that it is stacked on top of all the gallery elements on the page, e.g.:
<style type="text/css">
#CSSMenu1_container {
z-index: 9999;
}
</style>
I currently have the sv gallery installed in my admin area for my site
Are you referring to svManager? If so, the current version of svManager (v1.8.3) supports Juicebox galleries and you can upgrade svManager to use your Juicebox-Pro files by following the instructions here.
You can download the latest version of svManager using the download link from your purchase email. If you cannot find your purchase email or your link has expired, please fill in this Upgrade Request Form to request a new download link.
I know very little html and I can create my galleries on my desktop using the juicebox desktop application but I have no idea how to get them to show up in my site.
The Juicebox Embedding Guide has instructions on how to embed a Juicebox gallery (created on your computer) into an existing web page alongside other content.
Try validating the code on your web page with the W3C Markup Validation Service and fix the errors reported.
Once the code on your web page validates, it should be rendered with greater predictability and consistency across different browsers.
Also, as your gallery's dimensions are defined using percentages, make sure that all the parent containers of your gallery have heights specified via CSS.
I am glad you have solved your problem. Thank you for posting back to let me know.
I expect Internet Explorer is displaying the mixed content security warning as a result of the URLs for the gallery's images being returned from the internal Flickr API search as 'http://' rather than 'https://'.
Unfortunately, I do not think there is a solution to this problem (other than disabling the warning message in the browser's settings or using local images listed in an XML file rather than Flickr).
This user in the Flickr forum seems to be experiencing the same problem with no sign of a solution: http://www.flickr.com/groups/api/discus … 610086610/
This meta 'description' can be removed by opening your gallery's 'index.html' in a plain text editor and removing the line:
<meta name="description" content="This is a Juicebox Gallery. Get yours at www.juicebox.net" />
Alternatively, you could change the 'content' to something more appropriate to your own web site.
Thank you for bringing this to our attention. I have notified the developers.
Thank you for providing the URL to your gallery.
Your gallery displays correctly when I view it in Mobile Safari on my iPod Touch (the gallery displays OK when I tap on the Splash Page and the 'Config XML file not found' message is not displayed) so it should also display correctly on your iPhone.
Try clearing your browser's cache before reloading the gallery to see if this makes a difference.
It may have something to do with your page's Doctype Declaration.
Your web page uses XHTML 1.0 Strict which does not allow the use of the <iframe> tag.
Try changing your web page's Doctype to XHTML 1.0 Transitional instead. This may make a difference.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Also, I notice when viewing your page in Firefox that your #content <div> (one of the parent containers of your <iframe>) has a very small height. Check that all parent containers of your <iframe> have a height set via CSS and that the height is appropriate.
Your gallery displays OK on my iPod Touch so should also display OK on your iPhone.
Try clearing your browser's cache before reloading your gallery.
Posts found: 5,351 to 5,375 of 5,851
