A component to organize and display thumbnails of images. Has two modes.

<od-gallery> is a housing component for <img> tags. Depending on the mode of operation is will display them in a grid or a simple carousel with multiple thumnails. when a thumbnail is clicked a modal is shown with alrger size image.

Installation

• Install with npm

npm i @orcden/od-gallery

Usage

import '@orcden/od-gallery';

<od-gallery id="od-gallery" carousel>
    <img src="https://images.unsplash.com/photo-1569409611407-50eee9f59dfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1389&q=80">
    <img src="https://images.unsplash.com/photo-1567815883115-bcf719bdc8ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80">
    <img src="https://images.unsplash.com/photo-1568121581570-a30e94219113?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
    <img src="https://images.unsplash.com/photo-1568387188834-ff83d00b9915?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80">
    <img src="https://images.unsplash.com/photo-1550728193-be87c574be86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
</od-gallery>
<od-gallery id="od-gallery">
    <img src="https://images.unsplash.com/photo-1569409611407-50eee9f59dfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1389&q=80">
    <img src="https://images.unsplash.com/photo-1567815883115-bcf719bdc8ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80">
    <img src="https://images.unsplash.com/photo-1568121581570-a30e94219113?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
    <img src="https://images.unsplash.com/photo-1568387188834-ff83d00b9915?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80">
    <img src="https://images.unsplash.com/photo-1550728193-be87c574be86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
</od-gallery>

Attributes

| Attribute | Type | Default | Description | |-----------|---------|---------|-----------------------------------------------------------------------------------------| | thumbnail-width | Number | 80 | In pixels. Set to change how wide the thumnails are. Thumbnails are always 16:9 aspect | | carousel | Boolean | false | Set this to tell the gallery to display as a carousel of thumbnails |

Properties

| Attribute | Type | Default | Description | |-----------|---------|---------|-----------------------------------------------------------------------------------------| | thumbnailWidth | Number | 80 | In pixels. Set to change how wide the thumnails are. Thumbnails are always 16:9 aspect | | carousel | Boolean | false | Set this to tell the gallery to display as a carousel of thumbnails |

Styling

• CSS variables are available to alter the default styling provided

| Shadow Parts | Description | |------------------|-----------------------| | view-grid | When not in carousel mode this div houses and arranges the rows of thumnails | | view-carousel | When in carousel mode this is the main carousel that houses and arranges the rows of thumnails | | view-carousel-inner-container | When in carousel mode this is the exposed part of the carousel container | | view-carousel-prev-button | When in carousel mode this is the exposed part of the carousel previous button | | view-carousel-prev-button | When in carousel mode this is the exposed part of the carousel next button | | modal | This is the main modal component that displays after a thumbnail is clicked | | modal-inner | This is exposed part of the modal container that does most of the modal work | | modal-carousel-contaier | A simple div to hold the modal carousel | | modal-carousel | This is the main carousel component that houses the larger images after a thumb is clicked | | modal-carousel-inner-container | The exposed part of the modal carousel container | | modal-carousel-prev-button | The exposed part of the modal carousel previous button | | modal-carousel-prev-button | The exposed part of the modal carousel next button |

Development

Run development server and show demo

npm run demo

Run linter

npm run lint

Fix linter errors

npm run fix

Run tests

npm run test

Build for production

npm run build