This implementation is also simple to program: each image requires just one img=... element and one a href=... link. No JavaScript and no browser compatibility issues.
There is one disadvantage to this approach, though: to go from one full-screen image display to another, we have first to return to the thumbnail page.
Quite often this is just a minor inconvenience or a secondary aesthetic issue. Sometimes, however, we would prefer to replace one image displayed with another, without anything in-between interrupting the continuity. Presentation concerns aside, this is extremely helpful in critical comparisons of similar images, as it allows to catch very subtle differences, like those in sharpness, noise, or tonality.
I will skip the issue of the so-called image galleries on so-called social media sites. Visit some of those and you will understand why. Besides, I consider these sites to be a symptom of the sad state of affairs on the Internet. Giving out machine guns with unlimited ammo supply to a bunch of monkeys may also seem a good idea at first.
Last year I decided to write my own tools for providing the missing functionality. This is a detailed description; I would like to hope it will benefit two groups of Readers:
- Frequent visitors to wrotniak.net (both of them), who will be now able to use Swapper and Flipper to their full potential (no big deal, these things are self-explanatory or almost so);
- Those who do their own Web authoring and may find a good use for utilities to display sequences of images — from critical flip-over comparisons to slide shows.
The Swapper is used to show sequences of images (shrunk to fit, if needed) in full-screen (or rather full-window) display. The starting image is selected by the calling page.
New in Version 1.2: The sequence can now be up to 99 images long (not just 10).
New in Version 1.1: The calling page may also activate the panning (or full-height) display mode. This works only with images of an aspect ratio wider than that of your browser window (otherwise it is just ignored). In this mode, if the image height does not fit into the window, the image is shrunk so that it does. The viewer can see a full-height fragment of the image, using the keyboard to scroll left and right. Both display modes can be toggled.
Once the Swapper link is activated and the full-window image comes up, the user has a few rudimentary keyboard options accessible:
- and — move between images (regular mode) or scroll left and right (panning mode),
- and — move between images (either mode);
- 1 ... 9 9— jump directly to image 1...99, if applicable;
- V — toggle the panning mode, if enabled; Space and Enter can also be used for that;
- C — toggle captions;
- H or F1 for help.
Also, all major browsers (current versions) support F11 for toggling the full-screen (kiosk) mode, and Backspace for return to the calling page.
The panning mode is not activated in this example, as it does not make sense for the 4:3 image aspect ratio.
Note, that while Swapper will handle a sequence of up to 99 images, it is most practical with just two or three. For more, while you can still use numeric keys to make a single transition between any two, you have to remember which is which. This can not be helped. For larger image sets I would rather recommend the Flipper anyway.
Olympus E-M1 II, MZD 75/1.8 at F/1.8
Three panoramas, shown in one Swapper |
Now, another example, this time a mini-gallery of three panoramic images. While most often I'm using this mode of Swapper to show a single panorama, it will handle sequences just fine, too.
A minor detail: the built-in help shows only the options applicable to a given usage of the Swapper in the page code.
Developers
Swapper is a single HTML file, containing also all necessary JavaSceipt code and CSS definitions, and therefore referring to no external resources. The file, named _swap.html, can be placed anywhere in your HTML file tree (whether on the server or locally on your development machine), best at its root.
The link consists of the Swapper file name followed by arguments, specifying images to be included, which one to start from, and (optionally) image captions. This may become quite long, but it can't be helped: all this information has to be somehow passed to the Swapper.
A simple invocation may, for example, look like this:
This specifies the location of Swapper as one level up from the current file. Three image files will be shown, all expected to be found in the same folder where the Snapper is, or their names have to include relative path(s) from that folder
The argument list must be preceded by a question mark, '?', and the individual arguments are separated with ampersands, '&'. Instead of spaces inside arguments, use plus signs; they will be replaced. (Using spaces in filenames is asking for a disaster, anyway.) All this is a part of the standard HTML syntax.
This example was very simple, using just a few of the arguments Swapper allows. Here is the full list.
