Adjustable margins at the library level?

[huy-vuong]

Originally posted by @neptunian in https://github.com/neptunian/react-photo-gallery/issues/64#issuecomment-326077061

No they dont need to have common dimensions. It is being calculated so that they can all fit in a row and scale together. It's calculated in the library. If your widths are off at all, it will not work. If you have some css that is interfering and putting padding or margin on any of the elements, it will not work. 1 extra pixel will throw off everything. Don't forget you need to explicitly pass in the exact width and height of your images.

Is it possible to pass a desired margin to the library so instead of say margin: 2px it can calculate it assuming margin: 1px?

[skoal2007]

Hi Huy, Have you solved this issue. I also want to increase the margin to 5, but when I use number larger than 2, the gallery breaks. Please let me know if you have any solution. Thank you

[huy-vuong]

'Fraid not yet. =[ Hoping someone has an answer here.

[skoal2007]

'Fraid not yet. =[ Hoping someone has an answer here.

I just went through the source code, and found out you need to set margin on Gallery component as well. Problem solved, just set margin on both sections

const PHOTO_MARGIN = 5;

class MyGallery extends React.Component {

// ....

  imageRenderer({ index, onClick, photo, margin, direction, top, left, key }) {
    // const { history } = this.props;
    // console.log(props)
    return (
      <div key={photo.id} className="image-div">
        <Photo
          key={photo.id}
          index={index}
          photo={photo}
          left={left}
          top={top}
          onClick={() => {}}
          margin={PHOTO_MARGIN}
          direction={direction}
        />
      </div>
    );
  }
render() {
      return (
         ...
          <Gallery photos={gallery_list} renderImage={this.imageRenderer} margin={PHOTO_MARGIN} />
          ...
       )
  }
}