You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
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)".
@Menti
It looks like you have already successfully upgraded WP-Juicebox from Juicebox-Lite to Juicebox-Pro.
When I view your gallery, the Juicebox logo is no longer present (indicating that the gallery is Pro).
If you still see the Juicebox logo in your gallery, try clearing your browser's cache before reloading your web page to ensure that your browser is fetching and using the most recent versions of your gallery files from your web server.
how can I integrate this menu (the little green square) in my gallery?
It would not be possible to actually integrate your menu within a gallery itself but you could display the menu on the same web pages as a gallery, by either overlaying the menu on top of the gallery or by displaying it to the side of the gallery.
Take a look at the Embedding Multiple Galleries support section.
What you are looking to achieve might best be represented by the View Resizable Gallery with Side Menu Example.
You can view the source of the example in your browser and copy/modify the code to suit your own needs (replacing the content of the side menu with your own menu).
An alternative solution (using just a single HTML page) would be to use the following template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
margin: 0px;
background-color: #222222;
}
#menu {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
float: left;
padding: 20px 0px 0px 10px;
text-align: center;
height: 100%;
width: 100px;
}
#menu a {
color: #666666;
text-decoration: none;
}
#wrap {
float: right;
height: 100%;
}
</style>
<script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
<script type="text/javascript">
function doLayout() {
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var menuWidth = $('#menu').outerWidth();
var galleryHeight = parseInt(windowHeight);
var galleryWidth = parseInt(windowWidth) - parseInt(menuWidth);
$('#wrap').height(galleryHeight);
$('#wrap').width(galleryWidth);
}
function loadGallery(base) {
new juicebox({
baseUrl: base,
containerId: 'juicebox-container'
});
}
$(document).ready(function () {
doLayout();
$(window).on('resize', doLayout);
loadGallery('gallery1/');
});
</script>
<title>Test</title>
</head>
<body>
<div id="menu">
<a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>
<br />
<a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>To see how this works, create a couple of test galleries and name the gallery folders 'gallery1' and 'gallery2'.
Next, create an HTML file with the code above and put the file in the same directory as the 'gallery1' and 'gallery2' folders and open the HTML file in a browser.
All you would need to do to customize this to your own requirements would be to replace the content of the 'menu' div with your own menu.
You can create as many galleries as you like and name the folders whatever you like. Just keep each gallery in its own folder keep all the folders in the same directory, alongside the HTML file. The links to each gallery from within your menu would look something like the links in the code above (using the loadGallery function to load the selected gallery using the baseUrl method).
If you edit you theme's 'shortcode.css' file in a plain text editor and simply remove '!important' from the CSS rule, it should work OK.
This will keep the CSS code in place (for any other tables in your web page) and it is unlikely that any other CSS code (from any other plugins) will override it (which is what the '!important' signifier would prevent from happening).
Removing the code also works as there are actually no other tables currently on your web page that the code would apply to. Also, all the code does is set a background color for certain table cells so removing the code completely will not break the layout of your web page. It is safe to remove.
If you are using BulletProof Security, then this will almost certainly be the cause of your problem and you will need to use a skip/bypass rule as above. (I have tested this myself and it works fine.)
Please note that if your WordPress installation is in a subfolder, then you will need to add your WordPress subfolder name to the path in the rule as follows.
# Juicebox skip/bypass rule
RewriteCond %{REQUEST_URI} ^/WordPress_subfolder_name/wp-content/plugins/wp-juicebox/ [NC]
RewriteRule . - [S=13]You may also like to take a look at this WordPress forum thread which deals with the same problem.
Solved this the next day, but forgot to come back and update.
No problem. I'm glad you were able to resolve your problem.
Thank you for posting back to let me know.
It looks like your problem is caused by a CSS rule on line 982 of your 'wp-content/themes/ElegantBusiness/css/shortcode.css' file:
tbody tr:nth-child(2n+1) td {
background:#EBEBEB !important;
}This code will apply to all tables on your web page, including tables within your Juicebox gallery (used within the caption and thumbnail areas). Juicebox has no option but to inherit such general CSS rules.
If you apply this CSS rule to only those elements on your web page which require it through use of ids or classes, the problem should be resolved.
This is normal and perfectly OK.
The sourcePath is used only by JuiceboxBuilder-Pro (locally on your own computer) when editing a gallery.
It is not used by the gallery itself when uploaded to a web server.
For example, if you had previously added a watermark to your images and choose to remove the watermark, JuiceboxBuilder-Pro would need to know the path to the original source images on on your hard drive in order to rebuild the gallery without the watermark.
I understand your request but thought that I should point out that Juicebox currently supports and displays animated GIFs so perhaps you could use this to your advantage.
The method you describe above would that relate to content managing the gallery within the Umbraco CMS.
The baseUrl method of embedding would be an alternative solution to using the fully integrated 'SimpleViewer Package.
You would upload your Juicebox gallery to your web server using a dedicated FTP program such as Filezilla (outside of Umbraco) and then copy and paste the embedding code into your web page (within the Umbraco interface).
Perhaps there is a container elsewhere on your web page (maybe transparent) which is overlapping your gallery and obscuring some of its controls. Check your web page using a browser's developer tools (F12) to see if this is a possibility.
Also, you could try validating your web page with the W3C Markup Validation Service to see if there are any HTML errors on your page which may be causing problems. If any errors are reported, they should be fixed.
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.
I am not familiar with Umbraco but if you have the ability to upload files and folders to your web space and can add custom HTML code to a web page, then you should be able to embed a Juicebox gallery using the baseUrl method as documented here.
Essentially, you would upload your complete gallery folder (not just the contents) to your web server and add the baseUrl embedding code to your web page.
It does not matter where on your web server you upload your gallery folder to as long as the two paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself) are correct.
If you are using the SimpleViewer Package for Umbraco, please note that we did not write this package ourselves and support for it should be directed towards the Umbraco forum where the author of the package should be able to help you further.
If it helps, there is the following note on this web page:
Just add the Juicebox's jbcore folder to the root of your website and use the JB Gallery Control Macro.
The 'jbcore' folder can be found inside the Juicebox-Pro download zip package ('juicebox_pro_1.3.3/web/jbcore/').
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.