• Registered: 2017-05-27
  • Posts: 4

Topic: Why not responsive

Hi,

I have tried many different ways to make my Juicebox gallery to be responsive to all devices.

I have one major issue and one smaller issue.

The major issue is that when viewing the images on smaller screens such as iPhone6, the images does not scaled down. Just a small portion of the image is visible on the screen of the phone. I want the full image to be seen not cropped and not stretched.

The minor issue. When viewing the images on other phones with bigger resolutions, the image goes all the way to the edge on two sides of the phone. I have tried to change all the parameters with some type of width. These settings change the size of the boundaries around the image when viewed on computer but not on phones. But when viewed on bigger Android and iPhone screens the image goes all the way to the edge of the screen.

Here is an example of my gallery: http://www.angelhag.se/gallery/ac/index.html

I hope someone can help me out here.

Anders

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Why not responsive

I'm sorry to hear that you are having difficulties with Juicebox-Pro.
Hopefully my notes below will help.

I have tried many different ways to make my Juicebox gallery to be responsive to all devices.

As your gallery is a 100% x 100% gallery with no other content on the web page, your gallery (but not necessarily the main image being displayed within the gallery) should completely fill the browser window.

No matter what size the gallery is, the main images within the gallery will be scaled according to the value of the imageScaleMode configuration option.
Please see the entry for imageScaleMode in the Main Image section of the Config Options page for short descriptions of the possible values (SCALE_DOWN, SCALE, FILL, STRETCH, NONE).

Your gallery uses the default value for imageScaleMode (SCALE_DOWN) so images will be scaled down (if necessary) to fit within the gallery's image area (after space has been reserved for other gallery elements such as the caption, thumbnail and TOP areas) without cropping or stretching. Small images will not be scaled up so, in a very large browser window, the images may be displayed at their actual size with space surrounding them. In such a scenario, you could instruct Juicebox-Pro to scale up small images (by setting imageScaleMode="SCALE") but their visual quality may decrease and a better solution is usually to provide larger gallery images (in terms of resolution).

These settings change the size of the boundaries around the image when viewed on computer but not on phones.

Your gallery uses stagePadding="20". This is a Large Screen Mode Option only (noted in the General section) so there will be 20px of space surrounding the gallery on all sides in Large Screen Mode (desktop browsers) but not in Small Screen Mode (on mobile devices). Other configuration options may also be Large Screen Mode only so please check the Config Options page for details.

I want the full image to be seen not cropped and not stretched.

I do not have an iPhone 6 but I have viewed your gallery in Mobile Chrome and Mobile Safari on an iPod Touch 6 running iOS 11.4.1 and everything looks as expected. All your images are displayed in full with their aspect ratios respected (with no cropping or stretching).

I notice that your gallery uses Juicebox-Pro v1.5.0.
Please try upgrading to the latest version (v1.5.1) to see if this helps with your problem. Many bugs have been fixed since v1.5.0 (please see the Version History page for details) and upgrading may fix your problem without any further action.
Full instructions for upgrading JuiceboxBuilder-Pro and existing galleries can be found on the Upgrading Juicebox support page.
Essentially, all you need to do to upgrade your gallery is to swap its existing 'jbcore' folder with the 'jbcore' folder from the Juicebox-Pro v1.5.1 zip package ('juicebox_pro_1.5.1/web/jbcore/').
After upgrading your gallery, please clear your browser's cache to ensure that your browser is using the latest versions of your gallery files from your web server (instead of cached versions).

If, after upgrading your gallery, you still see the problem, please let me know what browser(s) you see the problem in and what version of iOS your iPhone 6 is running.
If possible, please also provide a screenshot (you can attach an image to a post here in the forum or upload it somewhere and provide a link) so that I can see what you are seeing.
Thank you.

  • Registered: 2017-05-27
  • Posts: 4

Re: Why not responsive

Thanks for the prompt response!

I started to upgrade to 1.5.1. Unfortunately I can not use JuiceboxBuilder after the upgrade: "JuiceboxBuilder-Pro wants your confidential information stored in "Adobe.APS" in your keychain, and it does not help at alla to input any password". How can I fix this issue.

When it comes to creating the padding around the image on mobile phones, I have already checked all the config options. I checked again and can not find any setting that possibly can create a padding on small screens as all are tied to the large mode only. The only option would be to use the gallery width/height but it only leads to an asymmetric padding with a gap on either right or top side of image. Is there any option that I do not see that could createa a padding in small screens.

I will ask for the iOS version on iPhone6 and get back if this problem not is helped by 1.5.1, once 1.5.1 works.

Thanks again for your support

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Why not responsive

Unfortunately I can not use JuiceboxBuilder after the upgrade: "JuiceboxBuilder-Pro wants your confidential information stored in "Adobe.APS" in your keychain, and it does not help at alla to input any password". How can I fix this issue.

With JuiceboxBuilder-Pro closed, please manually delete the following folders and try running JuiceboxBuilder-Pro v1.5.1 afterwards.
~/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro
~/Library/Preferences/JuiceboxBuilder-Pro

This has worked for a couple of users in this forum thread.

If this does not help, then please try the "Fixing Mac EncryptedLocalStore database access error" procedure outlined in this Adobe forum thread. Please note that a couple of posts later in that thread, a user claims that it is necessary to reboot your computer after the deletions.

One other user who has reported such a problem (in this forum thread), discovered that a workaround was to uninstall Adobe AIR and then download and install an earlier version of AIR (from the Adobe AIR archive page).
I would not normally recommend using an older version of any software but if it helps to get someone back up and running, then it might be a useful piece of information.

I understand that you'd like to get JuicboxBuilder-Pro v1.5.1 up and running (and I hope that my notes above help) but please remember that you can upgrade your gallery without using JuiceboxBuilder-Pro by just replacing its existing 'jbcore' folder with the 'jbcore' folder from the Juicebox-Pro v1.5.1 zip package ('juicebox_pro_1.5.1/web/jbcore/').

Is there any option that I do not see that could createa a padding in small screens.

No. stagePadding is a Large Screen Mode option only and there is no equivalent for Small Screen Mode. (Generally, browser viewports on mobile devices are small enough already and Juicebox-Pro does not feature an option to reduce the usable area of the gallery in Small Screen Mode.) If you want to introduce an unused area around your gallery in Small Screen Mode, you'd need to do so in your gallery's embedding web page using custom CSS (which is probably not as easy as it sounds in a 100% x 100% gallery which is designed to completely fill the web page).

I will ask for the iOS version on iPhone6 and get back if this problem not is helped by 1.5.1, once 1.5.1 works.

As long as imageScaleMode is set to either SCALE_DOWN or SCALE, then all main images in the gallery should be displayed in their entirety without any cropping or stretching.
As far as I can recall, no-one else has reported such an issue with the current version of Juicebox-Pro (v1.5.1) so hopefully upgrading your gallery (and clearing your browser's cache before reloading your gallery's web page) will solve your problem.

  • Registered: 2017-05-27
  • Posts: 4

Re: Why not responsive

Ok, so one good news and one bad news.

Good news: After using 1.5.1 for the build, and ensuring the cache was emptied, it now works on the iPhone6. And the gallery is nowresponsive on the devices I have tested.

Bad news is that the pop-up "JuiceboxBuilder-Pro wants your confidential information stored in "Adobe.APS in your keychain"-issue still remains after following the tips you referred to.
The files referred to does not even exist on my computer:
~/Library/Application SupportAdobe/AIR/ELS/JuiceboxBuilder-Pro
~/Library/Preferences/JuiceboxBuilder-Pro
And none of the other solutions helped either.
I am now running Adobe AIR 25 instead of 30 and still get the pop-ups.

Current status: If I click Deny in the pop-up appr 10 times through the workflow of Juicebox Pro the application actually delivers the gallery files at the end. As this is not a desirable workflow, I look forward to further ideas on how to remove this problem.

Again, thanks for the very prompt support!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Why not responsive

I'm glad to hear that upgrading your gallery has resolved your iPhone 6 problem.
Thank you for letting me know.

However, I'm sorry to hear that you are still having trouble with your "Adobe.APS" problem.

The files referred to does not even exist on my computer:
~/Library/Application SupportAdobe/AIR/ELS/JuiceboxBuilder-Pro

Apologies, there was a slash missing from the path that I quoted. (I have corrected my previous post.)
The correct location should be:
~/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro
... or:
/Users/Username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro

There will certainly be an 'ELS' folder (containing a subfolder named 'JuiceboxBuilder-Pro') somewhere on your hard drive and it should be in the path I corrected above.
If you cannot find the 'JuiceboxBuilder-Pro' subfolder by navigating towards it using the path, then try searching your hard drive for the term 'ELS'.
Once you have found the 'ELS' folder, delete the 'JuiceboxBuilder-Pro' subfolder within it (with JuiceboxBuilder-Pro closed).
This seems to have resolved the "Adobe.APS" problem for a couple of other users and I am hopeful that it will solve your problem, too.

Finding and deleting the 'JuiceboxBuilder-Pro' subfolder within the 'ELS' folder seems to be the key to solving the problem.
According to this Adobe forum post, the "Adobe.APS" problem is related to the Encrypted Local Store (ELS) API and deleting the ELS folder relating to JuiceboxBuilder-Pro (and allowing a fresh one to be automatically generated when the application is next run) should hopefully solve your problem.

  • Registered: 2017-05-27
  • Posts: 4

Re: Why not responsive

I understood where to look, but the AIR folder does not contain an ELS folder, only an folder with the name "Updated"
I have also searched for ELS folder on the complete HDD, and for other JuiceboxBuilder-Pro folders, and there are none.
Maybe this is the cause to the problem?
/Anders

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Why not responsive

Maybe this is the cause to the problem?

The lack of an 'ELS' folder could be the cause of the problem.
Please check the permissions on your ~/Library/Application Support/Adobe/AIR/ folder to see if they are perhaps read-only.
If they are, then try assigning the folder read and write permissions.
It might also be worth manually creating a folder named 'ELS' inside your ~/Library/Application SupportAdobe/AIR/ folder to see if this helps.

It certainly sounds like an underlying problem with your Adobe AIR installation so I would recommend posting in one of the Adobe AIR forums where you might find another avenue of help.

Hopefully my notes above will help (or at least point you in the right direction).
If I can think of anything else you could try, I'll certainly post back here to let you know.