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.
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:
<?php include_once(plugin('gallery')); gallery_browser("img/gallery",10,"80px","250px"); ?>
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.
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.
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.