How to use pro-gallery - 10 common examples

const eventListener = (eventName, eventData) => {
    switch (eventName) {
      case GALLERY_EVENTS.APP_LOADED: 
      case GALLERY_EVENTS.GALLERY_CHANGE: 
        setGalleryReady();
        break;
      case GALLERY_EVENTS.NEED_MORE_ITEMS: 
        setItems(getItems().concat(mixAndSlice(testItems, ITEMS_BATCH_SIZE)));
        break;
      case GALLERY_EVENTS.ITEM_ACTION_TRIGGERED: 
        setFullscreenIdx(eventData.idx);
        break;
      default: 
        // console.log({eventName, eventData});
        break;
    }
  }

const eventListener = (eventName, eventData) => {
    switch (eventName) {
      case GALLERY_EVENTS.APP_LOADED: 
      case GALLERY_EVENTS.GALLERY_CHANGE: 
        setGalleryReady();
        break;
      case GALLERY_EVENTS.NEED_MORE_ITEMS: 
        setItems(getItems().concat(mixAndSlice(testItems, ITEMS_BATCH_SIZE)));
        break;
      case GALLERY_EVENTS.ITEM_ACTION_TRIGGERED: 
        setFullscreenIdx(eventData.idx);
        break;
      default: 
        // console.log({eventName, eventData});
        break;
    }
  }

const eventListener = (eventName, eventData) => {
    switch (eventName) {
      case GALLERY_EVENTS.APP_LOADED: 
      case GALLERY_EVENTS.GALLERY_CHANGE: 
        setGalleryReady();
        break;
      case GALLERY_EVENTS.NEED_MORE_ITEMS: 
        setItems(getItems().concat(mixAndSlice(testItems, ITEMS_BATCH_SIZE)));
        break;
      case GALLERY_EVENTS.ITEM_ACTION_TRIGGERED: 
        setFullscreenIdx(eventData.idx);
        break;
      default: 
        // console.log({eventName, eventData});
        break;
    }
  }

const eventListener = (eventName, eventData) => {
    switch (eventName) {
      case GALLERY_EVENTS.APP_LOADED: 
      case GALLERY_EVENTS.GALLERY_CHANGE: 
        setGalleryReady();
        break;
      case GALLERY_EVENTS.NEED_MORE_ITEMS: 
        setItems(getItems().concat(mixAndSlice(testItems, ITEMS_BATCH_SIZE)));
        break;
      case GALLERY_EVENTS.ITEM_ACTION_TRIGGERED: 
        setFullscreenIdx(eventData.idx);
        break;
      default: 
        // console.log({eventName, eventData});
        break;
    }
  }

magicLayoutSeed: 1,
    //itemOpacity:'color-5', startWithOpacity: 0.60,
    //itemIconColorSlideshow: 'color-5'
    // itemIconColor: color-1
    // arrowsColor: 'color-1'
    imageHoverAnimation: Consts.imageHoverAnimations.NO_EFFECT,
    // itemFont: 'font_5'  // startWithSize: 22,
    // itemFontColor: 'color-1'
    // itemFontSlideshow:'font_5' // startWithSize: 22,
    // itemFontColorSlideshow: 'color-5'
    // itemDescriptionFont: 'font_8' // startWithSize: 15
    // itemDescriptionFontColor: 'color-1'
    // itemDescriptionFontSlideshow: 'font_8' // startWithSize: 15
    // itemDescriptionFontColorSlideshow: 'color-5'
    // textBoxFillColor: 'color-2', //startWithOpacity: 1,
    calculateTextBoxHeightMode: Consts.calculationOptions.AUTOMATIC,
    textBoxHeight: 200,
    textImageSpace: 10,
    textBoxBorderRadius: 0,
    textBoxBorderWidth: 0,
    // textBoxBorderColor: color-5,
    textsVerticalPadding: 0,
    textsHorizontalPadding: 0,
    titleDescriptionSpace: 6,
    customButtonText: '',
    // customButtonFontForHover: 'font_8', startWithSize: 15
    // customButtonFontColorForHover: color-5
    // customButtonFont: 'font_8', startWithSize: 15
    // customButtonFontColor: color-1'
    // customButtonColor: startWithOpacity: '0', startWithColor: 'color-1'
    customButtonBorderWidth: 1,
    // customButtonBorderColor: startWithColor: 'color-1'

// loadMoreButtonColor: startWithOpacity: '1', startWithColor: 'color-1'
    loadMoreButtonBorderWidth: 1,
    // loadMoreButtonBorderColor:  startWithColor: 'color-5'
    loadMoreButtonBorderRadius: 0,
    imageInfoType: Consts.infoType.NO_BACKGROUND,
    itemBorderWidth: 0,
    // itemBorderColor: 'color-5'
    itemBorderRadius: 0,
    itemEnableShadow: false,
    // itemShadowOpacityAndColor: startWithColor: 'color-5', startWithOpacity: 0.2
    itemShadowBlur: 20,
    itemShadowDirection: 135,
    itemShadowSize: 10,
    imageLoadingMode: Consts.loadingMode.BLUR,
    // imageLoadingColor: startWithColor: 'color-3'
    expandAnimation: Consts.expandAnimations.NO_EFFECT,
    // oneColorAnimationColor: startWithColor: 'color-1',
    imageQuality: 90,
    usmToggle: false,
    usm_a: 0,
    usm_r: 0,
    usm_t: 0,
    videoSound: false,
    videoSpeed: '1',
    videoLoop: true,
};


export function formatValue(val) {
    if (Number(val) === parseInt(val)) {
        return Number(val);
    } else if (val === 'true') {

// addToCartFontExpand: font-8
    // addToCartColorExpand: color-1
    addToCartBorderWidth: 1,
    //addToCartBorderColor: color-5,
    addToCartButtonText: '',
    slideshowInfoSize: 200,
    playButtonForAutoSlideShow: false,
    allowSlideshowCounter: false,
    hoveringBehaviour: Consts.infoBehaviourOnHover.APPEARS,
    thumbnailSize: 120,
    magicLayoutSeed: 1,
    //itemOpacity:'color-5', startWithOpacity: 0.60,
    //itemIconColorSlideshow: 'color-5'
    // itemIconColor: color-1
    // arrowsColor: 'color-1'
    imageHoverAnimation: Consts.imageHoverAnimations.NO_EFFECT,
    // itemFont: 'font_5'  // startWithSize: 22,
    // itemFontColor: 'color-1'
    // itemFontSlideshow:'font_5' // startWithSize: 22,
    // itemFontColorSlideshow: 'color-5'
    // itemDescriptionFont: 'font_8' // startWithSize: 15
    // itemDescriptionFontColor: 'color-1'
    // itemDescriptionFontSlideshow: 'font_8' // startWithSize: 15
    // itemDescriptionFontColorSlideshow: 'color-5'
    // textBoxFillColor: 'color-2', //startWithOpacity: 1,
    calculateTextBoxHeightMode: Consts.calculationOptions.AUTOMATIC,
    textBoxHeight: 200,
    textImageSpace: 10,
    textBoxBorderRadius: 0,
    textBoxBorderWidth: 0,
    // textBoxBorderColor: color-5,
    textsVerticalPadding: 0,

// actionsColorExpand: color-5
    // titleFontExpand: font_5
    // titleColorExpand: color-5
    // descriptionFontExpand: font_8
    // descriptionColorExpand: color-5,
    galleryAlignExpand: 'left',
    // addToCartBackColorExpand: color-5,
    // addToCartFontExpand: font-8
    // addToCartColorExpand: color-1
    addToCartBorderWidth: 1,
    //addToCartBorderColor: color-5,
    addToCartButtonText: '',
    slideshowInfoSize: 200,
    playButtonForAutoSlideShow: false,
    allowSlideshowCounter: false,
    hoveringBehaviour: Consts.infoBehaviourOnHover.APPEARS,
    thumbnailSize: 120,
    magicLayoutSeed: 1,
    //itemOpacity:'color-5', startWithOpacity: 0.60,
    //itemIconColorSlideshow: 'color-5'
    // itemIconColor: color-1
    // arrowsColor: 'color-1'
    imageHoverAnimation: Consts.imageHoverAnimations.NO_EFFECT,
    // itemFont: 'font_5'  // startWithSize: 22,
    // itemFontColor: 'color-1'
    // itemFontSlideshow:'font_5' // startWithSize: 22,
    // itemFontColorSlideshow: 'color-5'
    // itemDescriptionFont: 'font_8' // startWithSize: 15
    // itemDescriptionFontColor: 'color-1'
    // itemDescriptionFontSlideshow: 'font_8' // startWithSize: 15
    // itemDescriptionFontColorSlideshow: 'color-5'
    // textBoxFillColor: 'color-2', //startWithOpacity: 1,

// customButtonFontForHover: 'font_8', startWithSize: 15
    // customButtonFontColorForHover: color-5
    // customButtonFont: 'font_8', startWithSize: 15
    // customButtonFontColor: color-1'
    // customButtonColor: startWithOpacity: '0', startWithColor: 'color-1'
    customButtonBorderWidth: 1,
    // customButtonBorderColor: startWithColor: 'color-1'
    customButtonBorderRadius: 0,
    loadMoreButtonText: '',
    //loadMoreButtonFont: font_8
    // loadMoreButtonFontColor: color-5
    // loadMoreButtonColor: startWithOpacity: '1', startWithColor: 'color-1'
    loadMoreButtonBorderWidth: 1,
    // loadMoreButtonBorderColor:  startWithColor: 'color-5'
    loadMoreButtonBorderRadius: 0,
    imageInfoType: Consts.infoType.NO_BACKGROUND,
    itemBorderWidth: 0,
    // itemBorderColor: 'color-5'
    itemBorderRadius: 0,
    itemEnableShadow: false,
    // itemShadowOpacityAndColor: startWithColor: 'color-5', startWithOpacity: 0.2
    itemShadowBlur: 20,
    itemShadowDirection: 135,
    itemShadowSize: 10,
    imageLoadingMode: Consts.loadingMode.BLUR,
    // imageLoadingColor: startWithColor: 'color-3'
    expandAnimation: Consts.expandAnimations.NO_EFFECT,
    // oneColorAnimationColor: startWithColor: 'color-1',
    imageQuality: 90,
    usmToggle: false,
    usm_a: 0,
    usm_r: 0,

allowTitle: true,
    allowDescription: false,
    allowHover: true,
    loveButton: true,
    loveCounter: false,
    videoPlay: Consts.videoPlay.HOVER,
    scrollAnimation: Consts.scrollAnimations.NO_EFFECT,
    scrollDirection: 0,
    overlayAnimation: Consts.overlayAnimations.NO_EFFECT,
    arrowsPosition: 0,
    arrowsSize: 23,
    watermarkOpacity: 40,
    watermarkSize: 40,
    useWatermark: true,
    watermarkDock: Consts.watermarkDock.RIGHT_DOWN,
    loadMoreAmount: Consts.loadMoreAmount.ALL,
    defaultShowInfoExpand: 1,
    allowTitleExpand: true,
    allowDescriptionExpand: true,
    allowLinkExpand: true,
    expandInfoPosition: 0,
    allowFullscreenExpand: true,
    fullscreenLoop: false,
    // bgColorExpand: color-1
    // actionsColorExpand: color-5
    // titleFontExpand: font_5
    // titleColorExpand: color-5
    // descriptionFontExpand: font_8
    // descriptionColorExpand: color-5,
    galleryAlignExpand: 'left',
    // addToCartBackColorExpand: color-5,
    // addToCartFontExpand: font-8