You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
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.
JuiceboxBuilder does not read the image's EXIF orientation flag and dynamically rotate the image. It just displays the image (in the application's interface) as is. Also, when you allow JuiceboxBuilder to resize images when creating a gallery, all embedded metadata (including the EXIF orientation flag) is stripped from the image so the image in the gallery (displayed in a web browser) should be in the same orientation as it is in JuiceboxBuilder's interface. The image displayed in the gallery will have no EXIF orientation flag so no programs (such as web browsers) would be able to read such a flag and dynamically rotate the image.
However, it sounds like you might have deselected the 'Resize Images' checkbox, in which case JuiceboxBuilder would simply copy the source images across to the gallery's 'images' folder with all embedded metadata (including the EXIF orientation flag) intact and the web browser is reading the EXIF orientation tag and dynamically rotating the image in the gallery.
Regardless of the state of the 'Resize Images' checkbox, JuiceboxBuilder will always resize images (stripping out the metadata) for the thumbnails and this would explain why your thumbnails are oriented correctly (they do not have EXIF orientation flags) whereas some of your main images (which do have EXIF orientation flags) are not.
I can't be sure that this is what is happening but it sounds like it might be a possibility.
EXIF orientation can be a bit of a minefield at times and there seems to be little consistency in how the EXIF orientation flag is handled by different programs and platforms. This article (whilst a little out-of-date), gives a sense of how complex and confusing EXIF orientation can be.
One sure-fire way to avoid such problems would be to re-save your images (prior to feeding them to JuiceboxBuilder) in an imaging program (such as Adobe Photoshop) stripping out the EXIF metadata and, then, if necessary, rotate the images in JuiceboxBuilder's interface (via the rotate button near the lower right corner of the 'Images' tab after clicking the relevant thumbnail to reveal the input fields at the bottom of the window) so that it is visually oriented correctly.
I realise that this will add an extra step to your existing workflow but it should hopefully solve any orientation problems.
Otherwise, if you are not already doing so, just select the 'Resize Images' checkbox and allow JuiceboxBuilder to resize your images (making sure that the orientation is OK in JuiceboxBuilder's interface).
I hope this helps.
Thanks for posting your suggestion in the Feature Requests thread!
Unfortunately, the link you provided results in an error 404 (file not found) so I'm unable to see your gallery's web page.
However, it sounds like your problem may be specific to Drupal and the Juicebox module.
Please note that the module is an unofficial plugin which was not written by ourselves. As such, support for the module would be better directed towards the Drupal forum where the author of the module (who has a greater understanding of the module's code and the inner workings of Drupal) should be able to help you further.
I realise that this does not address your problem directly but I hope it at least points you in the right direction.
Unfortunately, I do not know why Windows 7's native scaling options do not work with JuiceboxBuilder-Pro (whether it's a Windows 7 or an Adobe AIR issue).
... you might want to think of the possibility to include some font scaling in the preferences.
This sounds like it might be best noted in the Feature Requests forum thread. I do not know the likelihood of any suggestions being implemented for future releases but this is certainly the best place for all ideas. Thank you.
You're welcome!
I'm glad it worked. Thank you for letting me know.
... I had been unable to find the Juicebox gallery folder. I have since found it.
When you create a gallery with JuiceboxBuilder-Lite, you can choose exactly where to save the gallery on the 'Publish' tab.
You can save a gallery to anywhere you like but I usually recommend a new empty folder on the desktop. Saving the gallery to a folder on the desktop is just convenient to quickly find it (at least for myself) and saving the gallery to a new empty folder of its own means that you can be sure that the only files inside the folder are the gallery files themselves.
I have a GoDaddy account...
I think I've done this in the past, but will have to rediscover how to do it.
If you have trouble uploading your gallery files to your web space, your web host (GoDaddy) should be able to help you further.
Here's the GoDaddy help page regarding "FTP: Upload my files to cPanel hosting" which might help.
I think all you might need to do is add the following line of code at the very end of (but still inside) your foreach loop:
$xmlRoot->appendChild($image);This should create a valid XML file with correct opening and closing <juicbeboxgallery> tags and no need to perform any string manipulation on the resulting file.
Your gallery images actually look OK in Edge to me.
I do not see any significant difference between the display of your gallery images in Chrome and Edge.
As your images should fit within your gallery's image without any dynamic scaling required, try turning of Juicebox-Pro's dynamic scaling (at least temporarily for testing purposes) to see if this makes a difference.
Set imageScaleMode="NONE" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).
I've not checked the exact dimensions of all your images but if there is any reason for Juicebox-Pro to dynamically scale an image, you might still find that increasing your image resolution will help. You might find that a 1024 x 768 image being scaled down to fit within your 600 x 600 gallery might look better than a 610 x 400 image (for example) being scaled down to fit within the same area.
Hopefully either setting imageScaleMode="NONE" or increasing your image resolution (but not both at the same time) will help.
@pantau
You could add the custom CSS to the template file that JuiceboxBuilder-Pro uses to generate the gallery's 'theme.css' file.
In doing so, the custom CSS will be included in all galleries created by JuiceboxBuilder-Pro.
Open the following file in a plain text editor and add the custom CSS to the bottom of the file.
Mac: /Applications/JuiceboxBuilder-Pro.app/Contents/Resources/template/jbcore/classic/theme.css
Windows: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\jbcore\classic\theme.css
I tested my suggestion on Windows 10 before I posted and it works for me.
I'm sorry to hear that it does not work on Windows 7 for you (but I expect this will be the case for all Adobe AIR applications).
Is your version of AIR up-to-date (v29.0)? If not, maybe upgrading it will help. You can download the latest version of AIR from here.
Unfortunately, I do not think that there is much else you can do (other than perhaps upgrade to Windows 10 but I'm sure there are reasons why you are still using Windows 7).
@pantau
Possibility to adjust caption font size...
There are currently no configuration options available to change the image title and caption font sizes (thank you for the suggestion) but it is still possible to do so (via HTML formatting or custom CSS).
Please see this forum post for details.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.