Product Image Gallery¶

Handles the the Main-Image, Thumbnails, & PhotoSwipe Close-up gallery functionality that hooks into Miva's AttributeMachine & ImageMachine functionality.

Installation¶

Add import ProductImageGallery from 'extensions/product-image-gallery'; To the top of any file that needs to import this extension

Example Usage¶

Initialize the class using the following call:

.js¶

import ProductImageGallery from 'extensions/product-image-gallery';

new ProductImageGallery( [options] );

Options¶

You can also pass the following settings to change the behavior of the class:

new ProductImageGallery(
    productLayoutImageSlider = '#js-product-layout-image-slider', // String, Query-Selector of a single DOM element to house the gallery's functionality
    mainImagecarouselOptions = { // Object, Controls the main-image's Carousel. See the Carousel extension for all the possible options here.
        arrows: true,
        breakpoints: {
            959: {
                pagination: true
            }
        },
        lazyLoad: 'nearby',
        pagination: false,
        preloadPages: 0,
        type: 'loop'
    },
    thumbnailCarouselOptions = { // Object, Controls the thumbnail's Carousel. See the Carousel extension for all the possible options here.
        arrows: true,
        breakpoints: {
            959: {
                direction: 'ltr',
                perPage: 1
            }
        },
        direction: 'ttb',
        gap: '0.5rem',
        height: '50vh',
        isNavigation: true,
        lazyLoad: 'nearby',
        pagination: false,
        perPage: 5,
        preloadPages: 0,
        type: 'loop'
    },
    photoSwipeWrapSelector = 'js-photoswipe-wrap', // String, ID-Selector of DOM element to house the PhotoSwipe functionality
    thumbnailsSliderSelector = 'js-thumbnails-slider', // String, ID-Selector of DOM element to house the thumbnail slider
    carouselSlidesSelector = '.g-carousel__slides', // String, Query Selector of the Carousel's Slides
    videos = [] // Array of Strings of Youtube Video IDs. Corresponds to the Product_Images multi-text custom-field
)