sharepear-gallery

1.0.0 • Public • Published

sharepear-gallery

NPM Licence shield Standard - JavaScript Style Guide Build Status

Calculate each picture size to build ideal gallery.

How it work

Install it on your project:

npm install --save sharepear-gallery

Import it on your code:

import { getPicturesSize } from sharepear-gallery

Use it like that:

const pictures = [
  { width: 1024, height: 1024 },
  { width: 512, height: 512 },
  { width: 512, height: 512 },
  { width: 256, height: 256 },
  { width: 256, height: 256 },
  { width: 256, height: 256 },
  { width: 256, height: 256 }
]
const galleryWidth = 1024
const windowHeight = 768
let sharepearGallery = getPicturesSize(pictures, galleryWidth, windowHeight)

console.log(sharepearGallery)

It display:

{
    galleryWidth: 1024
    idealPictureHeight: 384
    partitions: [[100, 100], [100, 100], [100, 100, 100]]
    pictures: [
        { idealHeight: 512, idealWidth: 512, height: 1024, ratio: 1, width: 1024 },
        { idealHeight: 512, idealWidth: 512, height: 512, ratio: 1, width: 512 },
        { idealHeight: 512, idealWidth: 512, height: 512, ratio: 1, width: 512 },
        { idealHeight: 512, idealWidth: 512, height: 256, ratio: 1, width: 256 },
        { idealHeight: 512, idealWidth: 512, height: 256, ratio: 1, width: 256 },
        { idealHeight: 512, idealWidth: 512, height: 256, ratio: 1, width: 256 },
        { idealHeight: 512, idealWidth: 512, height: 256, ratio: 1, width: 256 },
    ]
}

Thanks

Inspired by Chromatic.

Thanks to jtreitz for writing this article, I save it on doc folder.

Package Sidebar

Install

npm i sharepear-gallery

Weekly Downloads

8

Version

1.0.0

License

GPL-3.0

Last publish

Collaborators

  • kosssi