You're welcome.
I'm glad you've got it working. Thank you for posting back to let me know.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
You're welcome.
I'm glad you've got it working. Thank you for posting back to let me know.
@robd
The 'Select Gallery Folder...' dialog displays only folders (not files) so you'll not see the 'config.xml' file there.
When opening a gallery, you should navigate towards and select the gallery folder (the folder containing the 'config.xml' file), not the 'config.xml' itself. This should allow you to open your gallery in JuiceboxBuilder-Pro to edit it.
It sounds like your Juicebox gallery is being loaded as soon as your web page is loaded but before your modal window is visible.
If this is the case, then Juicebox's parent container (your modal window) will have no dimensions when the gallery is loaded and Juicebox won't know what its actual size should be.
You could either:
(1) Use fixed pixel values (instead of percentages) for your galleryWidth and galleryHeight
... or:
(2) Put your gallery's embedding code in a JavaScript function and call the function (to load the gallery) only when the modal window is ready.
For example, something like the following should hopefully work for you.
<script src="jbcore/juicebox.js"></script>
<script type="text/javascript">
function loadGallery() {
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
}
</script>
<div id="juicebox-container"></div>
<script type="text/javascript">
// Load gallery by calling JavaScript loadGallery() function when necessary
loadGallery();
</script>I don't know how your modal window is being opened but I hope that this points you in the right direction.
This is now resolved.
Thank you for the updates.
I'm glad that you've been able to resolve your problem.
Thank you for letting me know.
Here are a few notes which might help to clarify a couple of things.
Okay, the problem seems to be that if I set a fixed gallery width/height, the scale options no longer work (hence the forced scroll bar). If working with a percentage then they do.
If you set a gallery's height to be a fixed pixel value, then the gallery height will always be the specified value and a vertical scrollbar will appear if necessary.
If you set a gallery's height to be a percentage value, then the gallery's actual height will be the specified percentage of the gallery's parent container. If there is no other content on the web page, then the gallery's parent container will be the 'body' tag and setting a gallery's height to be 100% will mean that the gallery's height will always fill (be 100% of) the browser window height.
I am an artist hence reluctance to use large images.
Using larger images or changing imageScaleMode to either 'SCALE' or 'FILL' are the only ways to have your gallery images fill a larger area and minimize the space surrounding them.
Ideally I want it to show image at 1024x768 if browser allows, if not scale down but at larger sizes keep image it at 1024x768 with thumbs directly underneath.
If the browser window is much larger than 1024 x 768 and you want your images to be displayed at no more than 1024 x 768, then there will be empty space somewhere. Setting imageVAlign to 'CENTER' (the default value) to split the empty space equally above and below the image is usually a good visual solution. Unless you set your gallery's width and height to be fixed pixel values (i.e. if you use percentages), you essentially have no control over the aspect ratio or size of your gallery and trying to have a gallery look good in a myriad of different viewport shapes and sizes is never going to be easy. If you know that your target audience is likely to be viewing your gallery on large desktop monitors (or, conversely, on mobile devices), then you can tweak your gallery to perhaps look better in one viewport shape than another but, often, compromises may have to be made so that galleries look 'good' everywhere rather than 'great' in certain aspect ratios but 'poor' in others.
So, I have decided to go with a larger size image 1920x1200 - I will just watermark them (and lower quality a bit).
That sounds like a good solution to me!
I'm glad that you've been able to resolve your problem.
Thank you for letting me know.
Please see this FAQ which might help:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
Two other things I'd recommend:
(1) Set imageVAlign to CENTER (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) and the white gap will be equally split between the top and bottom of the image (instead of all at the bottom) and it should be less obvious.
(2) Use larger images in your gallery so that they need to be dynamically scaled down (by Juicebox when the gallery is displayed) and are displayed as large as possible within the gallery's image area (minimizing the white gap). With the default value of SCALE_DOWN for imageScaleMode (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section), small images are not scaled up and space might be seen above or below the images. (You could always change imageScaleMode to SCALE to scale up small images if you like but using larger gallery images would be a better solution.)
1024 x 768 is usually a good 'average' image resolution for most galleries but if you know your target audience is likely to be viewing your gallery on large monitors, then larger images might be more suitable for you. (Larger images will still look fine on smaller monitors as Juicebox will scale them appropriately. The only drawback is that larger images will consume more bandwidth when they are downloaded by the user's browser.)
It looks like you're already using a Multi-Size Image gallery. You might just need to bump up the resolution for the 'medium' size images a bit.
As far as I am aware, there in no difference in the handling of accented characters between v1.4.3.1 and v1.5.0 so the problem is likely to be caused by something else.
It looks like the first 4 images in your 'PreselectEIv15' gallery (the ones with accented characters) do not exist in their correct locations (or at all) on your web server.
If I try to view the 1st image in your gallery directly in a browser (bypassing Juicebox entirely), I get an error 404 (file not found).
Maybe something happened during the initial upload process that has resulted in the first 4 images not being uploaded to your web server.
Try re-uploading your v1.5.0 gallery's image files and you should hopefully see your images in your v1.5.0 gallery as you do in your v1.4.3.1 gallery.
Also, as an image filename forms part of a URL when uploaded to a web server, it would be wise to use only web-safe characters within image filenames. Please see section 2.3 of this document for details.
Characters that are allowed in a URI but do not have a reserved purpose are called unreserved. These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.
JuiceboxBuilder-Pro can handle all images whose filenames use any or all of these unreserved characters.
Stick to web-safe characters for filenames (rather than accented characters or other non-web-safe characters such as spaces) and continue to use accented characters in your image titles and captions and you should be fine.
Suddenlyall my galeries that I published for3 years do not appear when I am connected.
If you have not changed anything with regard to your gallery, then the gallery's code and files should remain constant and should still display fine as it did in the past.
What you say above certainly sounds like a server issue.
I would recommend that you contact your web host and ask them if they have been experiencing any issues lately that might be contributing to your problem.
Thumbs are black and the pictures do not appear.
Looking at your gallery's 'config.xml' file, the 10th image in your gallery (for example) should be located here: http://www.helenebarnaud.com/BLOG/GAL_N … _NORTH.jpg
However, going directly to that location directly in a browser (bypassing Juicebox entirely) results in an error 404 (file not found).
It looks like your gallery's images may no longer be located in their correct locations (or at all) on your web server.
If your web host has been experiencing problems, then maybe they have had to reinstate your web site using an incomplete backup.
Please check that your image and thumbnail files are in their correct locations on your web server and that their permissions (and the permissions of the 'images' and 'thumbs' folder themselves) are not too restrictive.
Default permissions of 755 for folders and 644 for files should be fine.
You can check and change permissions with an FTP program such as Filezilla or via your web hosting account's online file manager.
This happens only with my computer, not with another computer.
When I get an error 404 (trying to view image #10, for example), this indicates that there is a problem with the images on your web server. If you find a computer that displays your gallery fine, then it may be because the browser on that computer has viewed your gallery before and has cached your gallery files.
If you are sure that your gallery was complete and working OK but now is not, then some images certainly seem to be missing from your web server at the moment and your web host might be able to help you further (or at least explain why some images are missing).
If you have a local copy of your gallery on your computer, then perhaps the best course of action would just be to upload all the images to your web server again.
Many thanks for providing the link to your gallery.
The problem is that you've set expandInNewPage="TRUE" (in conjunction with useFullscreenExpand="TRUE").
The gallery can be expanded either on top of its own embedding page (with useFullscreenExpand="TRUE" or useFullscreenExpand="TRUE") or on a new page of its own (by setting expandInNewPage="TRUE").
The gallery can be displayed using the Fullscreen API only when it is expanded on its own embedding page. (The Fullscreen API cannot be invoked when the gallery is expanded on a new page.)
Therefore, when expandInNewPage="TRUE", useFullscreenExpand is redundant and it not used.
Just set expandInNewPage="AUTO" (or remove the entry completely as the default value for this option is AUTO) and this should resolve your problem.
Incidentally, when expandInNewPage="TRUE" (and useFullscreenExpand is not used), the Expand Button will be displayed on the Button Bar only if the gallery is embedded at less that 100% x 100%.
Please let me know how you get on. Thank you.
[Posts split from Feature Request forum to new thread.]
... is it possible to mix portrait and landscape format images in the same gallery?
Yes. You can certainly display both portrait and landscape images in a single Juicebox gallery. (Just add all the images you want to display to your gallery. There is no need to treat portrait-style images any different from landscape-style ones.)
A gallery's dimensions do not change depending on the aspect ratio of the image being displayed.
The gallery's dimensions are determined by the galleryWidth and galleryHeight options (set in the gallery's embedding code).
They can be fixed pixel values or percentages (of the gallery's parent container).
As long as the user does not change the shape of the browser window, then the gallery's size will remain constant.
Images within the gallery will then be scaled according to the imageScaleMode option.
A short description of imageScaleMode (listing all its possible values: SCALE_DOWN, SCALE, FILL, STRETCH and NONE) can be found in the Main Image section of the 'Config Options' page.
The default value for imageScaleMode (used in Juicebox-Lite and when the option is not explicitly set in Juicebox-Pro) is SCALE_DOWN where large images (whether portrait or landscape-style) will be scaled down to fit within the gallery's image area as large as possible, respecting their aspect ratios and without cropping. (Small images are not scaled up as this would reduce their visual quality. You can have small images scaled up if you like by changing the imageScaleMode value to SCALE.)
imageScaleMode is a Pro configuration option (supported only by Juicebox-Pro, not Juicebox-Lite) and can be found in JuiceboxBuilder-Pro's 'Customize -> Main Image' section.
Take a look at this full-page demo gallery which features both portrait and landscape-style images.
You'll notice that the gallery size does not change (unless you change the size of your browser window) but the images (no matter what their aspect ratios are) are always displayed in their entirety.
(This example happens to be a full-page gallery but gallery images would be scaled similarly no matter what gallery size you have.)
I hope these notes help.
I'm using Pro 1.4.3.
I'd recommend that you upgrade to v1.5.0 as many bugs have been fixed (and new features added) since v1.4.3.
Please see the Version History page for a list of changes between versions.
Full instructions for downloading the latest version (and for upgrading JuiceboxBuilder-Pro and existing galleries) can be found on the Upgrading Juicebox support page.
Unfortunately, it is not possible to include image data in a gallery's embedding code.
Currently, every Juicebox gallery must have a separate JSON or XML configuration file, even if you use Flickr as a source of images (so imageURLs and thumbURLs are not required) and set all your configuration options in the embedding code.
I realise that this is not the answer that you were hoping for but it should at least clarify things for you.
Thank you for posting this as a suggestion in the Feature Requests forum thread (along with your other suggestion).
I figured it out!
I'm glad that you've been able to resolve your problem. Thank you for letting me know.
What I didn't realize is that when I saved the page in JuiceboxBuilder-Lite that the program created the gallery webpage on its own!
Yes. JuiceboxBuilder-Lite creates an 'index.html' page which is ideal for displaying the gallery on a page of its own without any other content. You would need to follow the embedding instructions only if you want to embed the gallery into an existing page alongside other content.
Again thanks for your help...
You're welcome.
... and have a great day!
You, too!
... only loads first photo if I click on photo the full gallery page comes up and gallery works.
What you are describing is the Splash Page.
Please see this forum post for more information about the Splash Page (and how to use and configure it).
Your 'ngmsigns' gallery sets showSplashPage="AUTO" (Juicebox will display the Splash Page on mobile devices) whereas your 'gundogbreeds' gallery sets showSplashPage="NEVER".
If you set showSplashPage="NEVER" for your 'ngmsigns' gallery, (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section), then this should hopefully resolve your problem.
Hey Steven - first of all I want to thank you for trying to help me with this.
You're welcome.
I got all the files out of the adriannelugo.com/images folder and just saved my juicebox image gallery into that folder.
That doesn't sound like what I was suggesting. Your images should be in your 'adriannelugo.com/images/' folder (and they didn't seem to be there). I was suggesting that you make sure that your gallery's 'images' folder is directly inside your 'public_html' folder and that the image files themselves are inside the 'images' folder. All this should have been correct as long as you initially uploaded the entire contents of your gallery folder to your 'public_html' folder without changing the structure of the gallery (and assuming that nothing went wrong during the upload process).
Now when I go to that link the whole thing is just blank.
The problem at the moment is that the path to your 'juicebox.js file (within your 'adriannelugo.com/juicebox_portfolio.html' page) is incorrect. The path leads to 'adriannelugo.com/jbcore/juicebox.js' but the JavaScript file is not there.
It took me an hour to do all this and redo all my links and move my other images around so this is getting frustrating.
None of this (redoing links and moving images around) should be necessary.
If all you want to do is have a full page Juicebox gallery accessible at 'adriannelugo.com/juicebox_portfolio.html', then all you need to do is:
(1) Create a gallery in JuiceboxBuilder-Lite and save the gallery to a new empty folder.
(2) Rename the 'index.html' file (inside the gallery folder) to 'juicebox_portfolio.html'. (This is not a necessary step but it looks like the page name you'd like to use and you may have existing links elsewhere within your site that use this page name.)
(3) Upload the contents of your gallery folder (not the gallery folder itself) to your web root directory (your 'public_html' folder).
That's essentially it. You're using the gallery's own 'index.html' file (although renamed) so there is no need to copy and paste any embedding code (it's already present in the gallery's 'index.html' file). There is also no need to rename any other files, change any paths or change the structure of the gallery by moving any files.
I hope this helps to clarify the process for you.
Thanks for pointing out Multi-Size images!
You're welcome. I hope it helps a bit.
Even if it's not a complete solution to your problem, it's perhaps a step in the right direction.
Can I tell juicebox somewhere "along the way" to enable looping.
Unfortunately not.
There is no Juicebox-Pro API method available to toggle enableLooping on and off and configuration options cannot be set after a gallery has been loaded (you'd need to reload the gallery with the new value).
@support+juicebox
Thanks for the update! It's most appreciated.
@support+juicebox
Many thanks for the additional information!
Incidentally, while new information is being added to this thread, support for purchase URLs (which I mentioned in my post above) was added to Juicebox-Pro in v1.4.0. Please see the Version History for a list of changes between versions and the Using Custom Purchase URLs support section for more information on the use of purchase URLs.
Can juicebox be adapted to tell the browser to load the images sequentially (by name)?
No, unfortunately not. The only control you have over the preloading of images is the imagePreloading configuration option (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).
I think your issue is a direct consequence of setting enableLooping="TRUE".
Normally, Juicebox-Pro will preload both the previous and next images in the gallery (both images adjacent to the current image) so that they are ready to be displayed should the user click the 'previous' or 'next' navigation button.
If enableLooping="TRUE", then the previous image will be the last image in the gallery (in your case No. 9) and Juicebox just seems to preload this before No. 2, No. 3, etc.
As you are aware, large file sizes and a slow connection are also contributing factors.
As an example, if you were to create a gallery using JuiceboxBuilder-Pro with all default values, then the resulting image sizes would be around 120KB. With even just an 'average' connection speed, this would probably not be an issue.
However, real-life constraints (such as a slow connection speed) will certainly make a difference and you might need to counteract such factors by doing thing like reducing your image sizes (especially if you know that your gallery's target audience is likely to have a slow connection).
The other option would be to set enableLooping="FALSE". Perhaps not something you'd like to do in an ideal scenario but a compromise that would help to resolve your problem.
Please also see my notes regarding Muti-Size Image galleries in your other thread. They might be of interest to you.
If you'd like to suggest an idea for a future version, please feel free to post in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
I do not know the likelihood of any suggestions being implemented but this is certainly the best place for all ideas.
Thank you.
I might try setTimeout if necessary.
It looks like this might be the best course of action (other than changing the filesize of your images).
I have also resorted to smaller images already. This just is the No.1 performance parameter...
As a side note, you might like to look into having a Multi-Size Image gallery. Please see the Multi-Size Image Support section for details.
In a Multi-Size Image gallery, up to 3 different sizes of images can be used and Juicebox-Pro chooses the most appropriate image size depending on factors such as the device, screen size and pixel density being used to view the gallery. The speed of the connection is not a factor in deciding which image size to use but at least you should be able to feed smaller images to mobile devices to minimize the problem as much as you can.
Basically my problem is starting to go off topic and therefore I will start another thread for this.
OK. No problem.
Thank you for reporting this. It certainly looks like a bug (thumbnails do not AutoHide when showInfoButton="TRUE" and overlay is toggled off). I've notified the developers.
It looks like the problem is directly related to the Info Button so a workaround might be to set showInfoButton="FALSE".
...I don't want the Info Bar to be constantly overlaying and therefore obscuring the image.
If you still want to display the Button Bar but just don't want it to be overlaid on top of your images, you can set buttonBarPosition="TOP" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section). The Button Bar will then always be positioned at the top of the gallery above the images (not on top of them). You can set the topAreaHeight (in JuiceboxBuilder-Pro's 'Customize -> General' section) if you like.
If you don't want the Button Bar to be displayed at all, then you can set buttonBarPosition="NONE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section).
Thanks again for reporting the problem.
Set useFullscreenExpand="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' options) and the Expand Button will be displayed on the Button Bar (even in a 100% x 100% gallery) and the gallery will be expanded fullscreen as long as the browser supports the Fullscreen API.
Here's a demo with a 100% x 100% gallery with useFullscreenExpand="TRUE" and the Expand Button displayed on the Button Bar (third icon from the left): https://www.juicebox.net/demos/pro/full/
I hope this helps.
If you have a gallery that you're having trouble with, please let me know (and provide a link so that I can see the problem for myself) and I'll move your query to a new thread of its own.
Thank you.
I think GODaddy puts them into a folder...
If your web host is GoDaddy, then they provide your web space but where files and folders are uploaded to within your web space (and ultimately located) is up to you.
If you are not already using an FTP program to transfer your files from your computer to your web space, then I'd recommend trying one (such as Filezilla). Once you're logged into your hosting account, you'll be able to drag and drop files and folders from your computer into the FTP interface to upload them to wherever you like within your web space.
I think GODaddy puts them into a folder with the location:
http://adriannelugo.com/public_html/images rather than directly in the root folder.
'public_html' is the name of the directory on your web server that represents your web root. ('public_html' does not form part of a URL.)
For example, if you upload a file named 'main.html' to your 'public_html' directory, then it will be accessible at http://adriannelugo.com/main.html.
So I just need to figure out how to move them where they need to be.
As you seem to have followed the regular embedding instructions here, all you should need to do to have your http://adriannelugo.com/juicebox_portfolio.html gallery work correctly is upload the contents of your gallery folder to your web root directory (the 'public_html' directory). The gallery's 'images' folder should reside directly inside the 'public_html' directory (alongside the gallery's 'thumbs' folder).
Why can't I just change the path in the embed code? Wouldn't that be easier?
As long as you follow the embedding instructions correctly, then there should be no need to change any paths in the embedding code (or elsewhere).
If you changed the structure of your gallery, then you could (if you wanted to):
(1) Use a configUrl in your embedding code to point towards a specific XML configuration file (if you have moved or renamed the gallery's 'config.xml' file).
(2) Use a baseUrl in your embedding code to point towards a complete gallery folder (if you have uploaded a complete gallery folder to your web server rather than just the contents of a gallery folder). The baseUrl method of embedding is documented here.
Short descriptions of configUrl and baseUrl can be found in the Embed Options section of the Config Options page.
The paths to the images themselves can be found inside the XML configuration file. (You can open a gallery's XML configuration file in a plain text editor and change the imageURL and thumbURL paths if you like.)
Relative paths are relative to the web page containing the gallery's embedding code (or a baseUrl if one is used).
(imageURL and thumbURL entries can be absolute as well as relative.)
All you should need to do though, is make sure that your gallery's 'images' folder is directly inside your 'public_html' directory, alongside your gallery's 'thumbs' folder. If it is already there, then check its permissions (as I suggested in my post above).
This should hopefully solve your problem.
According to your gallery's 'config.xml' file, the first image in your gallery should be located here: http://adriannelugo.com/images/2_n.jpg
... but going directly to that location in a browser results in an error 404 (file not found).
It looks like your gallery's images have not been uploaded to your web server (or at least not to the correct location, your http://adriannelugo.com/images/ directory).
Please check that your image files have been uploaded to the correct location on your web server and that their permissions (and the permissions of the 'images' folder itself) are not too restrictive.
Default permissions of 755 for folders and 644 for files should be fine.
You can check and change permissions with an FTP program such as Filezilla or via your web hosting account's online file manager.
Also, please see this FAQ which may help:
My images show locally, but not when I upload them to my website. Why?
The only other thing I can think of would be to start AutoPlay when the Juicebox-Pro API determines that the first image has been displayed for the first time (using the onImageChange event).
Try the following:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: "juicebox-container",
autoPlayOnLoad: "FALSE",
enableAutoPlay: "TRUE",
goNextOnAutoPlay: "FALSE"
});
var flag = false;
jb.onImageChange = function(e) {
if (flag === false && e.id === 1) {
jb.toggleAutoPlay();
flag = true;
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->If this still does not help, then you might need to use a setTimeout() delay (as I noted in my post above) or tweak your gallery's imagePreloading value and/or your image sizes (although I understand that you do not want to do this).
One more thing I'm not sure about, is the use of the config.xml file. As it contains the same statements...do I have to change anything in this file?
You can set configuration options in the gallery's XML file, in the embedding code or via a query string in the URL.
Please see the Setting Config Options support section for details.
If you have a certain configuration option set in both the embedding code and the XML file, then the value from the embedding code will take precedence. (Options set via the query string will override both embedding code and XML file options.)
I chose to add the configuration options required for my code to function correctly to the gallery's embedding code simply to keep my suggestion to a single chunk of code. You can set all your configuration options in your gallery's 'config.xml' file without any problem.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.