Gallery plugin
A gallery presents images or photos in a row layout where all rows have a consistent width and the images are scaled automatically so that they fill up each row. The height of the rows varies slightly and usually unnoticeable to allow for this scaling.
This plugin is only available in the Complete bundle.
Description
A gallery is defined with the gallery CSS class, or by calling the gallery() plugin method on an element.
Each image can also have a caption that appears when hovering it with the mouse cursor.
Image (<img>) and caption (<span>) must be grouped in another element.
This can be an <a> element which can then also be used to enable a zoom view for the image when clicking on it.
Currently, Frontfire does not yet provide such a zoom view but third-party solutions like Fancybox (no longer free!) can be used here.
Since the images are scaled a little bit to fill the row layout, the image dimensions should be at least 1.5 times the average render size to avoid blurry display. The images should also not be much greater than that to minimise the download size. This example only provides static images in a single size, but dynamic server-side scaling solutions can ease this task. Image source sets can normally be used to serve high-DPI screens.
Alignment
The incomplete last row is usually aligned to the left side.
This can be changed to the centre or right side with the additional CSS classes center or right, respectively.
Last row size
The last row is usually kept at the desired height if the images would become too large when filling the row width. This may look strange if all images have the same size and the layout is a regular grid otherwise. In this case, the last row is automatically kept at the same height as the others (technically, as the first row) to maintain the regular grid layout.
Added in v2.1.0
Options
The following options are available:
| Name | Type | Description | Default |
|---|---|---|---|
allowedOversize |
Number | The allowed factor of exceeding the desired size in the last row before the row is left-aligned. | 1.2 |
desiredSize |
Number | The desired image size (depending on sizeMode), in pixels. | 150 |
gap |
Number | The spacing between the images, in pixels. | 10 |
sizeMode |
String | The layout size mode. "height": The desiredSize is the preferred row height."area": The square value of desiredSize is the preferred image area. |
height |
Plugin methods
This plugin provides methods to control the gallery.
relayout
relayout()→ Frontfire
Updates the layout of the gallery after a size change. This is automatically called when the window size changes, but needs to be called when only the gallery container changes size. In the examples above, the resize event is triggered on the window from the documentation page script internally.