Components - Galleries

1

Type: interactive
Tags: grid; autoplay; navigation

Preview

Implementation

Markup

gallery-1({ *settings* })
Parameter	Description	Type
series	a unique name for the gallery	string
path	path to the image directory	string
type	image type; defaults to "jpg"	string
images	array of objects defining image properties	array
hook	additional CSS class attribute	string

Brief

A grid-based, interactive gallery that degrades gracefully in the absence of JavaScript. Features autoplay, navigation controls, captions and native lazy-loading. The gallery is designed to work with a directory of images that are numerically indexed, starting at 1. Alternatively, you can specify a different name, path and type for each image. While this gallery does not currently use separate thumbnails, consider the additional http request tradeoff if you will be serving relatively large image files.

Paths

location: components/galleries/1
activate: templates/_/mixins.pug

Placement

markup: templates/views/**/*.pug
style: styles/_/elements/gallery.styl
logic: logic/root.js or logic/views/**/*.js

Dependencies

_.pug
index.styl
index.js

Examples

// the basic implementation
// images should be named as 1.jpg, 2.jpg, 3.jpg...
+gallery-1({
    series: "about",
    path: "/assets/images/about/gallery/_linked/",
    images: [
        { caption: 'This is the 1st image's caption' },
        { caption: 'This is the 2nd image's caption' },
        { caption: 'This is the 3rd image's caption' },
        // the 4th image won't have a caption
        { caption: '' },
        // ...
    ]
})

// a more custom implementation
// images should also be numerically named unless configured like the 3rd image
+gallery-1({
    series: "about",
    path: "/assets/images/about/gallery/_linked/",
    type: "webp",
    images: [
        { caption: 'Lorem ipsum dolor sit amet' },
        { caption: 'Consectetur adipiscing elit' },
        {
            type: "png",
            name: "hello",
            path: "https://example.com/images/",
            caption: 'A caption for this image',
        },
        // ...
    ]
})

gallery-1()

import gallery1 from 'galleries/1/logic/';

// default delay is 3500ms
gallery1({
    delay: 4000,
    autoplay: true,
    navigation: true,
});