ihk24/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js

import './gallery.scss';
import $ from 'jquery';
import {createElement} from "../../_global/scripts/helpers";
import {galleryData} from "./GalleryData";
import Gallery from "./gallery";

export const createGallery =
  ({
    galleryType = 'grid',
    itemsPerPage = 9,
    data = galleryData,
  }) => {
    const thumbWidth = galleryType === 'single-image' || galleryType === 'first-image' ? 880 : 300;
    const section = createElement('section', ['gallery'], null, null);
    section.dataset.type = galleryType;
    section.dataset.perPage = itemsPerPage.toString();

    const wrapper = createElement('div', ['gallery-wrapper'], '', section);

    data.map((item) => {
      const imageDiv = createElement('div', ['image'], '', wrapper);
      const thumbHeight = Math.round(thumbWidth / parseInt(item.width) * parseInt(item.height));
      imageDiv.dataset.thumb = item.src.replace(item.width, thumbWidth.toString()).replace(item.height, thumbHeight.toString());;
      imageDiv.dataset.full = item.src;
      imageDiv.dataset.width = item.width;
      imageDiv.dataset.height = item.height;
    })

    $(document).ready(() => {
      new Gallery($(section));
    })

    return section;
  };