1

(3 replies, posted in Juicebox-Pro Support)

Steven @ Juicebox wrote:

I notice that you are currently using Juicebox v1.5.0.
I would recommend upgrading to the latest version (v1.5.1)

Thanks.

How can I upgrade? Do I have to install from the beginning? There is no "check for updates" in my JuiceBox Builder.

Hi,

can I set autoplay to loop from the beginning if last image is being displayed?

Thanks

Dirk

Hi,

would you please have a look at my website.

There are two galleries that work just fine.

On desktop computers everything is fine but on small resolution devices there is too much whitespace above and below the galleries.

This is an example of the config.xml:

    gallerywidth="100%"
    backgroundColor="rgba(238,238,238,1)"
    galleryFontFace="sans-serif"
    textColor="rgba(102,102,102,1)"
    captionBackColor="rgba(0,0,0,0)"
    imageShadowBlur="0"
    imageTransitionTime="0.5"
    galleryTitlePosition="TOP"
    buttonBarPosition="OVERLAY_IMAGE"
    textShadowColor="rgba(0,0,0,0)"
    showOpenButton="false"
    flickrShowDescription="true"
    imageShadowColor="rgba(0,0,0,0)"
    thumbShadowColor="rgba(0,0,0,0)"
    thumbDotColor="rgba(0,0,0,0)"
    maxThumbColumns="8"
    maxCaptionHeight="50"
    imageTransitionType="CROSS_FADE"
    showThumbsOnLoad="false"
    showSmallThumbsOnLoad="false"
    showSmallThumbsButton="false"
    showSmallPagingText="false"
    showThumbsButton="false"
    showExpandButton="false"
    captionPosition="NONE"
    showNavButtons="true"
    resizeOnImport="false"
    thumbPadding="0"
    enableAutoPlay="true"
    autoPlayOnLoad="true"
    displayTime="2"
    goNextOnAutoPlay="true"

This is the code I use in the html:

 <script src="galleries/moonscape/jbcore/juicebox.js"></script>
  <script>
new juicebox({
 baseURL : 'galleries/moonscape',
    containerId : "juicebox-container",

galleryWidth: "100%",
galleryHeight: /Android|BlackBerry|iPhone|iPod|Nexus|webOS/i.test(navigator.userAgent) ? '450' : '970',

backgroundColor: "rgba(255,255,255,100)"
});
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

If I reduce galleryHeight in this line:

galleryHeight: /Android|BlackBerry|iPhone|iPod|Nexus|webOS/i.test(navigator.userAgent) ? '450' : '970',

to 820 e.g., gallery doesn´t use the whole space horizontally.

What can I do?

Thanks, Steven.

#2 works just fine.

Excellent support (even if it wouldn´t have worked ;-))

You are right. I mixed things up regarding responsive design. Thx for clarification.

Just another question. On smartphones the fixed height of 950px is bit too much. Nothing particularly bad, but I would prefer it to display smaller in height.

Is that possible: 950px height on larger devices, less on small screens.

Thanks.

Dirk

Hi,

I think I was able to solve the problem.

I assigned a fixed height of 950 px which doesn´t sound well with regard to responsive design but works in addition with smart screen mode.

Thanks again

Dirk

Hi,
thx for your support.

I found out that, if I click away thumbnails, gallery image is resized and gets larger. If I display thumbnails again gallery image shrinks.

Is it possible to overwrite this behaviour?

Kind regards

Dirk

Hi,

please have a look at my website

At the bottom of the page there is a Juicebox gallery. Screen mode is auto.

It displays 100% width on desktop computers as it should do. Auto screen mode works fine on smartphones.

On iPads however the gallery has whitespace on left and right sides if held in landscape mode. If held in portrait mode everything is fine again and wihtespace disappears.

It seems that the script calculates the available room based on portrait mode but doesn´t adapt if the device is being turned to landscape mode.

This is the beginning of the config.xml:

<?xml version="1.0" encoding="UTF-8"?>

<juiceboxgallery 

    resizeOnImport="false"
    useFullscreenExpand="true"
    maxImageWidth="1200"
    maxImageHeight="900"
    textColor="rgba(0,0,0,1)"
    buttonBarBackColor="rgba(51,51,51,.3)"
    topBackColor="rgba(255,255,255,0)"
    captionBackColor="rgba(255,255,255,.0)"
    backgroundColor="rgba(51,51,51,1)"
    autoPlayThumbs="false"
    showSmallThumbsOnLoad="false"
    showSmallThumbsButton="false"
    showNavButtons="true"
    showAutoPlayButton="true"
    captionPosition="BELOW_IMAGE"
    captionHAlign="LEFT"
    captionBackTopColor="rgba(255,255,255,0)"
    textShadowColor="rgba(102,102,102,0.4)"
    maxCaptionHeight="100"
    screenMode="AUTO"
    buttonBarPosition="OVERLAY_IMAGE"
    buttonBarIconSize="15"
    thumbsVAlign="TOP"
    showOpenButton="false"

>

Is it possible to fix that behaviour?

Thanks and kind regards

Dirk

Steven wrote:

Perhaps you could give screenMode="AUTO" ('Customize -> General') another try.

Please have a look at http://www.usaletsgo.de/test.php

The gallery at the bottom of the page is in auto screen mode. The left part of the first image is cut on my iPhone (iOS 9.2.1). If I switch to large screen mode everything is fine.

Unfortunately the code snippets you posted don´t work either.

Maybe you can put this issue on the agenda for an official update of juicebox builder.

The main reason for my interest in this issue is that if you display your gallery in expanded mode the thumbs take away too much space on mobile small screen devices such as an iphone.

Hi,

just another question on my behalf:

is it possible not to show the first image in a gallery as thumbnail? I tried to tweak the config.xml but to no avail.

Thx

Dirk

Hi Steven,

first of all thanks for the excellent support - I really appreciate this.

Now a few comments:

(1) On iOS devices the gallery does not automatically exapnd in a new page. At least not on my iPhone and iPad with latest iOS version.
(2) Unfortunately the timing approach you provided does not work - actually it worsens things as now thumbs are always visible.

Please have a look at:

http://www.usaletsgo.de/poi_rhyolite.ph … te#gallery

The gallery at the bottom of the page works just fine. But on iOS the thumbs are hidden if expanded (good) and do not return if the expanded is exited (not good) ;-)

The gallery is displayed in large screen mode as I ran into problems with 'auto mode' on iphone only.

Thanks again und looking forward to hearing from you.

Bye, Dirk

Steven wrote:

I hope this helps.

It does - thanks so far.

Only one issue with iOS only (iPad): When I go to fullscreen mode thumbs hide - good. When I return to 'normal' mode thumbs are still invisible - not so good ;-)

Do you have a solution for this?

Thx again.

Hi,

I´m using Juicebox 1.4.4.2. This is an example of the embed code generated by juicebox (followed by noscript commands):

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(51,51,51,1)"
});
</script>
<div id="juicebox-container">

...

Is it possible to hide thumbnails when the gallery is expanded in fullscreen mode?

Thanks and bye

Dirk