@manufosela/photo-collage

A photo collage web component that displays images in a grid with random rotations, optional polaroid style, automatic image cycling, and click-to-zoom.

Installation

npm install @manufosela/photo-collage

Usage

<script type="module">
  import '@manufosela/photo-collage';
</script>

<photo-collage
  width="1200"
  height="700"
  cols="4"
  rows="3"
  max-rotation="15"
  interval="5"
  polaroid
  zoomable
  randomize
>
  <img src="photo1.jpg" alt="Photo 1">
  <img src="photo2.jpg" alt="Photo 2">
  <!-- Add more images than cols*rows to enable randomize -->
</photo-collage>

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | width | Number | 1200 | Collage width in pixels | | height | Number | 700 | Collage height in pixels | | cols | Number | 4 | Number of columns | | rows | Number | 3 | Number of rows | | max-rotation | Number | 15 | Max random rotation in degrees | | randomize | Boolean | false | Cycle through extra images with fade effect | | interval | Number | 5 | Seconds between image swaps | | polaroid | Boolean | true | Polaroid-style frame with shadow | | shuffle | Boolean | false | Randomize initial image order | | zoomable | Boolean | false | Click-to-zoom on photos |

Slot

Pass <img> elements as children. If more images are provided than cols * rows, the extra images will be cycled in when randomize is enabled.

License

MIT