You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Mobile expanded mode on load
Hello,
I am curious if the following can be setup in Juicebox. The difference between the unexpanded and expanded views are so similar on mobile, Id love to just use the expanded view and get rid of the expand button. Is this possible?
Thanks,
Ryan
Juicebox was not designed to initially display the expanded version of a gallery.
If a web page is loaded and a gallery on the page is initially expanded, then the other content on the web page alongside the gallery would not be visible (and the user would have no knowledge that it was even there).
If you really want to expand a gallery on load, please see this forum post for a couple of suggestions.
If you just want your gallery to fill a browser window without the need to expand it, then perhaps the best solution would be to embed your gallery in a web page with dimensions of 100% x 100% and make sure that there is no other content on the web page. (The Splash Page is not displayed by default if a gallery has dimensions of 100% x 100% and is the only content on the web page.)
Alternatively, if your gallery is embedded in a web page alongside other content and you still want the other content to be visible, then you can choose to not use the Splash Page (and just have the gallery displayed where the Splash Page would normally be) by setting showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
Alternatively, you could force your gallery to always be displayed in Large Screen Mode (which does not use the Splash Page by default) on all devices and in all browsers by setting screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).
Whatever you choose to do, you can disable the Expand Button if you like by setting showExpandButton="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' section).
I hope this gives you a few ideas to try.
Hi Steven,
Thanks for your suggestions. All that I really need to do can be controlled in the mobile css via media queries but the trouble Im having is that I cannot replicate some of the layout attributes that Im seeing on my mobile display by closing down the browser window.
Mainly I am trying to control the following aspects of the UI in mobile only"
1. Image numbers and captions below image rather than over the top (mobile landscape)
2. Hide navigation arrows
3. Images not clickable (there's a click state on images that turns them grey momentarily on mobile- it seems to have no effect)
4. Make image 100% width of screen
5. Hide exapander? (If the image is already 100%, no need to expand)
If I could see these things in-browser on desktop I could use Inspector. I see a number of media queries in style.css that I could over rule with my custom.css but I just need to know that the appropriate selectors are for each.
Thanks,
Ryan
Mainly I am trying to control the following aspects of the UI in mobile only"
Juicebox-Pro uses one set of configuration options for both Large Screen Mode and Small Screen Mode so, unfortunately, it is not possible to configure each screen mode differently. Additionally, certain configuration options are Large Screen Mode only (such as captionPosition and imageTransitionType) and these cannot easily be changed at all for Small Screen Mode.
There's more information about Screen Modes and how Juicebox adapts to different devices and screen sizes here.
What you might like to try, however, is force the gallery to always be displayed in Large Screen Mode (no matter what device or browser is being used to view the gallery) by setting screenMode="LARGE" (in the 'General' configuration options section).
If I could see these things in-browser on desktop I could use Inspector.
If you want to see the Small Screen Mode version of your gallery in your desktop browser, temporarily set screenMode="SMALL".
Alternatively, if you use Firefox, you could perhaps try using 'Tools -> Web Developer -> Responsive Design Mode'.
Another suggestion would be to use an extension such as User Agent Overrider which, as the name suggests, overrides the user agent string for your browser (to identify your browser as something that it's not). You could select 'iOS / Safari 10', for example, and your gallery should be displayed in Small Screen Mode (as if on an iOS device). This is not an emulator but it should be suitable for examining the Small Screen Mode version of your gallery in your browser's developer tools.
There should be similar options and extensions for other browsers.
I hope this points you in the right direction.
Hi Steven, just to be sure I understand. Is the 'SM.png' below the best I can expect to make the small screen mode with caption look? (IE caption over the image) or is there an option Im not using that would push the caption below?
I am currently forcing Large screen mode and the below you can see the outcome - the expanded view is basically ideal but on load the image seem unnecessarily small. Not terrible, but it would be great if it could simply be expanded on load. 
Thanks again,
Ryan
Is the 'SM.png' below the best I can expect to make the small screen mode with caption look? (IE caption over the image) or is there an option Im not using that would push the caption below?
There is no way to move the caption area in Small Screen Mode: captionPosition is active in Large Screen Mode only.
In Small Screen Mode, the captionPosition is always set to OVERLAY, although the overlay can be toggled on and off by tapping the screen (or the Info Button if it is used). This gives the images as much room to be displayed as possible on small screen devices.
You could perhaps make your caption text stand out a little more by setting captionBackColor and/or captionBackTopColor (to give your caption area a more prominent background color instead of it being transparent) or by changing your textColor.
I am currently forcing Large screen mode and the below you can see the outcome...
In Large Screen Mode, when you set captionPosition="BELOW_IMAGE", Juicebox uses the maxCaptionHeight value as an absolute value (rather than a maximum value) and this amount of space is always reserved for the caption area (no matter how much text there is to be displayed).
With the Showkase header and the reserved caption area below the images in the gallery, the images are probably being displayed as large as they can within the remaining space available.
By default, Showkase displays a gallery page such that the header and gallery are visible in their entirety (with the bottom of the gallery at the bottom of the browser window) so that users do not need to scroll to see any of the gallery.
The easiest way to increase the space available for the images would be to either reduce the maxCaptionHeight value (if possible) or set captionPosition to OVERLAY or OVERLAY_IMAGE.
Thanks for your reply Steven. I think this might have been my last question, but youve been so helpful throughout this process and I appreciate you taking your time.
Best,
Ryan
You're welcome.
Even though Showkase creates responsive pages for a wide range of devices and screen shapes and sizes, I realise that you might not have been able to achieve the exact layout that you were looking for.
However, it is certainly much easier to work with the available Showkase and Juicebox configuration options than to delve deep into the source code and CSS to try to modify the layout manually.
Sometimes, a compromise might be required (between your ideal scenario and what is easily achievable using the available configuration options). Your web pages should still look good across different platforms (if not exactly as you envisioned).
I hope you're able to find a balance that works for you with what Showkase and Juicebox-Pro have to offer.
Juicebox Support Forum → Juicebox-Pro Support → Mobile expanded mode on load
Powered by PunBB, supported by Informer Technologies, Inc.