JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<html>
  <head>
    <title>Product Gallery example</title>
  </head>
  <body>
    <h3>Product Gallery Example</h3>
    <script
      src="https://product-gallery.cloudinary.com/all.js"
      type="text/javascript">
    </script>

    <script
      src="pg_widget.js"
      type="text/javascript">
    </script>

    <div id="my-gallery" style="max-width: 80%; margin: auto;"></div>

    <p>
      <a
        href="https://cloudinary.com/documentation/product_gallery"
        target="_blank">
        Product Gallery User Guide
      </a>
    </p>
    <p>
      <a
        href="https://cloudinary.com/documentation/product_gallery_reference"
        target="_blank">
        Product Gallery Reference
      </a>
    </p>
  </body>
</html>

JavaScript

var myWidget = cloudinary.galleryWidget({
		container: "#my-gallery", 
  cloudName: "shirly-dam", 
    "mediaAssets": [{
        tag: "pgw",
        transformation:{"background":"#DFDFE5"}}, 
    {
        tag: "pgw",
        mediaType: "video",
        transformation:{background: "#FFFFFF", 
        crop: "fill",          
        dpr:  2, 
        width:1400,
        hight:1800,
        duration: 30}
          }]
});
myWidget.render();