LightboxGallery

LightboxGallery

Lightbox component with explicitly defined thumbnail layout and multiple images, allows listing thorough all images within gallery. According to almost 2 years experience of using this component (in early versions), I found out, that gallery without thumbnail layout doesn't give any sense in most of the cases, so I decided to embed this feature in design of this component.

<script>
    import { LightboxGallery, GalleryImage, GalleryThumbnail } from 'svelte-lightbox'

    const images = [1, 2, 3]
</script>

<LightboxGallery arrowsConfig={{ character: 'loop' }} swipeConfig={{ enabled: true }}>
    <svelte:fragment slot="thumbnail">
        {#each images as image}
            <GalleryThumbnail>
                <img src="/img/{image}.jpg" alt="Image {image}">
            </GalleryThumbnail>
        {/each}
    </svelte:fragment>

    {#each images as image}
        <GalleryImage title="Image {image}">
            <img src="/img/{image}.jpg" alt="Image {image}">
        </GalleryImage>
    {/each}
</LightboxGallery>

Props

Same as <Lightbox>, <LightboxGallery> can be customized as well.

title

Type: string/HTML

Same as <Lightbox> title , but this applies to whole gallery. <GalleryImage> can override this title for specific image.

description

Type: string/HTML

Same as <Lightbox> description , but this applies to whole gallery.<GalleryImage> can override this description for specific image.

imagePreset

Type: ImagePrest (string)

Same as <Lightbox> imagePreset .

customization

Type: LightboxCustomization (object)

Same as <Lightbox> customization .

transitionDuration

Type: number

Same as <Lightbox> transitionDuration .

keepBodyScroll

Type: boolean

Same as <Lightbox> keepBodyScroll .

enableImageExpand

Type: boolean

Same as <Lightbox> enableImageExpand .

enableEscapeToClose

Type: boolean

Same as <Lightbox> enableEscapeToClose .

enableClickToClose

Type: boolean

Same as <Lightbox> enableClickToClose .

showCloseButton

Type: boolean

Same as <Lightbox> showCloseButton .

isVisible

Type: boolean

Same as <Lightbox> isVisible .

activeImage

Type: number

Number which sets visibility of image with id equal to it. Also optional, this is used for programmatic selecting of visible image when Lightbox is opened.

arrowsConfig

Type: GalleryArrowsConfig (object)

Allows customizing gallery arrows.

color

Type: string

Sets arrow color, valid value is any valid css color.

character

Type: GalleryArrowCharacter (string)

Sets arrow charter in edge cases (0th and last item of gallery). Valid values:

• '' - Leaves arrow inactive and disables particular arrow on keyboard in edge case.

• 'hide' - Hides arrow and disables particular arrow on keyboard in edge case.

• 'loop' - Arrows are always active and keyboard arrows as well. For instance when user clicks left arrow on first image, last image will be displayed.

enableKeyboardControl

Type: boolean

Enables navigation in gallery using keyboard arrows. Default true.

swipeConfig

Type: GallerySwipeConfig (object)

Allows customizing swipe navigation. Swiping lets user drag the displayed image sideways to move through the gallery. The image follows the pointer during the drag and the neighbouring image is revealed behind the edge it is dragged away from. Releasing the drag either completes the move to the neighbouring image, or returns the current one back to its place when the drag was too short.

Because the neighbouring image has to be visible during the drag, images next to the displayed one are rendered as well whenever swiping is enabled. Browser may therefore start downloading them sooner than it would otherwise.

Edge cases (0th and last image of gallery) follow arrowsConfig.character , so swiping wraps around only when arrows do.

enabled

Type: boolean

Enables swipe navigation. Default false, so galleries keep behaving exactly as before until swiping is opted into.

threshold

Type: number

Distance in pixels the image has to be dragged for the move to complete on release. Shorter drags return the image back to its place. Default 50.

enableMouseDrag

Type: boolean

Enables swiping with a mouse by dragging the image, in addition to touch. Turn this off when dragging conflicts with selecting or dragging images on desktop. Default true.

programmaticController

Type: object

Object with these basic control functions:

• toggle () => void - toggles lightbox (opened -> closed, vice versa)
• open () => void - opens lightbox
• openImage (imageId: number) => void - opens lightbox at specific image
• close () => void - closes lightbox

<GalleryThumbnail>

In order to use <LightboxGallery> is needed to define layout of gallery thumbnail/s. Thumbnail takes element in slot and displays it to user, whenever user clicks on it, it opens gallery at image associated with this thumbnail.

id

Type: number

Link to gallery image, it can be set to any number within gallery images, starting with 0. Default is order of <GalleryThumbnail>, so let's say you have 3 thumbnails under <LightboxGallery>, the first thumbnails has id 0, next one 1 and third 2.

<GalleryImage>

Except thumbnails, LightboxGallery requires images which will be displayed when gallery is opened. Desired image has to be <GalleryImage> child (in its slot).

title

Type: string/HTML

Same as <Lightbox> title, but this is image specific, that means, it will be only shown for particular image.

description

Type: string/HTML

Same as <Lightbox> description, but this is image specific, that means, it will be only shown for particular image.

CSS

<LightboxGallery> uses same CSS classes as <Lightbox>, overriding those classes will affect gallery style.