Gallery

The Gallery extensions creates a list of preview images which can be viewed in full size by clicking on the thumbnail. The images to be included can be specified by a glob pattern. A page variable image_caption_FILENAME gets added for every image in the set to the page's Data & Settings panel automatically to be used as an optional content for the data-caption attribute of each <img> tag.

If an image contains an Exif description tag, that tag will be used as the overlay's caption fallback, if no caption is defined.

@x(Gallery{ Options })

Dependencies

This extension requires jQuery. If not included already, the jQuery library can easily be included using @t(jquery) like this:

<head>
    ...
    @t(jquery)
    ...
</head>

Options

files: "*.jpg" - string

Filenames or pattern to select files. Multiple files/patterns can be defined, separated by comma.
For example: files: "image1.jpg, image2.jpg, *.png"

width: 200 - integer

The thumbnails' width in pixels.

height: 200 - integer

The thumbnails' height in pixels.

order: false - string or false

Change the order of the images. Possible values are:

  • false - keep original order
  • "asc" - acending
  • "desc" - descending

class: false - string or false

The optional class(es) of the <div></div> tags wrapping each image.

firstWidth: false - integer or false

Optional width for the first image.

firstHeight: false - integer or false

Optional height for the first image.

firstClass: false - string or false

Optional class for the first image.

enlargedWidth: false - integer or false

Maximum width of enlarged images in pixels.

enlargedHeight: false - integer or false

Maximum height of enlarged images in pixels.


Example

A simple gallery, 250 x 250 px, using all .jpg and .png files within the /shared directory:

<head>
    ...
    <!-- First, include jQuery -->
    @t(jquery)
    ...
</head>
<body>
    ...
    <div class="gallery_wrapper">
        @x(Gallery {
            files: "/shared/*.jpg, /shared/*.png", 
            width: 250, 
            height: 250
        })
    </div>
    ...
</body>
See also