@judsirera/acamp-gallery NPM

Acamp Gallery

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

Demo

Try out a demo here

Install

npm i @judsirera/acamp-gallery

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 '@judsirera/acamp-gallery/styles/css/acamp-gallery.css';

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

or as link in the head of your html

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

<link
  rel="stylesheet"
  href="https://unpkg.com/@judsirera/acamp-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'
/>;