You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Please make sure that you are following the embedding instructions here.
Perhaps the troubleshooting FAQs will help.
If you would like me to take a look to see if I can figure out why your gallery does not display, please post the URL to your gallery's web page. Thank you.
Thank you for pointing this out. I will notify the developers.
If you like, you can fix this yourself by opening the 'svmanager/plugins/juicebox/jbpropage.php' file in a plain text editor and changing line 573 from:
<td class="label">'.$imageTransitionType->label().'</td><td>'.$imageTransitionType->select($tab, array('SLIDE', 'FADE', 'NONE')).'</td>... to:
<td class="label">'.$imageTransitionType->label().'</td><td>'.$imageTransitionType->select($tab, array('SLIDE', 'FADE', 'CROSS_FADE', 'NONE')).'</td>Please note that the line number above refers to the current version of svManager (v1.8.7).
a) full screen mode is almost opaque in Safari v5.1.10 Mac.
I tinkered with different colors and opacities but nothing altered the hiding of all images in full screen mode with Safari.
Perhaps I am misunderstanding your problem. I am not sure what you mean by "nothing altered the hiding of all images in full screen mode".
I have expanded your gallery in Chrome, Firefox, Internet Explorer and Safari on my PC and the expanded gallery looks similar in all browsers.
Could you please upload screenshots somewhere (and provide links) of the gallery's fulscreen display in Safari and in other browsers so that I can see what you are seeing? Thank you.
It might also be worthwhile clearing your browser's cache before reloading your gallery's web page to ensure that your browser is fetching and using the most recent versions of your gallery files.
Too bad there's no option to retain the toggle but start with the overlay off. I'd rather viewers see an unobstructed view of the images first.
If you would like to make any suggestions for future versions of Juicebox-Pro, then please post them in the Feature Requests thread. This keeps them all together and ensures that they are not overlooked. Thank you.
(a) Use the expandedBackgroundColor configuration option (in JuiceboxBuidler-Pro's 'Customize -> Color' section) to set the background color for expanded mode. The problem you report is likely to be due to different browsers having different default colors for the fullscreen background (black vs white) and setting an expandedBackgroundColor with an opacity of 1 (fully opaque, no transparency) should hopefully solve your problem.
(b) Please see the Adding a Logo support section for suggestions.
In order for the logo to appear in fullscreen mode, Option #2 or #3 should be suitable.
(c) You have set showInfoButton="TRUE". This overrides the default behavior of the overlay. (This is noted in the description of the showInfoButton configuration option in the Button Bar Options section of the Config Options page.)
The overlay will be displayed on load and can be toggled on and off via the Info Button on the Button Bar.
As you are already using PHP, you could use a PHP include as follows.
(1) Change the filename of 'elaimet.xml' to 'elaimet.php' and change its contents to the following:
<?php header('Content-Type: application/xml'); ?>
<juiceboxgallery
useFlickr="true"
flickrShowTitle="false"
flickrShowDescription="true"
flickrImageSize="ORIGINAL"
flickrImageCount="200"
flickrUserId=""
flickrSetId="721576XXXXXXXX"
flickrSort="date-taken-desc"
<?php include 'extra.php'; ?>
/>(2) Put your common configuration options into a file named 'extra.php' (just as below):
backgroundColor="rgba(248,248,248,1)"
buttonBarBackColor="rgba(0,0,0,.4)"
buttonBarIconHoverColor="rgba(255,0,0,1)"
buttonBarPosition="TOP"
captionBackColor="rgba(248,248,248,.8)"
captionHAlign="LEFT"
captionPosition="BELOW_IMAGE"
displayTime="4"
enableAutoPlay="true"
enableDirectLinks="true"
frameWidth="1"
galleryFontFace="Arial,Helvetica,sans-serif;"
galleryHeight="450"
galleryTitle=""
galleryTitlePosition="NONE"
galleryWidth="500"
imageFrameColor="rgba(0,0,0,.4)"
imageNavPadding="30"
imageNavPosition="IMAGE"
imageShadowBlur="0"
imageShadowColor="rgba(0,0,0,0)"
imageTransitionTime="0.2"
imageTransitionType="CROSS_FADE"
importCaption="IPTC"
importTitle="IPTC"
languageList="Näytä pistenavigointi|Piilota pistenavigointi|Suurenna kokoruutuutilaan|Sulje kokoruututila|Avaa kuva uudessa ikkunassa|Kuvat|Seuraava kuva|Edellinen kuva|Soita musiikki|Pysäytä musiikki|Näytä tiedot|Piilota tiedot|Aloita näytös|Pysäytä näytös|Näytös päällä|Näytös suljettu|Mene takaisin|Osta tämä kuva|Jaa: Facebook|Jaa: Twitter|Jaa: Google+|Jaa: Pinterest|Jaa: Tumblr|/"
maxCaptionHeight="30"
navButtonBackColor="rgba(0,0,0,0.4)"
navButtonIconHoverColor="rgba(255,0,0,1)"
showAutoPlayButton="true"
showImageNav="false"
showImageOverlay="ALWAYS"
showNavButtons="true"
showOpenButton="false"
showPagingText="False"
showSmallThumbsOnLoad="true"
showThumbsButton="false"
showThumbsOnLoad="true"
splashButtonText="Avaa galleria"
textColor="rgba(0,0,0,1)"
textShadowColor="rgba(0,0,0,0)"
thumbFrameColor="rgba(255,0,0,0.8)"
thumbHeight="60"
thumbHoverFrameWidth="1"
thumbSelectedFrameWidth="2"
thumbShadowColor="rgba(0,0,0,0)"
thumbsVAlign="BOTTOM"
thumbWidth="60"
topAreaHeight="0"
topBackColor="rgba(255,255,255,0)"
useFullscreenExpand="true"(3) Use the following embedding code (changing the file extension of the configUrl):
<!--START JUICEBOX EMBED-->
<script src="galleriat/jbcore/juicebox.js" type="text/javascript"></script>
<script>
new juicebox({
configUrl: "galleriat/elaimet.php",
containerId: "juicebox-container",
galleryWidth: "500",
galleryHeight: "450",
backgroundColor: "rgba(248,248,248,1)"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Your gallery's 'theme.css' file should be located here: http://www.isc-ta.com/test2/jbcore/classic/theme.css
... but going directly to that location in a browser results in an error 404 (file not found).
It looks like the 'theme.css' file has not been uploaded to your web server (or at least not to the correct location).
Please try re-uploading your gallery's entire 'jbcore' folder to ensure that all core Juicebox-Pro files are present and correct.
Also, please check that the permissions on the 'theme.css' file (and on its parent folders) are not too restrictive. Default permissions of 755 for folders and 644 for files should be fine.
Thank you for reporting this problem. I have been able to replicate it in a test installation of my own.
It looks like it happens when creating a new Juicebox gallery within svManager as well as when importing a gallery.
Just click on the 'Pro' tab of any Juicebox gallery and the 'SV' logo and 'SimpleViewer Pro Settings' label will be displayed.
However, the problem seems to be just cosmetic within the svManager interface. The actual configuration options available are those for Juicebox-Pro so, although it may look confusing, the actual functionality is fine.
I have notified the developers of this problem and hopefully it will be fixed in the next version of svManager.
I have just viewed your gallery in Chrome 36.0, Firefox 31.0 and Internet Explorer 11 and your audio track plays fine in all browsers.
Try clearing your browser's cache to ensure that your browser is fetching and using the most recent versions of your gallery files. Also, check your computer's volume control in case it has been muted or turned down.
In JuiceboxBuilder-Pro's 'Customize -> Color' section, set the 'Opacity' of the 'Text Shadow Color' to '0' (zero).
If editing your gallery's XML file directly, set textShadowColor="rgba(0,0,0,0)". The last rgba parameter is the opacity (the 'alpha' channel).
This solution works equally well with both Juicebox-Lite (the free version and Juicebox-Pro).
Try the following:
(1) Create two galleries and save them in folders named 'gallery1' and 'gallery2'.
(2) Upload the two complete gallery folders (not just the contents) to the root directory of your web space (usually into a directory named 'public_html' or 'htdocs').
(3) Create an HTML web page using the following code, upload it to any location on your web server and open it in a browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="minimal-ui" />
<script type="text/javascript" src="/gallery1/jbcore/juicebox.js"></script>
<script type="text/javascript">
function loadGallery(base) {
new juicebox({
baseUrl: base,
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600"
});
}
$(document).ready(function() {
$('.gallery').click(function() {
var base = '/' + jQuery(this).attr('id') + '/';
loadGallery(base);
});
loadGallery('/gallery1/');
});
</script>
<title>Test</title>
</head>
<body>
<div id="links">
<input id="gallery1" class="gallery" type="button" value="Gallery 1" />
<span> </span>
<input id="gallery2" class="gallery" type="button" value="Gallery 2" />
</div>
<div id="juicebox-container"></div>
</body>
</html>I've tried to keep the code as basic as possible so that you can see what is going on.
You can change the HTML buttons for text or images if you like, as long as you give each link a class="gallery" attribute and and id with the name of the corresponding gallery folder.
For each additional gallery, all you would do is upload a new gallery folder to the root of your web space and add a line of code such as:
<input id="gallery_folder_name" class="gallery" type="button" value="text_for_button" />Have you checked the .htaccess file(s) on your web server yet?
It looks like there may be rewrite rules in your .htaccess file(s) which might be causing teh problem you describe.
Just for testing purposes, take a backup of your .htaccess files(s) and then temporarily remove them from your web server to see if this makes a difference.
I would also check with your web host to see if they have made any changes recently which might be contributing you your problem.
Opening an HTML web page that definitely exists on your server and getting an error 404 (file not found) message certainly sounds like it is directly related to your web server or .htaccess file(s) rather than with Juicebox itself.
Even the galleries that were built and tested before the issue are affected.
I have viewed your gallery in Chrome and Mobile Safari and see the problem that you are describing.
If your galleries used to display OK but now do not, then something must have changed for this to happen. If you have not made any changes to anything yourself, then the most likely explanation is that your web host may have changed something on your web server. Please check with your web host to see if they have made any changes recently which might be contributing to your problem.
It looks like your web server may be set up to deliver a mobile version of your web site but that the mobile version fails.
Try renaming your gallery's web page (http://www.themagichour.com/roadtrip1/index.html) from 'index.html' to something different, like 'gallery.html' and then try going to http://www.themagichour.com/roadtrip1/gallery.html in your iPhone browser to see if this makes a difference.
Also, check the .htaccess file on your web server to see if there are any rewrite rules which might be causing your problem. I suspect that this might be the root of the problem.
Now it opens one huge image and no thumbs with a "view gallery" link at the bottom.
What you are describing is Small Screen Mode. (You may have seen this in your browser if the browser's own zoom setting was very high.)
For more information about Screen Modes, please see here.
Actually there is just a small problem left when selecting/clicking the popup with the related slideshow during the initial loading/refreshing of the the main gallery page. The when loading is finished the slideshow starts but the popup window is blocked and is not closing up anymore.
I am not sure which test you are referring to on your web page but make sure that the z-index value of the close button on your pop-up window is high enough (try a very high value such as 99999) to be stacked on top of all gallery components.
There was the fact that i couldn´t make two slide shows work with BaseUrl method within one page.
It is possible to embed an unlimited number of galleries into a single web page using the baseUrl method.
Just make sure that each gallery is in its own folder, than you load the 'juicebox.js' file only once per page (not once per gallery) and that the baseUrl paths (the paths to the gallery folders) are correct.
The other thing i don´t understand is so far the dimensioning and positioning of the slide show for baseURL.
The dimensions of the gallery are determined by the galleryWidth and galleryHeight parameters within the embedding code. (If these values are expressed as percentages, then the gallery's actual size will be the specified percentage of the gallery's parent container.)
The position of the gallery is entirely dependent on where you place the containerId div (<div id="juicebox-container"></div>) on your web page.
What I said was that I'm questioning whether the XML that's being generated is correct for versions of Juicebox higher than 1.2 (which is why I included the text).
The required format of a gallery's XML file has not changed between v1.2 and the current version (v1.4.2).
There's nothing for you to see, because it works flawlessly under v1.2.
I would really need to see the gallery that does not work. I may or may not be able to determine the cause of the problem but without seeing the gallery in question, I can only guess at probably causes and from what you say, there does not seems to be any. Unfortunately, I cannot think of any reason why a gallery would work with the v1.2 'juicebox.js' file but not with the v1.4.2 version.
OK, I've set up a test page to demonstrate the problem. If you email me, I'll send you the URLs. I have two versions of the same page, where the only difference is the version of the juicebox.js file that they point to. One works, the other doesn't.
Thank you. Hopefully I will be able to figure out what is causing your problem.
Please check your email. I have sent you a message.
As I mentioned earlier, Juicebox v1.4.2 is certainly able to use a PHP file to dynamically generate XML data for a gallery.
In fact, WP-Juicebox (the Juicebox plugin for WordPress) does this and works fine with Juicebox v1.4.2.
In order to investigate further, I would really need to see your gallery live on your web server so please post the URL to your gallery or let me know if you would rather that I contact you via email so that you can email me the URL to your gallery instead.
Juicebox v1.4.2 can use a PHP file as a configURL (just like earlier versions).
The "Juicebox Error: Config XML file not found." message suggests that either:
(1) Your 'juicebox_config.php' file cannot be found on your web server.
(2) The the format of the XML data generated by your PHP file is incorrect.
(3) The web page containing the embedding code is on a different domain to that specified in the absolute path in your configURL. (If this is the case, try using relative paths instead of absolute paths in your gallery's embedding code.)
It would certainly be easier to troubleshoot your scenario if I could see the problem for myself so if you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look and help further.
I meant for you to try loading Google into an iframe (in a similar manner to how you are currently loading your Juicebox gallery) rather than just display 'http://www.google.com/' on your web page as plain text to see if the problem occurs with any content in an iframe and not just with a Juicebox gallery (to determine whether or not the problem is directly related to Juicebox or the iframe).
Try replacing:
http://www.google.com/... with:
<iframe src="http://www.google.com/" style="border:0px #FFFFFF none;" name="SimpleViewer" scrolling="auto" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe>... to see what happens.
No matter what happens with the test above, a possible solution should be to just embed your gallery directly into your web page (using the baseUrl method of embedding) rather than using an iframe.
Try replacing:
<iframe src="index_htm_files/JUC01test/index.html" style="border:0px #FFFFFF none;" name="SimpleViewer" scrolling="auto" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe>... with:
<!--START JUICEBOX EMBED-->
<script src="index_htm_files/JUC01test/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : 'index_htm_files/JUC01test/',
containerId : 'juicebox-container',
galleryWidth : '540',
galleryHeight : '291',
backgroundColor: '#222222'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->If this still does not work, then you may need to delay the loading of your Juicebox gallery until the container into which your gallery is embedded is visible on your web page. You could put the embedding code into a JavaScript function and run it when your icon is clicked, using code such as the following:
<!--START JUICEBOX EMBED-->
<script src="index_htm_files/JUC01test/jbcore/juicebox.js"></script>
<script>
function loadGallery() {
new juicebox({
baseUrl: 'index_htm_files/JUC01test/',
containerId: 'juicebox-container',
galleryWidth: '540',
galleryHeight: '291',
backgroundColor: '#222222'
});
}
</script>
<div id="juicebox-container"></div>
<a href="#" onclick="javascript: loadGallery(); return false;">Click here to load gallery.</a>
<!--END JUICEBOX EMBED-->There should still be a space between the closing " of the class attribute and the start of the style attribute.
<div class="xr_noreset"style="position: absolute; left: 62px; top: 489px; width: 812px; height: 425px;">... should be:
<div class="xr_noreset" style="position: absolute; left: 62px; top: 489px; width: 812px; height: 425px;">... although my own tests indicate that this will probably not solve your problem.
Different behavior in different browsers can often be attributed to HTML errors on a web page. (Different browsers handle errors differently.)
Try fixing all the HTML errors on your web page. There are not many but the ones that exist may be non-trivial.
There are a couple of "Opening and ending tag mismatch" errors (for a </div> tag and the </body>).
You can check the code on your web page with the W3C Markup Validation Service and then fix the errors reported. Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers. This may help but even if it does not, we can then eliminate HTML errors as being a contributing factor to your problem (and having valid code on your web page would be advisable anyway).
Try loading a different web page (other than your gallery) into your iframe (such as http://www.google.com/) to determine whether or not your problem is directly related to Juicebox or is with the code on your embedding page which displays the iframe on demand. If you find the same problem is still happening when you take Juicebox out of the equation, then if you use a third-party solution to display the iframe on demand, try checking in with their own support to see if they have had any other users experience problems with recent versions of Firefox.
Another thing to try would be to set your gallery's dimensions (in the embedding code on your http://www.yachting-society.com/index_h … index.html page) to be the same as your iframe's dimensions.
Try changing:
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: '#222222'
});
</script>... to:
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '500',
galleryHeight: '350',
backgroundColor: '#222222'
});
</script>Hopefully one of the suggestions above will help or at least point you in the right direction towards a solution.
now it works fine ...
That's great!
But there is still a little bug: the thumb no 9, 13, and 23 is not correctely focussed like all other thrumbs ...
Images #9, #13 and #23 have a different aspect ratio to the other images in your gallery. They are very long and thin. Image #9, for example, has dimensions of 275 x 768. If you compare the thumbnail for image #9 with its corresponding main image, you will notice that the entire width of the main image is displayed within the width of the thumbnail. However, to create a thumbnail with the dimensions you use, the only way to do so (to get a square from a rectangle) is for JuiceboxBuilder-Pro to crop the top and bottom of the image.
JuiceboxBuilder-Pro does not allow you to position the focus of the crop (it is always the centre of the image) but you could create your own thumbnail images if you like (in an imaging program such as Adobe Photoshop) and replace any existing ones in your gallery's 'thumbs' folder.
Thank you for sharing your findings and solution.
I have notified the developers of this issue (galleries created on Windows PCs cannot be opened on Macs) and they will certainly investigate further. If they can replicate the problem, then hopefully they will be able to fix it for a future version.
Please see this FAQ which seems to be relevant to your problem:
My images show locally, but not when I upload them to my website. Why?
Also, try opening one of your gallery's images from your web server directly in your browser to see if it displays OK (taking Juicebox out of the equation). If it does not display OK, then check the permissions of the 'images' and 'thumbs' folders and the image and thumbnail files themselves on your web server to make sure that they are not too restrictive and can be read by the browser. Default permissions of 755 for folders and 644 for files should be fine.
If you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look and help further. (http://ligthtstuff/bsci is an incomplete web address.)
I also do not understand what is the reason for the get embed code on the publish page ...
This is the code that you would use if you wanted to embed the gallery into an existing web page alongside other content, following the instructions here (see Step #3).
If you just want to display the gallery on its own web page, then you can use the gallery's 'index.html' file (generated by JuiceboxBuilder) and you do not need to use the embedding code from the 'Publish' tab.
The div that your iframe is in has a misplaced double quote character (to close the class attribute). This might be preventing the browser from rendering the gallery's parent container as expected.
Try changing line 141 of your http://www.yachting-society.com/blog.htm page from:
<div class="xr_noreset "style="position: absolute; left: 62px; top: 489px; width: 812px; height: 425px;">... to:
<div class="xr_noreset" style="position: absolute; left: 62px; top: 489px; width: 812px; height: 425px;">Also, the iframe itself has an attribute align=aus. The align attribute should have a value of "top", "middle", "bottom", "left" or "right" and the value should be surrounded by quotes.
If this does not help, then try giving your iframe a fixed height (for example 800px) rather than a height of 100% to see if this makes a difference.
I really cannot think of anything else which you could try.
It seems very strange that JuiceboxBuilder-Pro cannot open a gallery on your Mac which I can open fine on my own PC.
If I think of anything else which might help, I will be sure to post back.
If you plan to rebuild your gallery, you should hopefully at least be able to load your existing gallery's XML file as a preset ('Presets -> Load Preset...' from the drop-down menu at the top) to save you from having to set all the configuration options individually.
Just add the images to your new gallery and then go to 'Presets -> Load Preset...' and navigate towards your existing gallery's 'config.xml' file. All the configuration options from your existing gallery should be applied to your new gallery in a single action.
OK, thank you for the additional information.
As I am unable to see or replicate the problem myself, I have notified the developers who will certainly investigate this further.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.