You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Unfortunately, the direct download functionality does not work on iOS devices so Juicebox automatically hides the Download Button when an iOS device has been detected. (The Direct Download button should display and function fine on Android devices, though.)
... I'm creating galleries with little/no problems now.
That's really great to hear! Thank you for letting me know.
Thank you for the update.
I'm glad we've been able to figure out the cause of your problem.
It's certainly safer to use only web-safe characters in image filenames (but you can still use whatever characters you like in image titles and captions).
The just showed up as broke images in JuiceboxBuilder-Pro as well as in the Lite version.
Thank you for the additional information.
The only thing I know of that would cause the problem you describe (a broken image icon on JuiceboxBuilder-Pro's 'Images' tab) is if an image filename contain a comma (',').
The developers are aware of this issue and a bug report has been logged so hopefully it will be addressed and fixed in a future version.
In the meantime, 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.
You should have no trouble (either in JuiceboxBuilder-Pro or on your web server) if your image filenames use only these web-safe characters.
I hope this helps to explain what you are seeing.
It sounds like you might be referring to adding image to a gallery in JuiceboxBuilder-Pro (rather than actually uploading your images to your web server).
Unfortunately, JuiceboxBuilder-Pro can handle images of no more than 4095px x 4095px when creating a gallery. (This is true of all versions of JuiceboxBuilder-Pro, including the current version, v1.5.1.) This is a limitation of Adobe AIR (the platform on which JuiceboxBuilder-Pro runs). Adobe AIR uses Adobe Flash Player as its runtime environment and the largest image size which Adobe Flash Player can handle is 16,777,215 pixels. This equates to a square image of 4095 x 4095. Please see this web page for details.
If you have images larger than this maximum resolution, then you could perhaps do one of the following:
(1) You could resize your images first in an imaging program (such as Adobe Photoshop) before feeding them to JuiceboxBuilder-Pro. (If you do resize your images prior to using JuiceboxBuilder-Pro, be sure to deselect the 'Resize Images' checkbox on the 'Images' tab to ensure that JuiceboxBuilder-Pro does not resize your images again.)
(2) There are plugins available to create Juicebox-Pro galleries with other programs (such as Adobe Lightroom) which do not have the upper resolution limit of JuiceboxBuilder-Pro. You can find details of these plugins here.
If you have Lightroom, Photoshop or jAlbum, you might like to try creating your galleries with these programs as an alternative to JuiceboxBuilder-Pro.
You should certainly be able to add small images to a gallery, though.
As a test, I've just tried images of filesizes 16KB and 28KB and both images display in the gallery as expected.
If the problem is with uploading your images to your web server, then the problem likely lies somewhere between your FTP program and your web server and your web host should be able to help you further.
I hope these notes help to clarify things.
However, if you continue to experience difficulties, please try to describe your problem in greater detail (let me know exactly what you are doing when the problem occurs and what, if any, error messages are displayed) and, if possible, please upload some of the images you are having trouble with (zip them, upload them somewhere and provide a download link) so that I can try to replicate your problem and help further.
Also, if the problem is with JuiceboxBuilder-Pro, it might help to know what resize dimensions you are using so please let me know this too.
Thank you.
Essentially, the problem is with the custom CSS on your embedding page (conflicting with the gallery's own CSS) rather than with the gallery itself.
As I mentioned above, a quick fix might be to just give your gallery a fixed height (of perhaps 600px) instead of a height of 100%.
galleryHeight: "600px",I hope this helps.
I'm sorry to hear that my suggestions have not helped.
I'm really not sure what might be causing your problem if it is not a default browser or file association issue.
If I think of anything else that might help, I'll be sure to post back.
In the meantime, the best course of action is to deselect the 'View in Browser' button and just double-click the 'index.html' file inside the gallery folder (as you are already doing).
It is happening in davebreen.com/scenics and /haircut (so far).
I see the problem you describe in your 'scenics.html' web page.
The problem is caused by the custom CSS on your web page (which seems a little confusing) rather than any gallery configuration options.
Your gallery has a width and height of 100% so it should fill its parent container.
However, the gallery's parent container (<div id="Gcode21" class="dfltc">) does not have any dimensions set via CSS so Juicebox will be unable to determine what the gallery's actual size should be (i.e. 100% of what).
To add to this, the <div id="Gcode21" class="dfltc"> container is nested inside the <div id="Oobj25"> container which has been assigned a width of 50.00em and a height of 30.80em and the <div id="Oobj25"> container is further nested inside the <div id="centered"> container which has been assigned different dimensions (a width of 432px and a height of 100%).
Here are a few tips which might help.
(1) Try to simplify your web page's layout (use only as many containers as you actually need). At the moment, your gallery is nested within 3 separate containers, each with different (or no) dimensions.
(2) If using a percentage height for your gallery, then make sure that all parent containers of the gallery have heights set via CSS (up to and including the body tag). Please also see the note regarding Using Percentage Heights.
(3) Try not to mix em, px and % for container heights. Stick to px and % to see if this helps.
(4) You also have some custom CSS (below) which will be applied to all <img> tags on your web page, including those in your gallery. The gallery will have no option but to inherit such generalized CSS code. Apply your custom CSS rules to only those elements on your web page that require them using CSS id and class selectors (rather than element type selectors).
img {
border-width: 0;
vertical-align: top;
}With all that in mind, I think a quick fix might be to just give your gallery a fixed height of, say, 600px (in the gallery's embedding code), e.g.:
galleryHeight: "600px",Incidentally, when I try to view your /scenics/ gallery (on its own 'index.html' page), I currently get an error 403 (forbidden) error which suggests that the 'index.html' file might be in place but with permissions that are too restrictive. Default file permissions of 644 should be fine. You should be able to check and change file and folder permissions via your web hosting account's online file manager or FTP program.
Should the "index page name" always be "index/html" (since I'm embedding galleries using baseURL), or should it include the page name I've given the page of my site? I don't find this covered anywhere.
You can name the gallery's HTML page anything you like. As you are using the baseUrl method of embedding, all gallery files will be contained within the gallery folder so there is no chance that files will clash with conflicting filenames so you can safely leave the name for each gallery's HTML page 'index.html' (although you can change this for each gallery if you want). If you plan to embed your galleries in existing web pages and do not want to display the galleries on pages of their own, then the gallery HTML pages are actually redundant and can be deleted from the gallery folders if you like.
I have noticed an inconsistency, however. I'm getting a dark area below images in my davebreen.com/scenics gallery, but not in a "hidden gallery" (davebreen.com/page5).
This is possibly due to setting captionPosition="BELOW_IMAGE" in your 'scenics' gallery.
When captionPosition is set to OVERLAY or OVERLAY_IMAGE, the height of the caption area is variable (it will increase, if necessary, to accommodate long captions) up to a maximum value set via maxCaptionHeight (default value, 120px).
However, when captionPosition is set to BELOW_IMAGE, BOTTOM or BELOW_THUMBS, the height of the caption area is fixed at the maxCaptionHeight value so, unless you change the value of maxCaptionHeight (or the captionPosition), there will always be a reserved area 120px high below your images.
For reference, short descriptions of all the Caption Options and their possible values can be found here.
OK, I've found the config document that goes to the webhost. Is it updated if I reopen a gallery in Builder? I would need to send the new one to the host, correct?
Just to clarify, the gallery's configuration options are stored in the 'config.xml' file.
If you open and edit a gallery with JuiceboxBuilder-Pro, the 'config.xml' file will be updated (with any new image data and modified configuration options) when the gallery is re-saved on the 'Publish' tab.
You will then need to re-upload the new version of the 'config.xml' file to the gallery folder on your web server (along with any new images and thumbnails you have added to your gallery).
Well, now I've lost the gallery of scenics.
When I go to '/scenics/index.html', I get an error 404 (file not found).
It looks like the gallery's 'index.html' file (inside the 'scenics' folder is missing). You'll need it to display the gallery on its own web page.
However, as long as all the other gallery files are present and correct, you can still embed the 'scenics' gallery into another web page by using the following embedding code:
<!--START JUICEBOX EMBED-->
<script src="/scenics/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: "/scenics/",
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "600",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->I'm glad you've got your gallery image displaying as it should but it seems very strange that a ' character in an image title should cause a problem.
WP-Juicebox enclosed image titles and image captions within CDATA tags so apostrophes should cause no problems.
Also, as you say, you have other images with apostrophes in their titles which display without issue.
In any case, I'm glad things are working the way they should.
I'm glad you're making progress. Thank you for letting me know.
I hope you get on OK but if you get stuck with anything, just let me know and I'll do my best to help you out.
Even though your system tells you that Safari is the default browser, try changing it to something different, e.g. Chrome or Firefox (and check the JuiceboxBuilder-Pro 'View in Browser' functionality after doing so), and then change it back to Safari.
I'm not sure if this will help but it's certainly worth a try.
When a gallery is expanded on a page of its own (when setting expandInNewPage="TRUE"), Juicebox uses a session cookie to pass the gallery's configuration options on to the new web page.
However, this is just a session cookie which is automatically deleted when the browser sessions ends.
Juicebox does not set any persistent cookies and there is no association between Juicebox and carrierzone.com.
Your carrierzone.com cookie has nothing to do with Juicebox.
I hope this helps to clarify things.
Many thanks for providing your Filezilla screenshot.
Your root directory is named 'davebreen.com' and you have successfully uploaded your gallery folder (named 'Kayden') to your root directory.
You can now view your gallery (on its own web page) by visiting [Link removed.].
(I'll delete this link once you've had a chance to check it out.)
If you want to embed the gallery into an existing web page alongside other content, then all you have to do is add the following embedding code into the web page wherever you want the gallery to appear (and you can leave all your gallery files exactly where they are).
<!--START JUICEBOX EMBED-->
<script src="/Kayden/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: "/Kayden/",
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "600",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
There should be no need to modify this embedding code at all (no matter where on your web server the embedding page is) but you can change the gallery dimensions and background color if you like.
If you are using a web design package to add the embedding code to a web page, then make sure that you add the embedding code (above) as HTML code and not plain text.
It looks like you've not attached a screenshot to your post so I'm not able to take a look at your Filezilla window.
At its most basic, all you need to do to have a gallery live on your web server is upload the entire gallery folder to your web server (anywhere will do as long as you know where it is).
You can then view the gallery (on its own web page) by visiting the gallery's 'index.html' file (inside the gallery folder) in your browser.
I'd recommend uploading the gallery to the root directory of your web space for convenience.
The root directory is the directory that you'd upload a file (or folder) to so that it is the first thing in the URL after your domain name.
For example, if you uploaded a file named 'test.html' to your root directory and your domain name is www.example.com, then you would be able to view the 'test.html' file using this URL: http://www.example.com/test.html.
The root directory is usually named something like 'public_html', 'htdocs' or 'www' but if you are unsure what your own root directory is named (or how to navigate to it using an FTP program), then your web host should be able to help you out.
Once you've got the gallery uploaded to your web server, you can then embed the gallery into an existing web page alongside other content (if you want to), by copying and pasting the embedding code I posted above into your web page wherever you want the gallery to appear. (The embedding code assumes that your gallery folder is named "my_gallery_folder" and has been uploaded to your root directory. As long as this is true, then the embedding code can be used exactly as it is without modification.)
I hope this makes sense.
If you continue to experience difficulties, then please let me know how far into the process you get and what seems to be the stumbling block.
Also, please post the screenshot you mentioned so that I can see what you are referring to. It might help me to troubleshoot your problem. Thank you.
The hexagon spinner you describe is displayed whilst an image is loading (and will continue to be displayed if an image cannot be loaded for whatever reason).
Please see this FAQ which might help:
My images show locally, but not when I upload them to my website. Why?
Try viewing the images you are having trouble with directly in your browser (paste the location of each image directly into your browser's address bar), bypassing Juicebox, to see if the images are displayed on their own.
If the images are not displayed, then, as well as the suggestions in the FAQ above, please check the following:
(1) Make sure that the images have actually been uploaded to your web server successfully and are in the correct location.
(2) Make sure that the images on your web server do not have permissions that are too restrictive and prevent them from being displayed. Default permissions of 644 should be fine. (You should be able to check and change permissions using your web hosting account's online file manager or a dedicated FTP program.)
I hope this helps.
However, if you continue to experience difficulties, then please post the URL to your gallery's web page so that I can see the problem for myself and hopefully help further.
Once I am able to see your gallery live on your web server, I should hopefully be able to determine the exact cause of the problem and propose a solution.
Yes! works now.
That's great! Thank you for letting me know.
In the Publish-section I can check "View in Browser". When I do so, and safe the project, the text editor opens the project instead of my standard browser Safari.... Can this be changed?
Selecting "View in Browser" should open your gallery's 'index.html' file in your system's default browser.
Please check that Safari 11 is your system's default browser by following the instructions on this Apple support page.
Also, check your system's file association for HTML files. It sounds like HTML files are currently associated with your text editor instead of Safari 11. Please check out this Apple support page for details, specifically the "Permanently change the app used to open a file" section.
Embedding a Juicebox gallery into an existing web page alongside other content just involves copying the embedding code (presented on JuiceboxBuilder-Lite's 'Publish' tab and also noted in the Embedding Guide) into your web page wherever you want the gallery to appear.
It jumps out of the iframe all together, it takes over the browser.
As I mentioned above, the problem is the location of the Juicebox embedding code on your web page. (The embedding code itself is OK.)
The embedding code is currently at the foot of your web page and is not inside any of your web page's existing containers.
If the embedding code was inside the container where your old gallery was, then it would be 'contained' within this container and the gallery, having a width of 100%, would fill only the width of the parent container (and not the entire width of your web page).
There are a lot of <div> containers on your web page and it is difficult to know exactly which container the gallery should be inside as the <div> containers on your web page do not use descriptive CSS class names or ids (like 'header' or 'content').
However, just try moving the gallery to inside the outermost <div> to see if this makes a difference.
Look for the first closing </div> tag above your gallery's embedding code and move it to below your gallery's embedding code.
Hopefully this will make a difference. (Even if it does not solve the problem outright, it might at least help by restraining the gallery's width to that of the main content area on your web page.)
If you are following the regular embedding instructions (here), then you would normally upload the contents of the gallery folder to the same directory as the web page that you want to embed the gallery into.
However, if all your web pages are in a single folder (such as your root directory), then you would likely run into difficulties if you tried to upload the files for multiple galleries to the same folder (you'd end up with conflicting filenames and subfolders containing files for multiple galleries).
I'd recommend using the baseUrl method of embedding documented here.
It allows you to keep each gallery self-contained in its own folder and you would upload the complete gallery folders (not just the contents) to your web server.
The baseUrl embedding code is essentially the same as the regular embedding code but with a baseUrl entry pointing towards the gallery folder.
It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself) are correct.
I'd recommend that you upload your gallery folders to your root directory (usually labelled something like 'public_html' or 'htdocs') just for convenience. As long as each gallery folder has a unique name, there will be no trouble with conflicting filenames.
Here's an example of what you could do.
(1) Create a gallery with JuiceboxBuilder-Lite and save it to a new empty folder (in this example, named "my_gallery_folder").
(2) Upload the entire gallery folder to your root directory (usually labelled something like 'public_html' or 'htdocs') with your FTP program (e.g. Filezilla). (If you do not know what your root directory is labelled as, then your web host should be able to let you know.)
(3) You should now be able to view the gallery on its own web page by visiting http://www.example.com/my_gallery_folder/index.html (replacing www.example.com with your own domain name).
(4) Use the following embedding code to embed the gallery into an existing web page alongside other content.
<!--START JUICEBOX EMBED-->
<script src="/my_gallery_folder/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: "/my_gallery_folder/",
containerId: "juicebox-container",
galleryWidth: "800",
galleryHeight: "600",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->The leading slashes in the paths above denote your root directory so, as long as your gallery folder has been uploaded to your root directory, the embedding code above will work in any web page throughout your website (no matter where it is) without modification.
I hope this helps.
As far as I am aware, if you are using the Drupal module, then Pro configuration options (such as imagePreloading="NEXT") can be entered into the 'Juicebox Library - Pro / Manual Config' section of your Drupal Dashboard ('Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings').
Pro configuration options entered here should automatically be entered into the gallery's 'config.xml' file.
Please note that the Juicebox module for Drupal is an unofficial plugin which was not written by ourselves and, as such, I am not overly familiar with its code, interface or inner workings.
If you need further support for the module, then please post in the Drupal forum where its author should be able to help you out.
It's just a matter of getting the Juicebox embedding code in the right place on your web page (replacing your current gallery's code with the Juicebox embedding code in the same place within the page).
If you are having trouble with your web design software, then you could try opening your gallery's HTML web page in a plain text editor and swapping your current gallery's code with the Juicebox embedding code manually.
You are unlikely to be able to upload an entire Juicebox gallery (retaining its folder structure) using a browser-based file manager. (Online file managers usually allow you to upload only individual files, not folders.)
You'll need FTP access to the web space that GoDaddy provides to you and you can then use a dedicated FTP program (such as Filezilla) to upload your Juicebox gallery to your web space with a single drag and drop action.
The CPanel instructions are for Linux Hosting but you mentioned Plesk so it sounds like you have Windows Hosting.
Here is GoDaddy's "FTP: Upload my files to Plesk hosting" support page (the second part of the document you attached to your last post). (They recommend Filezilla, too.)
I hope this points you in the right direction.
If you run into any problems with FTP on your hosting account, then your web host (GoDaddy) should be able to help you out.
I'm not sure what might be causing your problem.
I've just created a test site on my own web space with a Juicebox gallery page, added it as a Search Console property, verified the site ownership and run Fetch as Google , which, according to the Google support page "enables you to test how Google crawls or renders a URL on your site". No errors were reported, so I've been unable to replicate the problem you describe.
Maybe the troubleshooting tips in the Fetch as Google support page will help.
Perhaps the problem is due to the use of https://. I notice on the support page:
Fetched URLs are limited to the current site: for example, if the current Search Console property is to http://example.com you cannot fetch a URL from https://example.com or http://m.example.com.
Otherwise, as the error message contains 2 separate references to the server ("your server requires authentication to access the page" and "or because the server blocks Googlebot's access to your site"), maybe your web host can shed some more light on the problem for you.
... some of the photos cover the T logo at the top right, and go beyond the frame I have set.
It looks like you have copied and pasted the Juicebox embedding code at the very end of your 'Gallery' web page (just before the closing </body> tag).
The Juicebox embedding code (or more specifically the <div id="juicebox-container"><div> container) should be placed in your web page wherever you want the gallery to be displayed. The Juicebox embedding code should replace your existing gallery code but it looks like you might have just removed your existing gallery code and added the Juicebox embedding code to the end of the web page.
It looks like the Juicebox embedding code should go inside your <div id="imageGallerySimple_v11_0" class="xwidget simpleGallery"></div> container (but you might need to keep the 'id' and 'class' attributes intact in case there is some custom CSS on your web page which defines the dimensions of this container which you might want to retain).
Incidentally, embedding a Juicebox-Lite gallery is exactly the same as embedding a Juicebox-Pro gallery.
I also would like the photos to expand to original size when clicked on but that is probably not possible.
If you set showOpenButton="TRUE" (in JuiceboxBuilder-Lite's 'Customize' section), then the Open Image button will be displayed on the Button Bar.
When the Open Image button is clicked, the gallery will open the corresponding imageURL (the gallery image) in a new tab unless there is a linkURL specified for the image, in which case this will be used instead.
The linkURL can be a relative path (relative to the web page containing the gallery's embedding code) or an absolute path, in the form http://www.example.com/images/image_0001.jpg.
You can set a unique linkURL entry for each image on JuiceboxBuilder-Lite's 'Images' tab (just click a thumbnail to reveal the input fields at the bottom of the window).
(If you wanted to allow users to open images larger than those used in the gallery, then you could prepare larger images and point towards them using the linkURL entries.)
You could also set imageClickMode="OPEN_URL" (Pro only, via JuiceboxBuilder-Pro's 'Customize -> Main Image' section).
Now, when you click the main image, the linkURL (or imageURL if there is no corresponding linkURL) will be opened (instead of navigating to the previous or next image). Navigation can still be achieved via the navigation buttons.
I hope this helps.
I'm glad you've been able to sort thing out. Thank you for letting me know.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.