You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
It sounds like your gallery might be affected by a known bug whereby captions disappear when setting captionPosition to "BOTTOM" or "BELOW_THUMBS" in conjunction with setting imageTransitionType="CROSS_FADE".
The bug has been addressed and will be fixed in the next version of Juicebox-Pro (although I do not know when it will be released).
In the meantime, perhaps setting imageTransitionType="FADE" would be a suitable workaround.
If it helps to narrow things down, I have created a test gallery using the following code as the gallery's 'index.html' file to try to replicate your problem but the flickering does not appear.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html, body
{
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 20px;
}
#footer {
width: 100%;
height: 20px;
}
#header, #footer {
background-color: #222222;
color: #ffffff;
font-size: 20px;
padding: 10px 0;
text-align: center;
}
#juicebox-content {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
function doLayout() {
var winHeight, headerHeight, footerHeight;
winHeight = window.innerHeight ? window.innerHeight : $(window).height();
headerHeight = $('#header').outerHeight();
footerHeight = $('#footer').outerHeight();
var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight);
$('#juicebox-content').height(newH);
}
$(document).ready(function () {
doLayout();
$(window).bind('resize', doLayout);
new juicebox({
containerid : 'juicebox-container'
});
});
</script>
<title>Test Gallery</title>
</head>
<body>
<div id="header">This is the header.</div>
<div id="juicebox-content">
<div id="juicebox-container"></div>
</div>
<div id="footer">This is the footer.</div>
</body>
</html>Try temporarily removing your bootstrap CSS file (loaded by this line <link rel="stylesheet" href="/min/g=css-1.1.5">) to see if it makes a difference as it may contain generalized CSS rules which the gallery has no option but to inherit.
Thank you for providing the URL to your gallery.
I do see the shadow on the image number in your gallery.
On further investigation, it appears that the textShadowColor configuration option is not respected when the gallery is expanded fullscreen (from a Splash Page or by using the Expand button in an embedded gallery which does not use a Splash Page). My test gallery was a 100% x 100% gallery which is why I did not see the problem earlier.
I have logged a bug report and hopefully this will be fixed in the next version of Juicebox-Pro.
It looks like the problem might be caused by incorrect or missing MIME types on your original web server.
For example, If I try to access the 'juicebox.eot' file directly from your original web server, my browser displays the content as text.
However, if I try to access the 'juicebox.eot' file directly from your new web server, my browser asks if I would like to download the file.
(The files are treated differently on the two servers.)
Hopefully your original web host can sort the problem out for you.
But when I have BOTH galeries active the galerie1 shows the pictures of galerie2 in the expanded mode (in the normal mode it works fine) and galerie2 shows the same behaviour with the pictures of galerie1.
Unfortunately, this is due to a known bug. However, the bug has been addressed and will be fixed in the next version of Juicebox-Pro (although I do not know when it will be released).
Additionally the expanded version appears alone on the screen - when only one galerie is present it appears as additional layer on the same site (as I want it)
I'm not sure what you mean by this. It sounds like you might be wanting the gallery to appear in a lightbox-style popup.
If so, then make sure that you use the lightbox script's correct 'rel' attribute in the link to your gallery.
One thing i could do is update my drupal version, from 7.14 to 7.22, so i will try that now!
OK. If upgrading Drupal does not help, hopefully the author of the plugin will be able to help further over at the Drupal support pages.
Thank you for the additional information.
I see the problem in your gallery when viewing your web page on an iPod Touch but I am unable to replicate the problem with a test gallery (resembling your gallery as closely as possible). It looks like a little trial and error might be required to find the cause of the problem.
Try viewing your gallery on a page of its own to see if the problem persists. If the gallery functions OK and you do not see the flashing hit area, then there may be something within your main web page's code which is causing the problem.
Try stripping back elements from your main web page one by one (and test each time) to see if you can find anything which might be causing the problem.
Unselected thumbnail dots take on the Nav Button Back Color (in the JuiceboxBuilder-Pro 'Customize -> Color' section).
However, this is not eliminating the drop shadow on my itouch, specifically in the image numbers below the images.
Setting the opacity of the textShadowColor to zero works for me. It removes the shadow from all text (including the image numbers) in both Large Screen Mode (in desktop browsers) and Small Screen Mode (on my iPod Touch).
Make sure that you are using the latest version of Juicebox-Pro (v1.3.1). Please see the Upgrading Juicebox page if necessary.
Also, try clearing your browser's cache before reloading your gallery to see if this makes a difference.
If you continue to experience difficulties, please post the URL of your gallery so that I can take a look.
Alternatively, you could search through the 'jbcore/classic/theme.css' file and remove all the lines which contain the term 'text-shadow' but this should not be necessary.
this works in IE perfectly well if I open it locally
But it does not display any of the symbols when I view it on the server.
This is what made me think the problem was occurring during upload.
If I download your font files and use them in a test gallery, the problem occurs so there seems to be a problem with the font files on your web server. However, as your font files function OK locally before you upload them (and also when I regenerate your font files using the IcoMoon App), this would suggest that the font files coming directly from IcoMoon are OK.
Try uploading using a different FTP program (such as Filezilla) and ensure that the method of transfer is binary. This works for me.
can you clarify where this parameter is set and exactly how to do it?
You can change the opacity of the textShadowColor (to zero) in the 'Customize -> Color' section of JuiceboxBuilder-Pro.
Otherwise, you can add an entry such as textShadowColor="rgba(0,0,0,0)" directly into your gallery's XML file (as an attribute to the opening <juiceboxgallery> tag).
Also, for some reason I have not been receiving email notices recently to postings I am subscribed to so I have to periodically check for a reply. I used to get these but in the last several weeks I don't get them. Any thoughts about this?
The forum email system seems to be working OK for myself. I have been getting email notifications daily.
Check that your email address is OK in the 'Profile -> Identity' section and check that your subscription settings are OK in the 'Profile -> Settings' section. Also, check your email account's junk/spam folder in case the emails have been redirected to there.
Please note that we did not write the Juicebox module for Drupal which can be found here and I am not familiar with the module or its code.
However, following the instructions in the README.txt file work for me (with Drupal 7.22, Libraries API 7.x-2.1, Juicebox module 7.x-1.0-rc1 and Juicebox-Lite v1.3.1).
Have you installed and enabled the Libraries API as well as the Juicebox module?
I was able to create a Juicebox gallery by going to 'Structure -> Content types -> Article -> manage display' and then selecting 'Juicebox' as the FORMAT for the 'Image' field (and then uploading some images to a new article). Clicking on the gear icon to configure the settings worked fine.
Try using the same versions of everything that I used (listed above) and ensure that the Libraries API and the Juicebox module are both installed and enabled.
If you continue to experience difficulties, try posting your query in the Drupal support forum where the author of the module should be able to help you further.
You need a comma after the baseUrl entry in your gallery's embedding code to separate it from the other configuration options.
Change:
baseUrl :"jb_small/"... to:
baseUrl :"jb_small/",showOverlayOnLoad="FALSE" fixed the problem. is this also settable via the API?
You can use the Juicebox-Pro API method toggleOverlay() to toggle the image overlay on and off.
more specifically if could control the buttonBar and imageNav independently, that would be best. for instance i only want the buttonBar to show on mouseover and not onLoad, but i do want the imageNav to show on both onLoad and mouseover.
It would not be possible to achieve this exactly but with a combination of the following suggestions, you might be able to find a suitable compromise.
You could use the Info Button (showInfoButton="TRUE") to allow users to toggle the overlay on and off.
You could position the Button Bar outside the overlay (buttonBarPosition="TOP").
You could add main image navigation buttons to the Button Bar (showNavButtons="TRUE").
You could show/hide the main image navigation buttons on the overlay by using the showImageNav configuration option.
I have not seen this myself.
What version of iOS do your devices use?
Are you able to provide the URL to a gallery which exhibits this behavior so that I can take a look?
Does the gallery use the latest version of Juicebox (v1.3.1)?
Yes. Insert the 'Standard' Google fonts code to the <head> section of the web page containing your gallery's embedding code such as:
<link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'>... and enter the name of the font into the galleryFontFace configuration option, e.g.:
galleryFontFace="Milonga"I have just created a sample test album using exactly the same configuration options that your own gallery uses.
I then loaded your 'juicebox.svg' file into the IcoMoon App, re-saved the font (without making any modifications), put the necessary font files into the 'jbcore/classic/fonts/' folder and uploaded the gallery here [test album removed]. The icons display fine in IE10 for me.
When I preview the gallery in IE locally on my machines it displays fine but when I upload the galleries to a site they dont work any more.
It sounds like your problem occurs when you upload the font files to your web server. Perhaps the font files are becoming corrupt during the upload process.
Make sure you upload the files as binary rather than ASCII in your FTP program.
Where can I find that in my already built gallery? (IOW I don't want to have to rebuild the gallery). Is it possible?
Open and edit your gallery in JuiceboxBuilder-Pro v1.3.1 and enter the required font face into the 'Gallery Font Face' field (in the 'Customize -> General' section). Then save your gallery on the 'Publish' tab and re-upload the gallery to your web server.
Otherwise, just modify your gallery's XML file by opening the 'config.xml' file in a plain text editor and adding something like galleryFontFace="Courier" as an attribute to the opening <juiceboxgallery> tag.
And I would like to add an image <a href> to the lower right of the main gallery image. Is this also possible?
Add the link to your web page below your <div id="juicebox-container"></div>, e.g.
<div id="link" style="text-align: right;"><a href="http://www.example.com">Text</a></div>And finally, it does not display in IE correctly for my client.
Try using a fixed height for your gallery (rather than 90%).
Also, if you would like your web page to display your header (with a fixed height) and have the gallery take up the remainder of the user's browser window (without any scroll bars), then take a look at the Using a Resizable Gallery with a Header support section here. There is an online example and you can view the source of the web page in your browser and copy or modify it as required.
The View Resizable Gallery with Top Menu Example has both a header and a footer and you could place your required link in the footer.
i see the Ajax spinner spin and NO image
I see the problem in your own gallery but I have been unable to replicate the problem myself.
I have tried to create a stripped-back test case whilst resembling your setup as closely as possible using the same configuration options that your gallery does, using a baseUrlL, a configUrl and a themeUrl (as your gallery does), using imageURLs which begin with a leading slash and enclosing the entire embedding code within a $(document).ready resize function.
In my own test case, the first image in the gallery is always displayed (in Chrome 26) without the need to hover the mouse in and out of the gallery.
Try stripping back elements from your own web page one by one (and test each time) to see if you can find anything else on your web page which might be causing the problem.
btw the button bar and navigation icons (set to auto) automatically appear when i first load up the page on any browser, even if my mouse has never entered the juicebox content area... not sure if this was intended or not, but doesn't seem right to me.
Set showOverlayOnLoad="FALSE" in your gallery's XML file to initially hide the image overlay in your gallery. (The default value for this configuration option is 'TRUE'.
Try setting the textShadowColor opacity to 0, e.g. textShadowColor="rgba(0,0,0,0)".
This works in both Large Screen Mode and Small Screen Mode in my own test gallery.
Make sure that you clear your browser's cache after making any changes and before reloading your gallery to ensure that your browser does not use an older version of your gallery's XML file.
I am glad that you have resolved your problem.
Thank you for posting back to let me know.
Tried that without joy. Set it to 200 and got nada.
Increasing the maxCaptionHeight should work fine (and does in my own test galleries).
I notice that your gallery still uses maxCaptionHeight="50". (Perhaps you changed it back.)
Be sure to clear your browser's cache after making any changes to ensure that your browser does not use an older version of your gallery's XML file.
Tried removing info from title and then the caption showed.
That is because, at present, there is enough height in your caption area to display only one or the other (and the first line of text, whether it is the title or the caption, will be displayed.
I'd like to have both, centered, with title on top and caption below. Is there a way to do that?
Yes. Use both the title and caption fields and set captionHAlign="CENTER". However, when using captionPosition="BELOW_THUMBS" (as your gallery does), a maxCaptionHeight of 50 is not large enough to allow both the title and caption to be displayed.
Oh, and is it possible to control the text font?
Yes. Use the galleryFontFace configuration option (in the 'Customize -> General' section of JuiceboxBuilder-Pro).
You need to increase your gallery's maxCaptionHeight (from 50 to perhaps 100) to allow more space for the captions to be displayed.
As you will not be able to upload your Juicebox gallery files directly to Blogger's own web server, please see the Embedding in a Web Template Site instructions.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.