Gallery 2 Plugin

Picture browser and slideshow

An image display plugin which is oriented towards the display of larger graphics in a slideshow format.

Features fully hideable controls, such that a large image can be viewed without onscreen hindrances. Being hideable also allows us to make the controls larger and auto-resizing, for easier operation on tablet devices.

To hide the controls, just click the image center. To unhide, just hover your mouse over the control bar position, or on a  tablet, touch the lower left or right corner of the image.

As well as the self-sizing button bar, the controls include a number of large and easily located click-zones. These can be used to navigate through, zoom or exit the image collection even when the controls are hidden. Thus it is possible to navigate the collection with nothing onscreen but the current image.

Automatic sizing determines that an image will be displayed within the confines of the screen, and will be intelligently downsized if that is not possible at its native pixel size. This process never crops the image, and always retains the proper aspect ratio. If you're rather see the image at its original size, then

Three smart zoom modes cater for various situations such as fullscreen display of images, and display of very tall or wide images which cannot be satisfactorily contained onscreen at their native size. In these modes, a small image will be enlarged by an amount which allows it to fill the screen as exactly as possible. A limit is however set on enlargement -typically 2x- so as to prevent overly pixellated  results with very small images.

With very tall or wide images, a scroll mode is activated in which the image fills the screen as nearly as possible in its smaller direction, and scrolling of the other direction is possible. Scrolling may be with the mouse, or by map-style click and drag.

1;image 2;image 3;image 4;image 5;image 6;image 7;image 8;image 9;image 10;image 11;image 12;image 13;image 14;image 15;image 16;image 17;image 18;image 19;image 20;image 21;image 22;image 23;image 24;image 25;image 26;image 27;image 28;image 29;image 30;image 31;image 32;image 33;image 34;image 35;image 36;image 37;image

A small sample of images of varying sizes and aspect ratios.

There are no annoying gimmicks like sliding images, simulated filmstrips sprocket holes, expanding popups or whatever nonsense. Instead the focus is on a presentation that works smoothly and well.


To activate the plugin, include the following php in your page sourcecode:


Where "img/gallery" is the location of the pictures in relation to the root of the Mara website. Note that it is a relative path with no leading slash. 10 is the slideshow interval. "80px" is the maximum height of the browser thumbnails, and "250px" the maximum width.

Mouse Controls:

To zoom an image from the contact sheet to full-window mode, click it once.

To see the zoomed image controls, click the zoomed image once near the center. A toolbar at the foot of the window contains the most-used controls.  A design principle is that the controls are on the browser window rather than on the image. Try it and see. I think you will agree this is a huge step forward in ergonomics over arrangements where the button positions change with the image size, leading you to a perform merry mouse-chase after the button with each new image.

Image change is simply a matter of clicking or tapping at the left or right side of the browser window. This works regardless of whether the controls are visible or hidden. There is a close button at top right, and zoom/unzoom button to the left of it, which become visible when the mouse is hovered over them.

Keyboard Controls in zoomed mode:

N or Space - Next image.
B - Previous image. (back)
Z - Cycle through zoom modes.
U - Unzoom (default fullsize mode)
S - Start/stop slideshow.
M - Stop slideshow. (manual)
A - Slower.
D - Faster.
R - Random image, or toggle random order on/off in slideshow mode.
C - Show controls.
Esc - Return to contact sheet.

Zoom modes:

0 - Default - Show actual size if smaller than browser window, constrain to window dimensions if larger.
1  - Enlarge images up to a max of 2x or window dimensions, whichever is smaller.
2 - Enlarge images to cover whole browser window, with unidirectional scrolling where required. 2x max enlargement.
3 - Enlarge to cover window, but show images larger than window at native size, with bidirectional scrolling where required. 

At no time are images cropped, and aspect ratios are always preserved.

The limit of 2x in enlarged modes was set to prevent excessive pixellation of small images.

Note that a change of zoom mode may have no immediate effect if the image being displayed already meets the requirements of the new mode. This is by design. Images of other sizes may behave differently.

Scrolling of images larger than the window may be by scrollbars, by scroll wheel, or by 'map-style' click-and-drag, whichever is most convenient. As is the generally accepted convention, click-and-drag works in the opposite sense from the scrollbars. The mouse scroll wheel is automatically translated to horizontal scroll on wide images.

Hint: Most browsers will show the images at near-fullscreen if you press the F11 key to remove the browser menus, etc. This may be useful for presentations.

To customise your gallery's styling, plugin.css contains a number of predefined electors. These are documented in the file.

Thumbnails are created in a 'thumb' directory under each picture directory. If images are replaced with newer files,  then the thumbs are automatically recreated. Note however that if you want to change the thumbnail size, you need to manually delete the existing thumbs, otherwise they will not be updated until the fullsize images are changed.

On first use after an upload, there will be a delay whilst thumbnails are created. The browser may seem unresponsive during this time. For very large galleries, several page refreshes may be needed to create all of the thumbnails.


Powered by Mara cms