You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
The decision was made to swiftly release an updated version of Juicebox-Pro (with this bugfix integrated) but to not increase the version number. If you need to differentiate between versions, the Build Time (in the comments section at the top of the 'juicebox.js' file) will always differ from build to build.
1. I would like to align my images at the bottom
Move the thumbnails to somewhere other than the default position of BOTTOM (e.g. thumbsPosition="TOP") and set imageVAlign="BOTTOM". You may also want to set imagePadding="0" and stagePadding="0".
2. I would like to resize the images/gallery dynamically when the user hovers like: its 500px height and 100% width, and when the user hovers i would like to resize to 750px height and 100% width.
There is no Juicebox-Pro API event which you could hook into when the user hovers over the gallery.
You could perhaps use the jQuery mouseover and mouseout events (on the gallery's container) in conjunction with the API method setGallerySize().
Try something like the following. Create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="minimal-ui" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script src="jbcore/juicebox.js"></script>
<script>
function getWindowWidth() {
return window.innerWidth ? window.innerWidth : $(window).width();
}
var jb = new juicebox({
containerId: 'juicebox-container',
galleryHeight: '500',
galleryWidth: getWindowWidth()
});
$(document).ready(function() {
$('#juicebox-container')
.mouseover(function() {
jb.setGallerySize(getWindowWidth(), '750');
})
.mouseout(function() {
jb.setGallerySize(getWindowWidth(), '500');
});
$(window).on('resize', function() {
jb.setGallerySize(getWindowWidth(), '500');
});
});
</script>
</head>
<title>Test</title>
<body>
<div id="juicebox-container"></div>
</body>
</html>No. Juicebox-Pro supports only a single audio track.
I have run your web page through the W3C Markup Validation Service and notice that there are two unclosed <div> elements on your web page. I do not know what part of your Drupal installation is responsible for this (Drupal core, a theme, module or custom code) but investigating this and fixing the HTML errors on your web page would be the first thing I would do. (Try using a different theme to see if your current theme is the source of the problem.)
Once the code on your web page validates correctly, your gallery should hopefully display correctly.
Even if fixing the HTML errors on your web page does not fix the problem, we will at least be able to eliminate them as a possible cause.
Also, it looks like your gallery may somehow have a width of zero.
If I give the <div class="juicebox-parent"> container on your web page a fixed width such as 800px (using Firefox's developer tools), your gallery seems to display OK.
Perhaps you could post your query in the Drupal forum. Please note that we did not write the Juicebox module for Drupal ourselves. If you post your query in the Drupal forum, the author of the module may be familiar with the problem and be able to offer a solution.
I hope this helps and points you in the right direction.
You're welcome!
I'm glad my suggestion works for you.
Thank for you posting back to let me know.
You don't get it when you click on 'Venlo 1' on the home page?
That is correct. When I click on the 'Venlo 1' link on your home page, I see no gallery on the resulting web page. (I have viewed the web page in Firefox 28.0, Chrome 34, IE11, Opera 20.0 and Safari 5.1.7.)
It looks like the CSS on your web page may be forcing the gallery container's position and/or size to be such that the gallery itself is not visible on screen.
With regard to your original query, we now plan to open up buttonBarBackColor and captionBackColor for use in Small Screen Mode as well as Large Screen Mode in a future version of Juicebox-Pro.
I have been unable to replicate the problem you report (on a PC).
I have viewed the demo gallery in Firefox 28.0, Chrome 34, IE11, Safari 5.1.7 and Opera 20.0 and after expanding and closing the gallery, AutoPlay does not automatically start.
I do not know what might be causing the problem on your own system but try clearing your browser's cache before reloading the gallery to see if this makes any difference.
In the meantime, I have notified the developers who will be able to try it using Safari 7.0.3 on a Mac (the same setup as yourself) to see if the problem can be reproduced.
The Shopping Cart button is automatically disabled in Small Screen Mode (used by default to display the gallery on mobile devices) as the Fotomoto popup interface does not fit on smaller screens.
(This is noted in the Additional Notes in the Shopping Cart support section.)
You could try forcing your gallery to use Large Screen Mode on all devices and in all browsers (by setting screenMode="LARGE" in JuiceboxBuilder-Pro's 'Customize -> General' section) but you are likely to run into problems with the size of the Fotomoto popup interface.
There is no known solution to this problem which is why we automatically disable the Shopping Cart button in Small Screen Mode.
It looks like you might have already solved your problem.
When I go to your web page, your gallery displays and functions correctly.
If you do not see the gallery in your web page, then try clearing your browser's cache before reloading your web page to see if this makes a difference.
Try using relative paths for your baseURL and configURL (rather than absolute paths which hardcode your 'www' subdomain) so that your web site displays correctly on both http://comingsoon.it and http://www.comingsoon.it.
Also, when using a baseURL, as long as your gallery's XML file is named 'config.xml' and is located in your gallery folder, then you do not need to use a configURL to point to the XML file.
Try changing:
baseUrl : 'http://www.comingsoon.it/testArea/anteprime/emma/',
configUrl : 'http://www.comingsoon.it/testArea/anteprime/emma/config.xml',... to either:
baseUrl : '/testArea/anteprime/emma/',... or:
baseUrl : '/imgdb/primopiano/impaginate/emma/',... as you seem to have uploaded your gallery folder to two different locations on your web server.
I do not see a Juicebox gallery on the web page whose link you posted (http://www.reinaertdevos.eu/content/venlo-1) although there is embedding code on the page.
The settings used in this gallery can be seen here: http://www.reinaertdevos.eu/juicebox/xm … es/default
These settings result in a white background for both the Button Bar and the Back Button (in Large Screen Mode).
However, the settings used in the 'teaser' gallery on this page: http://www.reinaertdevos.eu/
... are quite different: http://www.reinaertdevos.eu/juicebox/xm … ges/teaser
... and, because screenMode="SMALL" is used, the background for the Button Bar is the default value of 'rgba(0,0,0,.5)'.
It looks like you might want to change the settings in the 'teaser' gallery so that screenMode="AUTO" and showSplashPage="ALWAYS".
All of your web pages seem to use different code (with different CSS) which accounts for the change in position of your menu across your different web pages.
Also, some pages load your 'style-menu2.css' file whereas others load your 'style-menu4.css' file.
The 'style-menu4.css' file includes the following CSS rules (not found in the 'style-menu2.css' file) which will affect the position of your menu only on web pages which load this file.
#menu_left{
margin-left:20%;
}
#entete_left{
margin-top:7%;
margin-left:16%;
}Try to use a single web page as a template and change only the content to create new pages.
Also, use the same CSS code for each and every page and the results will be consistent across all your web pages.
The positioning of the menu in your web page is due to the CSS in your 'style-menu2.css' file. In this file you have the following code:
body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;background: #ebebeb;width: 900px;margin: 100px auto;color: #666;}In your http://vercorshandisport.org/html5/lafe … feclaz.php web page, the margin: 100px auto; entry from the line of code above creates a 100px margin around the content of your web page.
In your http://vercorshandisport.org/html5/stage2014/stage.php web page, you have the following code after the 'style-menu2.css' file has loaded.
<style type="text/css">
body {
margin: 0px;
}
</style>This overrides the body margin rule in the 'style-menu2.css' file, resulting in no margin around the content of your web page.
If I understand, thumbnails in the pro version do not need to be square but they will all be the same width and height in a given gallery.
That is correct. The thumbnails were designed more as a navigational tool. As long as you set imageScaleMode to either SCALE_DOWN (the default value) or SCALE, your main images will be displayed in their entirety within the gallery's image area with their aspect ratios respected and without any cropping.
The configuration options you posted above are not the same as the ones used in the gallery whose URL you posted. The gallery on your web page uses the following configuration options.
gallerywidth="100%"
galleryheight="100%"
backgroundcolor="#ffffff"
textcolor="rgba(255,255,255,1)"
thumbframecolor="rgba(255,255,255,.5)"
showopenbutton="TRUE"
showexpandbutton="TRUE"
showthumbsbutton="TRUE"
usethumbdots="FALSE"
usefullscreenexpand="FALSE"
screenmode="SMALL"
imageshadowcolor="rgba(255,255,255,255.1)"
showautoplaybutton="TRUE"
shownavbuttons="TRUE"The gallery on your web page sets screenmode="SMALL".
If you want to use the Back Button in Small Screen Mode, you will have to set showSmallBackButton="TRUE".
Also, please note that buttonBarBackColor (the background color for the Button Bar) is a Large Screen Mode configuration option only. (This is noted in the description for buttonBarBackColor on the configuration options page.) When you gallery is displayed in Small Screen Mode, the default value of rgba(0,0,0,.5) will be used for the buttonBarBackColor.
If you want to use a Spage Page but want your gallery to be displayed in Large Screen Mode wherever possible, set screenMode="AUTO" and showSplashPage="ALWAYS" (instead of screenMode="SMALL").
You can use the languageList configuration option to translate the word 'of' (the last entry in the languageList) to something else, such as 'des' or '/'. Please see here for details.
For example, you could use the following to display "1 / 3", "2 / 3", etc.
languageList="Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Images|View Gallery|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|/"(Alternatively, you could hide the paging text completely by setting showPagingText="FALSE" and showSmallPagingText="FALSE".)
If you are referring to a navigation menu (which is unrelated to your Juicebox galleries), then make sure that your menu does not use any global CSS rules that your Juicebox gallery has no option but to inherit.
If the problem that you are experiencing is that your menu is a drop-down menu but that it does not appear on top of your Juicebox gallery, then give your menu's HTML elements a large 'z-index' value so that the menu is always stacked on top of the gallery (and does not disappear behind it).
If you are currently using a menu and would like me to take a look to see if I can determine exactly what the problem is (and perhaps suggest a solution), then please post the URL to your web page so that I can take a look.
If you are looking to use a menu to switch between different Juicebox galleries on a web page, then please see the 'Switching between Multiple Galleries using JavaScript' example in the Embedding Multiple Galleries support section.
Yes. With Juicebox-Pro, you can set the dimensions for your gallery's thumbnails using the thumbWidth and thumbHeight configuration options. All thumbnails in a Juicebox-Pro gallery will be the same size as each other but they do not need to be square.
If you create your gallery with JuiceboxBuilder-Pro, the application will create thumbnails at the specified dimensions and will set the appropriate values for thumbWidth and thumbHeight in the gallerys 'config.xml' file.
For reference, a list of all Juicebox-Pro Thumbnail Options can be found here.
The configuration options you posted do not include any Back Button options but if I add the following to a Juicebox-Pro v1.4.0 test gallery using your configuration options, the Back Button appears black on a white background.
backButtonPosition="TOP"
backButtonUseIcon="TRUE"It sounds like you might be using an older version of Juicebox-Pro (although if you just downloaded it yesterday, this is unlikely) or there may be a conflict with some custom CSS code on your web page (if you have embedded your gallery into an existing web page alongside other content).
Please check for these two possibilities and if you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.
(You can check which version of Juicebox-Pro your gallery is using by looking at the comments at the top of the 'jbcore/juicebox.js' file and you should be able to see if there are any custom CSS rules being applied to the Back Button using your browser's developer tools.)
If you are not able to upload .mp3 or .ogg files to your web server then you will need to host the files elsewhere (either another web server or perhaps a Dropbox public folder) and refer to them in the audioUrlMp3 and audioUrlOgg configuration options using absolute paths such as the following:
audioUrlMP3="https://dl.dropboxusercontent.com/u/134593202/music.mp3"
audioUrlOgg="https://dl.dropboxusercontent.com/u/134593202/music.ogg"Please check your email. I have sent you a message.
Thank you.
So, have you identified an error in this line of code, or is it a temporary fix unique to my case?The code within the Drupal module should work OK (it is valid PHP and should work according to the PHP specifications) so I suspect a bug in your web server's PHP version (v5.3.26) may be the cause of the problem.
I have a feeling that if your web server's version of PHP was upgraded (to a version where this bug has been fixed), then there would be no need to apply this fix.
This looks like a bug. Thank you for pointing it out. I have logged a bug report with the developers.
You can still load a preset from the 'Load Preset' combobox or via the 'Presets -> Load Preset...' option from the drop-down menu at the top. The preset will be active and applied to the gallery but the live preview window does not update itself automatically.
All you need to do to see the new layout is to switch tabs (go to 'Images' and back to 'Customize') or click in an input field and then click into a different input field.
You could check the width of the user's browser window using JavaScript and then set the showThumbsButton and showThumbsOnLoad in the gallery's embedding code accordingly.
Create a sample gallery in JuiceboxBuilder-Pro and replace the gallery's 'index.html' file with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var showThumbs = windowWidth >= 640;
new juicebox({
containerId: 'juicebox-container',
showThumbsButton: showThumbs,
showThumbsOnLoad: showThumbs
});
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>The XML code you posted is normal (although there should be image entries along with the configuration settings).
The more recent versions of WP-Juicebox output to the dynamically-generated XML file only the configuration options required by Juicebox (and do not include the 'e_' settings used only by the plugin).
I see no problem with your gallery's settings.
It looks like the problem might be with the version of PHP on your web server (perhaps a PHP method which WP-Juicebox uses which has been disabled in your PHP settings).
If you are willing to allow me FTP access to your web server, I would be happy to investigate further and try to determine the exact cause of the problem.
Please let me know if you are agreeable to this and I will send you an email where you can send me your FTP login details.
Thank you.
We have just released a hotfix version of v1.4.0 which includes a fix for the problem you reported (the largeImageURL overriding the linkURL).
Details on how to get the latest version can be found on the Upgrading Juicebox support page.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.