JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

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

<button onClick="switchToBianco()">bianco</button>
<div id="mainimageDiv" style="height:500px;margin:auto"></div>

<script>
  const myImageWidget = cloudinary.galleryWidget({

    "container": "#mainimageDiv",
    "cloudName": "env-cloud",
    "mediaAssets": [{
      "publicId": "shopimages/products/1200/BP165100M.jpg",
      "transformation": {
          overlay: "overlays:copy-overlay"
      }
    }, {
      "publicId": "shopimages/products/1200/BP165100M_back.jpg",
      "transformation": {
          overlay: "overlays:copy-overlay"
      }
    }],
    "zoomProps": {
      "type": "popup",
      "trigger": "click"
    },
    "themeProps": {
      "primary": "#fff",
      "onPrimary": "#2b8cdb",
      "active": "#2b8cdb"
    },
    "transition": "fade",
    "navigation": "always",
    "carouselLocation": "bottom",
    "viewportBreakpoints": [{
      "breakpoint": 600,
      "carouselLocation": "left"
    }],
    "carouselOffset": 10,
    "carouselStyle": "thumbnails",
    "thumbnailProps": {
      "width": 60,
      "height": 60,
      "selectedStyle": "all",
      "selectedBorderPosition": "all",
      "selectedBorderWidth": 2,
    },
    "analytics": true
  }); 

  myImageWidget.render();
  
  const switchToBianco = function () {
  	//
    myImageWidget.update({
	"mediaAssets": [
	    	{
	        "publicId": "shopimages/products/1200/BP165100W.jpg",
			"transformation": { transformation: [{ overlay: "overlays:copy-overlay"}]}
	    }        ]
});
  }

</script>