Product Gallery Widget - 135693

by Shirly Manor

HTML

<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>
<div id="my-gallery" style="max-width:80%;margin:auto"></div>
<button onClick="openGallery()">Product Gallery</button>

JavaScript

const myWidget = cloudinary.galleryWidget({
    "container": "#my-gallery",
    "cloudName": "demo",
    "mediaAssets": [{
        "tag": "bag_product_gallery_demo",
        "mediaType": "image",
        "transformation": {
            "crop": "fill"
        }
    }],
    "bgColor": "transparent",
    "carouselLocation": "left",
    "carouselOffset": 10,
    "navigation": "always",
    "aspectRatio": "square",
    "themeProps": {
        "active": "#000000"
    },
    "navigationButtonProps": {
        "shape": "rectangle",
        "color": "#000",
        "iconColor": "#fff",
        "size": 52
    },
    "thumbnailProps": {
        "spacing": 18,
        "width": 83,
        "height": 80,
        "navigationFloat": true,
        "mediaSymbolBgShape": "square",
        "navigationShape": "none",
        "selectedStyle": "all",
        "selectedGradientEnd": "#ffffff",
        "selectedGradientDirection": "vertical",
        "selectedBorderPosition": "bottom"
    },
    "zoomProps": {
        "trigger": "hover",
        "level": 2,
        "type": "flyout"
    }
});
myWidget.render();