Lightbox controls
The images are displayed in a lightbox in one of two layouts, depending on the screen size and type of device. The small-screen layout is used on mobile phones while the large-screen layout is used on desktop displays. Tablets and laptops may use one or the other, depending on the size of display and the particular device.
Large screen layout
The large-screen layout is shown here. Provided the window is wide enough a menu of classes is shown on the left, with the last item taking you back to the main screen. For a narrow window (e.g a tablet held in portrait mode) this is replaced by a single ‘Back’ button. The buttons in the top right, highlighted in red, control the display as described below. The lightbox starts in auto-play mode.
4K displays: the native image sizes are limited to 1000px wide by 800px high. When the available space is greater than this the image will be enlarged, which, on a large high resolution display, may result in a loss of sharpness. If this is noticeable the browser window should be resized to achieve a suitable balance between size and resolution.
Control buttons
In the large-screen layout there are three control buttons in the top right.
Show/hide thumbnails: click on this to show a line of thumbnails above the current image. This is mainly useful when not in auto-play to find and display a particular image. The left and right arrows at each end of the thumbnail row page through the thumbnails.
Expand: expands the image area to use the whole of the browser window.
Auto-play: toggles auto-play on or off. When on the images in the class being viewed cycle continuously.
When auto-play is off, swipe left or right on a touch-screen to move between images. Without a touch-screen, click anywhere on the left or right side of the image. It isn’t necessary to click precisely on the arrows. The left and right arrow keys on the keyboard can also be used. When the thumbnails are shown any image can be selected by clicking on the thumbnail.
Small screen layout
The small-screen layout is shown here. There are two (or three) control buttons in the top right, highlighted in red, and a ‘home’ button in the top left which takes you back to the main screen. The operation of the controls is slightly different from the large-screen layout.
Control buttons
Show thumbnails: clicking this button shows the thumbnails on a separate screen. If they need more than one page swipe left or right on a touchscreen, or click on the left or right arrows. There is no ‘back’ button on the thumbnail screen. The browser’s back button may have the desired effect; if not just go to an image and click on the ‘home’ icon there.
Expand/contract: If present, this toggles full-screen mode, which hides the browser address bar and other controls. It may not be shown if the device or browser doesn’t support this.
Auto-play: toggles auto-play. The small-screen mode starts with auto-play off.
Hiding the captions: on a touch-screen, touch the screen anywhere except on one of the buttons to hide the captions and buttons. Touch the screen again to show them. There is no equivalent on a non-touch screen.