JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript">
</script>  

<div id="my-gallery">
</div>

JavaScript

const myWidget = cloudinary.galleryWidget({
    "container": "#my-gallery",
    "cloudName": "demo",
    "mediaAssets": [{
        "tag": "shoes_product_gallery_demo",
        "mediaType": "image"
    }, {
        "tag": "shoes_product_gallery_demo",
        "mediaType": "video"
    }, {
        "tag": "shoes_product_gallery_demo_spinset",
        "mediaType": "spin"
    }],
    "displayProps": {
        "mode": "classic",
        "columns": 1,
        "spacing": 15
    },
    "transformation": {
        "crop": "fill"
    },
    "bgColor": "transparent",
    "carouselLocation": "left",
    "carouselOffset": 10,
    "navigation": "always",
    "thumbnailProps": {
        "mediaSymbolSize": 42,
        "spacing": 20,
        "width": 390,
        "height": 90,
        "navigationFloat": true,
        "navigationShape": "square",
        "navigationSize": 40,
        "navigationColor": "#ffffff",
        "selectedStyle": "border",
        "selectedBorderPosition": "bottom",
        "selectedBorderWidth": 4
    },
    "navigationButtonProps": {
        "shape": "round",
        "iconColor": "#ffffff",
        "color": "#000",
        "size": 52,
        "navigationPosition": "offset",
        "navigationOffset": 12
    },
    "themeProps": {
        "primary": "#000000",
        "active": "#777777"
    }
});
myWidget.render();