@leaminshull
Please see my reply to your query in this forum thread.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
@leaminshull
Please see my reply to your query in this forum thread.
Try creating an .htaccess file containing the following code and upload it to your website's root directory. (Please note that this requires an Apache web server.)
<IfModule mod_headers.c>
Header set Cache-Control "no-transform"
</IfModule>
This should prevent content modification on your site when visitors view your galleries over a 3G connection.
You could also contact your 3G provider to see if it is possible for content modification to be turned off on your account (although this will help only when you view other people's galleries and will not solve the problem of other people viewing your own galleries over their own 3G connections, which the solution above tackles).
Yes but the problem is that when a user is in the main thumbs page, he cannot go back to the menu page where he can choose among the galleries.
This is why I suggested preventing the thumbnail page from being displayed (so that problem never arises).
I realise that you may not want to do this but there is currently no way to have the Back Button displayed on the thumbnail page in Small Screen Mode.
If you would like to suggest this for a future version of Juicebox-Pro, please post it in the Feature Request thread. (It keeps all the suggestions together and ensures that they are not overlooked.)
One possible workaround would be to set screenMode="LARGE" (in JuiceboxBuilder's 'Customize -> General' section) to force the gallery to be displayed in Large Screen Mode in all browsers and on all devices. The Back Button will always be visible. (The thumbnails will be displayed on the same page as the main images but users can toggle the thumbnails on and off using the Thumbnail Button on the Button Bar.)
OK, no problem.
Thanks for letting me know.
(It should work fine, though. I've tested it myself.)
Unfortunately, I do not have a 3G connection/device on which to test but your menu and galleries display and function OK on my iPod Touch 4 iOS 6.1.3 (over a Wi-Fi connection) and also in desktop browsers (Firefox 25.0.1, IE11, Chrome 31, Safari 5.1.7 and Opera 17.0).
The problem is likely to be due to your gallery being loaded on your web page as soon as the page is displayed but the container for the gallery not being visible/displayed until the 'Photo Gallery' tab is selected and so Juicebox (when it is loaded) cannot determine what its size should be.
Try changing your gallery's dimensions from percentages to absolute pixel values to see if this makes a difference.
If it works but you would rather keep percentage dimensions, try loading the gallery on demand (rather than when the page is initially displayed).
Change your embedding code to the following:
<!--START JUICEBOX EMBED-->
<script src="h_i_slide/jbcore/juicebox.js"></script>
<script>
function loadGallery() {
new juicebox({
containerId : "juicebox-container",
baseUrl : 'h_i_slide/',
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(252,242,204,100)"
});
}
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
... and change line 237 from:
<li class="TabbedPanelsTab" tabindex="0"><a href="#gallery">Photo gallery</a></li>
... to:
<li class="TabbedPanelsTab" tabindex="0"><a href="#gallery" onclick="javascript: loadGallery(); return true;">Photo gallery</a></li>
Yes. That should be fine.
I am unable to replicate the problems you describe in test galleries of my own so the problems may be related to the non-gallery code on your web page.
Here are a couple of things to try which may help:
Try completely clearing your browser caches to ensure that your browsers are fetching and using the most recent versions of your gallery files from your web server.
If you want to keep expandInNewPage="TRUE", try setting useFullscreenExpand="FALSE" to see if this makes a difference.
Try checking the HTML code on your web page with the W3C Markup Validation Service and fix the errors reported. (There are currently over 300 errors reported but many are duplicates of others and it should hopefully not take too long to go through the list).
Your web page loads an old version of jQuery (v1.7.2). Try upgrading this to the current stable version (v1.10.2) and update any other out-of-date external JavaScript files. (If there is a conflict between one of your web page's JavaScript files and the 'juicebox.js' file, then updating the files in question may help.)
Even if these suggestions do not completely solve your problems, it would be wise to fix the errors on your web page and update the external JavaScript files. Once these have been done, we can eliminate them from the problem.
If the problem persists, then to check for a possible conflict between one of your web page's JavaScript files and the 'juicebox.js' file, try removing all the external JavaScript files from your page to see how the gallery reacts and then reintroduce them one-by-one until you find the source of the problem.
If you apply a large enough z-index to the <div class="header" role="banner"> container, your menu should work OK.
Try changing line 34 on your web page from:
<div class="header" role="banner">
... to:
<div class="header" role="banner" style="z-index: 9999;">
(Results from testing suggest that a 'z-index' value of anything over 500 should work OK.)
There are a couple of things you can do to speed up the initial loading of a gallery:
(1) reduce the file size of your images (by reducing either their resolution or quality), or...
(2) change the imagePreloading configuration option (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) from the default value of PAGE (which preloads all images on the current thumbnail page) to NEXT (which preloads only the next image in the gallery).
(There are other factors, such as the speed of your web server and internet connection, which you essentially have no control over.)
In Small Screen Mode, the navigation buttons on the thumbnail page navigate between thumbnail pages (rather than main images). When a thumbnail is selected, the corresponding main image is displayed and the navigation buttons then navigate between main images.
In Small Screen Mode, the Back Button (and Button Bar) are displayed only on main image pages (not on thumbnail pages).
When you link to your galleries, you can initially skip the thumbnail pages in Small Screen Mode by setting showSmallThumbsOnLoad="FALSE".
Further to that, you could prevent the user from ever entering a thumbnail page by setting showSmallThumbsButton="FALSE"
Both of these configuration options can be found in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section.
For more information on Screen Modes and how Juicebox adapts to different devices and screen sizes, please see here.
That's the thumbnail paging text. All your thumbnail dots are on the same (single) thumbnail page so the thumbnail paging text will always read '1 of 1'.
If you want to remove the thumbnail paging text, set showThumbPagingText="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section).
If you would like the image numbers (e.g. '1/4') to be displayed as part of the image captions, set showImageNumber="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Caption' section).
First of all, please make sure that you are using the latest version of Juicebox-Pro (v1.3.3) to ensure that any bugs which were present in previous versions but which have since been fixed are not contributing to your problem.
If necessary, please see the Upgrading Juicebox page for details.
If you continue to experience difficulties, then please post the URL to your gallery so that I can take a look for myself and hopefully help further.
All gallery files must be on the same domain (or subdomain) as the page containing the JavaScript embedding code due to the same-origin policy. Please see this web page for further details.
If you intend to embed your gallery into a page on parlamer.net, then your gallery files must also be on this domain (and not parlamer.fr).
The only way around this would be to load your gallery into an iframe, as documented as Option #2 here.
Try setting your gallery's height to a fixed value.
Otherwise, as you currently set your gallery's height to a percentage (100%) you may have to implement the suggestion noted in the Using Percentage Heights support section.
Also, as your gallery's dimensions are percentages (percentages of the gallery's parent container), the size of the gallery will be partly determined by the size and shape of the user's browser window. As you have no control over this, you essentially have no control over the absolute size and shape of your gallery. By default, Juicebox will scale images within the available image area as large as possible but, depending on the shape of the image area, there may be space to the left and right (or to the top and bottom) of the main image.
You could fix your gallery's dimensions by setting your galleryWidth and galleryHeight to absolute pixel values in your gallery's embedding code.
Otherwise, you could also fill the image area by setting imageScaleMode="FILL" (although images will be cropped if they do not have the same aspect ratio as the image area within the gallery).
However, setting your gallery's height to a fixed value may be enough to provide a suitable solution to your problem.
It should hopefully be relatively easy to implement the Responsive Multi-Level Menu by using the template in my first post above, loading the required Responsive Multi-Level Menu external CSS and JavaScript source files in the <head> section of the page, replacing the contents of the 'menu' <div> with the required Responsive Multi-Level Menu entries and adding the snippet of JavaScript code (from the Responsive Multi-Level Menu sample HTML files) before the closing </body> tag.
You can also reduce the width of the 'menu' <div> so that the Responsive Multi-Level Menu icon does not take up too much screen real estate.
We recommend the use of the HTML 5 Doctype (please see here for details) for which the 'type' attribute is optional.
Please see this web page for details:
The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is "text/javascript".
Your web page uses the XHTML 1.0 Doctype which is why the 'type' attribute is required for validation.
All 'index.html' pages generated by JuiceboxBuilder-Pro and Juicebox plugins use the HTML 5 Doctype.
Try validating a 'index.html' page generated by JuiceboxBuilder-Pro and you should see that it validates correctly without the <script> tag having a 'type' attribute.
However, this will not be the reason for your problem.
All modern browsers will be able to correctly process the contents of a <script> tag without it having a 'type' attribute.
It sounds like your friends with mobile devices may be using 3G connections rather than Wi-Fi to view your galleries.
If so, then please see this FAQ for details:
Why can't I view my gallery on a 3G mobile connection?
Create an .htaccess file containing the following code and upload it to your website's root directory. (Please note that this requires an Apache web server.)
<IfModule mod_headers.c>
Header set Cache-Control "no-transform"
</IfModule>
This should prevent content modification on your site when visitors view your galleries over a 3G connection.
Within a gallery's embedding code, you can change the size of the gallery container (via the galleryWidth and galleryHeight configuration options) but not where it appears in the embedding web page.
The positioning of a gallery within a web page is dependent entirely on the code of the web page itself (and where in the web page you paste the embedding code).
If you post the URL to your web page I can take a look and perhaps suggest a way to move your gallery further up your page.
Please see this FAQ to see if it helps:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
I'd like to add a logo to the right of the home icon at the top left. How can I do that?
You could use an image as the Gallery Title and center it horizontally in your gallery by setting galleryTitleHAlign="CENTER". Please see the Adding a Logo support section for further details.
Alternatively, you could use an image as the Back Button itself by using settings such as:
backButtonPosition="TOP"
backButtonUseIcon="FALSE"
backButonUrl="http://www.example.com/"
backButtonText="<img src="logo.png" width="100" height="50" alt="logo" />"
If using JuiceboxBuilder-Pro to create your gallery you could just enter something like the following into the backButtonText field (JuiceboxBuilder-Pro will escape the necessary characters for you):
<img src="logo.png" width="100" height="50" alt="logo" />
Second option is to have my logo as a background but repeated like is now. I've not see the repeat option for the bg in the builder. Is it possible?
It is not possible to tile/repeat an image as a gallery background using the Background Image Options.
You would need to set your gallery's background to be transparent (setting backgroundColor: 'rgba(0,0,0,0)' in the embedding code) and set your background image on your embedding web page via HTML and CSS using the CSS background-repeat property.
This may be possible but might be difficult to implement cleanly (especially across different devices).
Try this as an example:
(1) Download the Multi-Level Push Menu zip file from this web page.
(2) Extract the zip file to your hard drive.
(3) Create two sample galleries with JuiceboxBuidler-Pro and name the gallery folders 'gallery1' and 'gallery2'.
(4) Place the complete gallery folders into the 'MultiLevelPushGallery' folder (from the extracted zip file).
(5) Create a new HTML file named 'main.html' using the code below.
(4) Place the 'main.html' file in the 'MultiLevelPushGallery' folder (alongside the gallery folders).
(5) Open the 'main.html' file in a browser and click the Back Button to see the menu system in action.
There are some problems with this which would need to be ironed out (such as the need to click the Back Button twice after selecting a new gallery to close the menu) but I hope it points you in the right direction.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Level Push Menu - Demo 1</title>
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels" />
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/mlpushmenu.js"></script>
</head>
<body>
<div class="container">
<!-- Push Wrapper -->
<div class="mp-pusher" id="mp-pusher">
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<h2 class="icon icon-world">Galleries</h2>
<ul>
<li><a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a></li>
<li><a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a></li>
</ul>
</div>
</nav>
<!-- /mp-menu -->
<div class="scroller"><!-- this is for emulating position fixed of the nav -->
<div class="scroller-inner">
<script src="gallery1/jbcore/juicebox.js"></script>
<script>
function loadGallery(base) {
jb = new juicebox({
baseUrl: base,
backButtonPosition: 'TOP',
backButtonUrl: '#',
backButtonUseIcon: 'TRUE',
containerId: 'juicebox-container'
});
jb.onInitComplete = function() {
var backElements = document.getElementsByClassName('jb-go-back-icon');
var backButton = backElements[0];
new mlPushMenu(document.getElementById('mp-menu'), backButton);
};
}
$(document).ready(function () {
loadGallery('gallery1/');
});
</script>
<div id="juicebox-container"></div>
</div><!-- /scroller-inner -->
</div><!-- /scroller -->
</div><!-- /pusher -->
</div><!-- /container -->
</body>
</html>
I have just noticed you have no commas separating the backgroundColor from the baseUrl in your gallery's embedding code.
(I copied and pasted your code and changed only the paths.)
I have now corrected the code in my post above.
If it still does not work, please post the URL to the web page into which you are trying to embed your gallery so that I can take a look and help further.
As your complete gallery folder has been uploaded to http://galerie.parlamer.fr/yorktown/ your embedding code should look like this (there should be no 'galerie' in the paths):
<!--START JUICEBOX EMBED-->
<script type="text/javascript" src="/yorktown/jbcore/juicebox.js"></script>
<script type="text/javascript">
new juicebox({
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(34,34,34,1)",
baseUrl: '/yorktown/'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
The link you posted comes up with a 'Page not found' message.
However, it sounds like your current WordPress theme uses the CSS border-box model which currently breaks the Juicebox layout. (This will be fixed in the next version of Juicebox.)
To implement the fix manually, open the 'wp-juicebox/jbcore/classic/theme.css' file in a plain text editor and add the following code to the file:
.juicebox-gallery h1, .juicebox-gallery h2, .juicebox-gallery h3, .juicebox-gallery h4, .juicebox-gallery div, .juicebox-gallery p, .juicebox-gallery span{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
Hopefully this will solve your problem.
Unfortunately, this is due to a known bug which has already been addressed and will be fixed in the next version of Juicebox-Pro. (The Back Button icon should be the same color and have the same opacity as the Button Bar, set via the buttonBarBackColor configuration option.)
As it is currently not possible to set the Back Button icon's background to be transparent, you could perhaps set it to be white and opaque instead using buttonBarBackColor="rgba(255,255,255,1)".
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.