Topic: JuiceBox "not secure"?

Hi there,

I've downloaded the free version in order to test it.
Since I did the connection security of my website turned to not secure! You can have a look at https://jimmydance.com/gallery.html
As I'm interested to purchase JuiceBox Pro I want it to turn back.
Can you provide me a solution?

Thank you

Re: JuiceBox "not secure"?

The problem you are encountering is due to the Juicebox branding which is present only in Juicebox-Lite. (The Juicebox badge in the lower right corner of Lite galleries links to our http:// website.)
If you upgrade to Juicebox-Pro, the branding and link will no longer be present and your https:// web site will be fully secure once more.

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

Yep, I found it about an hour after my post but forgot to come back.

Now the other thing is I'm a bit worried about how user friendly juicebox is.
In my iPhone 4s after page loading (https://jimmydance.com/gallery.html) the gallery is froze and needs a lot of effort for me to access the navbar.
On my desktop the navbar completely disappears and if you want to access it you have to perform full screen operation and then back to the previous page.

Can you explain to me why is this happening? Please provide me with solutions.

Also. Does the JB includes the features of SV? As padding around photos is huge I don't like for visitors to scroll down (on desktop).

Thanx

Re: JuiceBox "not secure"?

It can sometimes be difficult to scroll down a page with an embedded Juicebox gallery if you initiate the scroll gesture on top of the gallery. Unless you are very precise with the scroll gesture, Juicebox might see the tap as the start of a navigation swipe (for example to change the thumbnail page) instead.

I think some of your other problems (your navigation menu not appearing and the space above the gallery) might be because you have set your gallery's height to be 100%.
When using a percentage height, it is necessary to assign heights via CSS to all parent containers of the gallery, otherwise Juicebox might not be able to determine what its actual height should be. (It needs to know what its height should be 100% of.)
Please make sure that all the containers that your gallery is nested within have been assigned heights via CSS.
Otherwise, try setting your gallery's height to be a fixed pixel values (such as '600px') instead.
Please also see the note regarding Using Percentage Heights in the Embedding in a HTML Page support section.

Also. Does the JB includes the features of SV?

For information on the differences between SimpleViewer and Juicebox, please see this SimpleViewer blog entry.
If you would like to compare all the configuration options available to SimpleViewer and Juicebox, please see the links below:
SimpleViewer Config Options: http://simpleviewer.net/simpleviewer/pr … tions.html
Juicebox Config Options: http://www.juicebox.net/support/config_options/

As padding around photos is huge I don't like for visitors to scroll down (on desktop).

Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

In your case, this might be fixed by changing the gallery's height from 100% to a fixed pixel value such as 600px.

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

One more thing!
When the gallery expands goes to full screen mode. By press ESC it goes to expand. To access the actual page (and of course the navbar) I have to press ESC once more (or twice from the full screen). Is that normal?
And second  :D. Can I set a background photo or color (or both) for the full screen? As that bright white is not the best choice...

Thanks

Re: JuiceBox "not secure"?

When the gallery expands goes to full screen mode. By press ESC it goes to expand. To access the actual page (and of course the navbar) I have to press ESC once more (or twice from the full screen). Is that normal?

When using the Fullscreen API (useFullscreenExpand="TRUE"), pressing 'Esc' will exit the browser's Fullscreen API mode but the gallery will still be expanded. A further 'Esc' keypress will close the gallery. Alternatively, just click the 'Close Gallery' button in the gallery's Button Bar once (or set useFullscreenExpand to 'FALSE' tpo not use the Fullscreen API).

Can I set a background photo or color (or both) for the full screen? As that bright white is not the best choice...

When using the Fullscreen API, different browsers use different fullscreen background colors (for example Firefox uses black whereas Chrome uses white).
Therefore, when a Juicebox gallery has a transparent background and is expanded fullscreen using useFullscreenExpand="TRUE", the background color may differ depending on the browser.
With Juicebox-Pro, you can use expandedBackgroundColor (in JuiceboxBuilder-Pro's 'Customize -> Color' section) to set a background color for use when the gallery is expanded. I would recommend using a solid color with no transparency so that it looks the same in all browsers.
If you set a background image using Juicebox-Pro's Background Image options, then the image will be used for both normal and fullscreen modes. It is not possible to set a background image for use only in fullscreen mode.

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

Hi

I bought Juicebox Pro so that the photos in my website are responsive on mobile phone devices and this is not happening.
E.g. photos in my website which have a fade mode feature appear as fade out when my website is viewed on a computer/laptop but on a mobile device the picture mode is a slide feature & not fade out feature, and the photos take up so much space that it goes outside of the margins of the mobile phone.

Can you please help?
Here is the link https://jimmydance.com/example.html

Last edited by gxmichael (2015-04-11 13:51:50)

Re: JuiceBox "not secure"?

E.g. photos in my website which have a fade mode feature appear as fade out when my website is viewed on a computer/laptop but on a mobile device the picture mode is a slide feature & not fade out feature

In Touch Input Mode, Juicebox automatically uses a slide image transition as this best matches the slide gesture used on mobile devices to navigate between images in a gallery.
This cannot be overridden. It is possible to force Juicebox to use Large Screen Mode on all devices and in all browsers (by setting screenMode="LARGE") but it is not possible to force Juicebox to use Mouse Input Mode and the imageTransitionType configuration option requires both Large Screen Mode and Mouse Input Mode.
(This is documented in the description of the imageTransitionType configuration option in the Main Image Options section of the Config Options page.)

Only applies for Large Screen Mode and Mouse Input Mode.

and the photos take up so much space that it goes outside of the margins of the mobile phone.

You currently set your gallery's width to be 800px so it will be displayed at 800px on all devices and in all browsers. (This may be too wide for certain mobile devices.)
If you want your gallery's width to span the width of the user's browser window (no matter what its shape or size), then set your gallery's width (and the width of all its parent containers) to be 100%.

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

I did what you advised me and looks better.
Now what about the padding, this is too much.
The other thing is (as in SV) I can't nest a second gallery. Can I edit the script as in SV and how?
I found information in your website but I don't want to fill mine with unnecessary folders if I'm making sense. In other words what is the proper element to connect a gallery to a specific .xml file?
Thanx

Last edited by gxmichael (2015-04-12 10:47:17)

Re: JuiceBox "not secure"?

Now what about the padding, this is too much.

Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
Unfortunately, with a responsive gallery (where the dimensions of the gallery change depending on the size and shape of the user's browser window) you essentially have no control over the shape of your gallery. This can be a problem as the aspect ratio of your gallery may be widely different in different user's devices and browsers but the aspect ratio of your images remains constant.
If you resize your browser window so that it is much wider than it is tall, then you should see that there is very little padding at the top and bottom of your images. Trying to scale a landscape-style image in a portrait-style gallery will always result in space at the top and bottom of your image. You could compromise and try to ensure that the aspect ratio of your images matches the most likely browser window size of your target audience (whether visitors to your web site are likely to be viewing your gallery on mobile devices or in desktop browsers). Otherwise you could fix your gallery's dimensions (to ensure that the images fir well within the gallery's image area) using fixed pixel values rather than percentages.
If you really want your gallery's aspect ratio to change with the browser window size, then you will need to use JavaScript.
(A Juicebox gallery is essentially just a <div> on a web page and, ordinarily, a <div>'s aspect ratio will not change when the user changes the size or shape of the browser window.)
To see an example of this in action, create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's XML file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="minimal-ui" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            #wrap {
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb;
            function doLayout() {
                var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width());
                var galleryWidth = parseInt(windowWidth * 0.8);
                var galleryHeight = parseInt(galleryWidth / 2);
                $('#wrap').width(galleryWidth);
                $('#wrap').height(galleryHeight);
            }
            $(document).ready(function() {
                doLayout();
                $(window).resize(doLayout);
                jb = new juicebox({
                    containerId: "juicebox-container"
                });
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
    </body>
</html>

The '0.8' value is just an arbitrary width for the gallery (80%) for this example. You can change this to whatever you like.
The aspect ratio in the above example is 2:1 (set by the '2' in the line var galleryHeight = parseInt(galleryWidth / 2);).
Again, you can change this to whatever you like.
I hope this points you in the right direction.

In other words what is the proper element to connect a gallery to a specific .xml file?

You can point Juicebox towards a specifc XML file using the configUrl configuration option in your gallery's embedding code.
For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox
        configUrl: "custom.xml",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

<strong>THANK YOU!!!</strong> :D
(... and sorry for been a pain...)

Last edited by gxmichael (2015-04-20 23:00:09)

Re: JuiceBox "not secure"?

You're welcome!

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

Hi Steven,

It's me again, your headache  :D

I've noticed that the pages include a gallery (and text as well) zooming is impossible.
How do I fix this?

Last edited by gxmichael (2015-04-20 22:31:42)

Re: JuiceBox "not secure"?

It should be possible to pinch-zoom on a page containing an embedded Juicebox gallery but, if you pinch-zoom on the gallery itself, you would need to be very precise with your gesture as Juicebox uses its own gestures and the initial movement of a pinch-zoom action could be misinterpreted as the start of a swipe gesture to navigate within the gallery.
There should be no problem pinch-zooming on the non-gallery part of a page, for example on text below a gallery.

Also, you would need to ensure that the viewport of the web page has not been locked (which it would be by default for an expanded gallery on an iOS device). For more information on expanded gallery behavior on iOS devices, please see here.

If, for example, you embedded a gallery in a web page at less than 100% x 100% and set showSplashPage="NEVER" or screenMode="LARGE", then you should be able to pinch-zoom within a gallery on an iOS device (if you are very precise).

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

In the config file (https://jimmydance.com/config.xml) everything looks ok and viewport meta in the html file (https://jimmydance.com/bio.html) is <meta name="viewport" content="width=device-width, initial-scale=1.0"> like in any other page.


:/

Re: JuiceBox "not secure"?

I have checked your gallery's configuration options and notice that you set expandInNewPage="FALSE".
This will force the gallery to be expanded on top of the embedding page and, in order to ensure that the expanded gallery's scale is correct, Juicebox locks the viewport of the embedding page (which will disable pinch-zooming).

Try setting expandInNewPage="AUTO" (the default value) or expandInNewPage="TRUE" instead.

This should hopefully help.

As your gallery does not display the Expand Button, your gallery will never be expanded so it does not matter (with regard to the actual expanding of the gallery) what value you set expandInNewPage to.

For more information, please see the Expand Gallery Behavior support section.

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

Now the thing is if I set expandInNewPage= to AUTO or TRUE the page becomes non responsive.

Buttons are disabled because the concept behind this particular page https://jimmydance.com/bio.html is to use the two images as a way to add viewing material for people who access my site, it's needed to create some colour and to look different from all my other pages.

Last edited by gxmichael (2015-04-22 02:59:15)

Re: JuiceBox "not secure"?

Now the thing is if I set expandInNewPage= to AUTO or TRUE the page becomes non responsive.

I do not see this problem myself. Using the code from your web page and setting expandInNewPage to all three possible values, your web page looks OK (and is scaled the same) in both Mobile Safari and Chrome on a iPod Touch. The only problem I encountered was that I was not able to pinch-zoom the page in Chrome when expandInNewPage="FALSE" (see my post above).
What device and browser (and version numbers) do you use?
Perhaps you could provide screenshots somewhere to let me see what you are seeing.

Maybe you could try forcing a certain meta 'viewport' value to be used (overriding any meta 'viewport' value which Juicebox may set internally) by adding code such as the following code after the gallery's embedding code in your page.

<script type="text/javascript">
    var m = document.createElement('meta');
    m.name = 'viewport';
    m.content = 'width=device-width, initial-scale=1';
    document.getElementsByTagName('head')[0].appendChild(m);
</script>

I do not know if this will help with your scenario (or what unforeseen knock-on effects it might have) but it might be worth trying.

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

Have a look now (https://jimmydance.com/bio.html). I set it back to expandInNewPage="TRUE" and here is the result (iPhone)
https://www.facebook.com/jd0031/photos/ … mp;theater



desktop browser: 42.0.2311.90 m (chrome)
mobile browser: 42.0.2311.47 (chrome)
phone: iPhone 4s
iOS: 8.3
In all other browsers works perfectly fine except chrome!

Last edited by gxmichael (2015-04-23 16:30:24)

Re: JuiceBox "not secure"?

At the moment, your bio.html web page looks similar (the scale of the page is the same) in both Chrome and Mobile Safari on my iPod Touch 4.
If you are seeing significantly different results in your mobile browsers, try clearing their caches before reloading your web page to see if this makes a difference.
(Your screenshot does not resemble what I see in Chrome. What I see in Chrome is what I see, and what I expect you see, in Mobile Safari.)

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

I did (clear everything) and the issue persists!
How annoying, by removing the gallery works fine!
The problem exists only on mobile chrome...

Last edited by gxmichael (2015-04-24 16:10:54)

Re: JuiceBox "not secure"?

Have you tried my suggestion of setting a meta 'viewport' tag using JavaScript after the 'juicebox.js' file has loaded?
Try adding the JavaScript code form my post above after the following line in your 'bio.html' web page.

<script src="jbcore/juicebox.js"></script>

I don't know if it'll work but it's worth a shot.
It should only take a minute or two to try (a quick copy and paste and then clear your browser's cache before reloading your web page).

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

It doesn't work but I've noticed that before full loading of the page it is scalable. When finishes loading then freezes.
I wonder if it's the last loaded file that causes the problem.
If indeed, what is that?

Re: JuiceBox "not secure"?

The only external file that the 'juicebox.js' file loads is the CSS theme file ('jbcore/classic/theme.css').
However, your problem seems to be with the meta 'viewport' tag (which Juicebox may be setting internally via the 'juicebox.js' JavaScript file).

I am unable to see your problem myself. Your web page looks similar (and is scaled the same) on my iPod Touch in both Chrome and Mobile Safari so I cannot replicate the problem in a test scenario of my own and try things out.
My iPod Touch 4 is limited to iOS 6.1.6 which, in turn limits Chrome to v37 so it looks like Google may have changed the way Chrome works (or perhaps there is a bug in v42).

Unfortunately, some trial and error is likely to be required in order to find a solution to your problem.
All I can really suggest is to try combinations of the following:

(1) Try removing the current meta 'viewport' tag from your page.

(2) Try locking the viewport using the following code:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">

This will prevent pinch-zooming but it might help in finding a solution to your scaling problem.

(3) With both (1) and (2) separately, try changing the value of expandInNewPage (AUTO, TRUE, FALSE).

I'm really not sure what else you could try that might make a difference.

Steven Speirs
SimpleViewer Support Team

Re: JuiceBox "not secure"?

I followed your recommendations without any remarkable result.

Now the pages (https://jimmydance.com/bio.html & https://jimmydance.com/workshops.html) are working fine!
What I did? I removed images coding from https://jimmydance.com/config.xml & https://jimmydance.com/passed-workshops.xml respectively...  :lol:

So I have scalable pages without photos!  :(

Last edited by gxmichael (2015-04-27 12:52:02)