JSFiddle - React, Tailwind, and code Playground

by sambrace

HTML

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

<div id="wrap"></div>

<script>

cloudinary.galleryWidget({
  container: '#wrap',
  cloudName: 'geeteeimages',
  mediaAssets: [{
    tag: "test",
      transformation:{
        crop:"fill"
      }
  }, {
    tag: "test",
    mediaType: "video",
      transformation:{
        crop:"fill"
      }
  }],
  carouselLocation: 'bottom',
  carouselStyle: 'thumbnails',
  thumbnailProps:{
        width:54,
        height:54,
        spacing:10,
        borderWidth:1,
        selectedStyle:'all',
        selectedBorderWidth:2,
        selectedBorderPosition:'all',
        mediaSymbolBgShape:'none',
        mediaSymbolIconColor:'red',
        mediaSymbolSize:24,
        navigationShape:'square',
        navigationSize:24,
        navigationFloat:true,
      },
  videoProps:{
            controls:true,
            autoplay:false,
        },
  transition:'fade',
  zoomProps: {
    "viewerZIndex": 100,
    "type": "flyout",
    "trigger": "hover",
    "viewerPosition": "right",
    "showLens": true
},
}).render();
    
</script>