Gallery Tour

Out of the box, Juicebox galleries “just work” on any kind of device. Get the details on how Juicebox adapts to various devices, and to take a tour of the gallery interface.

Note that the he following screenshots show the default interface, all elements can be customised via the config options.

Screen Modes

Juicebox automatically switches between 2 Screen Modes depending on the size of the device screen it is viewed on. This is to provide the best gallery experience across various devices.

  • Large Screen Mode (LSM) is displayed on screens of 1024x768 pixels or bigger. This includes the iPad and desktop computers.
  • Small Screen Mode (SSM) is displayed on screens smaller than 1024x768. This includes most mobile phones and smaller tablets.

Note that you can force Juicebox to always use a specified Screen Mode although this is not reccomended.

Large Screen Mode

In this mode, the image and thumbnails are displayed together. The main image scales to fill the available screen area and the thumbnails sit below the main image. The Button Bar sits over the main image at the top-right. Captions overlay the main image at the bottom.

Juicebox large screen mode
Large Screen Mode showing main image and thumbnails filling the available screen area.

Small Screen Mode

In this mode, the thumbnails are displayed separately to the main image, to allow the largest viewing area for the main image.

Thumbnails page

When the gallery is first opened, the Thumbnails Page is displayed. Thumbnails are displayed as a grid. Swipe to view the next page of thumbnails. The number of thumbnails is automatically calculated to fill the screen.

Juicebox large screen mode
Small Screen Mode showing Thumbnails Page.
Image Page

The main image fills the screen. The buttons and captions automatically scale to provide a good viewable and clickable size. Tap the screen to hide the image overlay. Click the Show Thumbnails button to return to the Thumbnails Page.

Juicebox small screen mode
Small Screen Mode showing Image Page.
Splash Page

In Small Screen Mode, galleries embedded at less than full-browser size are displayed as a Splash Page. Tapping the splash page opens up the gallery at fullscreen size. This is because on a small phone-sized screen, a fixed-size embedded gallery will typically be too small to be usable. The Splash Page displays the gallery title, number of images and an optional gallery description.

Juicebox large screen mode
Small Screen Mode showing Splash Page.

Input Modes

Juicebox automatically switches between 2 Input Modes, depending on the type of device it is viewed on.

  • Mouse Mode. For desktop computers with a mouse. Click image to navigate next or back. The Image Overlay shows when the mouse is over the gallery.
  • Touch Mode. For tablets or phones with touch screens. Use Swipe gesture to navigate next or back. Tap screen to toggle the Image Overlay.
Juicebox large screen mode
Touch Mode supports Tap and Swipe gestures.