Acamp Gallery

The gallery used at Acamp, now available for your pages!

Try out a demo here

Install

npm i @acamp-components/gallery

Publish

You need to be logged in with your npm account:

npm login

Once you're logged in:

npm publish

Props

| Prop | type | Description | Default Value | | --------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | | images | Array | Array of image URL | [] | | initialImage | Number | The index of the active image on mount | 0 | | height | Number | The height of the wrapper component (in px) | 460 | | columnGutter | Number | The margin between slides (in px) | 20 | | columnWidth | Number | The width of the non-active slides (in px) | 75 | | sideColumns | Number | The number of side columns considering only one side. | 2 | | containImage | String | Whether the gallery should render the image with full height. Possible values: "contain", "contain_active", "off" | "off" | | activeOnHover | Boolean | Set to true if you want to active an image on hover | false | | navigation | Boolean or Object | Sets the properties for navigation. Accepts true, false or { className: '', showWhenOneImageOrLess: ''} | true. When there's less than one image, navigation is hidden | | loaderElement | node | The node element to render when loading at start | null |

Style Import

import '@acamp-components/gallery/styles/css/acamp-gallery.css';

import '@acamp-components/gallery/styles/scss/acamp-gallery.scss';

or as link in the head of your html

<link
  rel="stylesheet"
  href="https://unpkg.com/@acamp-components/gallery/styles/css/acamp-gallery.css"
/>

<link
  rel="stylesheet"
  href="https://unpkg.com/@acamp-components/gallery/styles/scss/acamp-gallery.scss"
/>

Example

const IMAGES = Array.from(Array(5), () => 'https://via.placeholder.com/300x200');

<AcampGallery
  images={IMAGES}
  height={460}
  columnGutter={20}
  columnWidth={75}
  sideColumns={2}
  containImage={AcampGallery.CONTAIN_OFF}
  activeOnHover={false}
  navigation={{
    className: 'your-navigation-classname',
    showWhenOneImageOrLess: false
  }}
  className='your-gallery-wrapper-classname'
/>;

Credits

Designed by Marija Vitasovic and implemented by Judith Sirera while working at Acamp