You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Problem with embedded page
I created a simple navigation menu. I embedded the JB into the index page containing the nav. However when I open the page, I can quickly see the nav menu and then it disappears. I the noticed that the nav menu is now placed on the bottom of the page and some times invisible. Appreciate any help.
Ed
I would really need to see the web page you are referring to in order to troubleshoot your problem so please post back with a link so that I can see the problem for myself and hopefully help further.
In the meantime, the problem is most likely with the layout of your web page or the dimensions of your gallery.
A Juicebox gallery is essentially just a regular HTML <div> container (with the gallery as its content) whose dimensions are specified by the galleryWidth and galleryHeight entries in the embedding code.
The gallery will appear in your web page (at the specified dimensions) wherever you place the <div id="juicebox-container"></div> line in your web page's HTML code.
If you are currently using a percentage height for your gallery, then try setting galleryHeight to a fixed pixel value (such as '600px' instead).
This might help.
Please also see the note regarding Using Percentage Heights.
Also, if you are looking to have a fixed height header on your web page (perhaps containing your own custom navigation menu) and then have the gallery fill the remaining space (without any vertical scroll bars), then please see the View Resizable Gallery with Top Menu Example in the Embedding Multiple Examples support section.
You can view the source of the online example in your web browser and then copy/modify the code to suit your own needs.
I hope these notes point you in the right direction.
Thanks for your reply. One problem is solved: the Navigation menu now appears on the top. However, no matter how I configure gallery height and/or screen mode, the image does not resize in either PC or iPad. The latest settings are: GalleryWidth:100%, GalleryHeight 600px and Screen Mode: Auto. Here is a link to the page: http://vande.ch/gallery/index.html
Appreciate your help. Ed
Your web page currently has an incorrect <title> tag (the opening <title> tag is missing its closing > character) and this might be having a knock-on effect with other tags/containers on your web page.
Change:
<title=SouthAmerica 2018</title>... to:
<title>SouthAmerica 2018</title>You can check your web page for HTML errors (and then fix any reported) with the W3C Markup Validation Service.
Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.
Having said that, your gallery does seem to be responsive. If I decrease the width of my browser window, your gallery shrinks to fit within the new width (and the gallery images are scaled accordingly to avoid cropping).
Even though you say that you currently have a gallery height of 600px, your gallery currently uses:
galleryHeight : '100%',If you would like your gallery to have a height of 600px, use the following instead:
galleryHeight : '600px',I would still recommend that you use the Top Menu Example as a template. (Just remove the footer, replace the header content with your own custom navigation menu and swap the sample gallery for your own.)
Below is a single web page (with a header but no footer and no need for any external CSS files) which you can use as a template.
Just use code below as your gallery's 'index.html' file. All you really need to do is replace the content of the 'header' <div> with your own custom navigation menu and style it as you like via CSS. There is already some CSS for the 'header' <div> in the web page that you can modify (for example to change the header's height) if you like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
margin: 0px;
}
#header {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
height: 50px;
padding: 10px 0px;
text-align: center;
width: 100%;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb;
function doLayout() {
var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height(), 10);
var headerHeight = parseInt($('#header').outerHeight(true), 10);
var galleryHeight = windowHeight - headerHeight;
$('#wrap').height(galleryHeight);
if (jb) {
var galleryWidth = parseInt($('#wrap').innerWidth(), 10);
jb.setGallerySize(galleryWidth, galleryHeight);
}
}
$(document).ready(function() {
$(window).resize(doLayout);
jb = new juicebox({
containerId: "juicebox-container"
});
doLayout();
});
</script>
<title>Test</title>
</head>
<body>
<div id="header">
<span>Header</span>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>Thanks for all. I will follow our recommendations.
In the meantime I already corrected some items and added a <div class="content" style="height: 90%;"> which solved the problem with having to scroll up or down. Still working on it.
Ed
I'm glad you're making progress.
Hopefully my template file above will be useful.
Please let me know if you encounter any problems and I'll do my best to help you out.
Juicebox Support Forum → Juicebox-Pro Support → Problem with embedded page
Powered by PunBB, supported by Informer Technologies, Inc.