Image gallery

An opinionated image gallery which displays all images inside a vertical slider next to the enlarged version of the selected image.

Unfortunately, the design page you are looking for is not ready yet. But you might want to switch to the implementation tab. There you will find the corresponding Vue component and a description of the different use cases and what to consider when implementing it.
If you have any questions, suggestions or ideas for improvement right now, please feel free to contact us directly.
via Slack: #wescale-wui-public
via Mail: wescale-wui@wescale.com

Stay tuned!

import WuiImageGallery from "@wui/wui-vue/lib/image-gallery";

Description

An opinionated image gallery which displays all images inside a vertical slider next to the enlarged version of the selected image. The default view/style is aligned with wui styleguide. Of course, you can bring your own styles for both thumbnails and detail image via named slots, but for a basic gallery this is not needed.

Overview

<wui-image-gallery
  images="[{href: '', description: ''}, {href: ''}, {href: ''}, {href: ''}]"
  number-of-thumbnails="2"
  :infinite-scrolling="false"
  :keyboard-navigation-enabled="true"
/>

<wui-image-gallery
  images="[{href: '', description: ''}, {href: ''}, {href: ''}, {href: ''}]"
  number-of-thumbnails="2"
  :infinite-scrolling="false"
  :keyboard-navigation-enabled="true"
>
  <template #thumbnailTemplate="{ image, index }">
    <img
      class="my-custom-thumbnail-class"
      :src="image.href"
      :title="image.description"
    />
  </template>

  <template #detail="{ image, index }">
    <img class="my-custom-image-class" src="image.href" />
  </template>
</wui-image-gallery>

Notes

Internally this component uses and configures the

WuiGallery
WuiSlider
WuiImageGalleryImage

in an opinionated way.

To align the bottom of the gallery with the bottom of the slider the height of the thumbnails and the height of the gallery have to match. You can use the following formula:

galleryHeight = numberOfThumbnails * thumbnailHeight + (numberOfThumbnails - 1) * thumbnailMargin

The thumbnailMargin is 10px by default,

Component reference

`<wui-image-gallery>`

Properties

Prop	Type	Required	Default	Description
images	`Array` of `Object`	no	`undefined`	List of images to display. Each entry must (at least) have the following properties: { href: "http://.../pic.png", description: "A nice picture of a cat" } If you also provide e.g. a `href_thumbnail` property, this URL can be used in the thumbnail slot.
infiniteScrolling	`Boolean`	no	`false`	When the last item is reached start again with the first
numberOfThumbnails	`Number`	no	`5`	How many thumbnails to show and scroll at once
keyboardNavigationEnabled	`Boolean`	no	`false`	Enables sliding via arrow keys. `PageUp`: go to previous page of slides `PageDown`: go to next page of slides `ArrowUp,ArrowLeft`: select previous slide `ArrowDown,ArrowRight`: select next slide `Home`: select (and goto) first slide `End`: select (and goto) next slide
titlePrevious	`String`	no	`Previous`	The title of the button that scrolls to the previous page
titleNext	`String`	no	`Next`	The title of the button that scrolls to the next page

Slots

Name	Scoped	Description	Scoped properties
thumbnailTemplate	Yes	Contains a visual representation of the provided image.	`image`: `Object` An object consisting of the `href` and `description` of an image. `index`: `Number` The index of the image within the list.
detail	Yes	Contains a larger representation of the selected image.	`image`: `Object` The selected image. `index`: `Number` The index of the selected image.

Events

Event	Arguments	Description
select	`item`: `Object` `index`: `Number`	Whenever a select event is being fired this event is re-emitted here.

From WUI and

with

WUI is wescale’s design system