@orcden/od-gallery NPM

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