Product Gallery Widget

Test

by Shirly Manor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<html>
<head>
<title>JS + gallery test</title>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.11.2/cloudinary-core.min.js" type="text/javascript">
</script>
<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript">
</script>
<h2>
Images
</h2>
<div id="my-gallery1" style="max-width:80%;margin:auto;height:500">
</div>
<ul id="linksList"></ul>
<script type="text/javascript">

const myGallery1= cloudinary.galleryWidget({
container: "#my-gallery1",
cloudName: "demo",
aspectRatio: "4:3",
mediaAssets: [
{tag: "electric_car_product_gallery_demo", mediaType: "image", transformation: { background:"rgb:EFD2E9", crop: "fill",  gravity:"auto" }},
]
});

myGallery1.render();

var cl = new cloudinary.Cloudinary({
  cloud_name: 'stephencloudinary',
  secure: true,
});

const appendAnchorTag = () => {
  const anchor = document.createElement('a');
  const list = document.getElementById('linksList');
  const li = document.createElement('li');
  anchor.href = 'http://google.com';
  anchor.innerText = 'Go to Google';
  li.appendChild(anchor);
  list.appendChild(li);
};
var url = cl.url("sample" , {raw_transformation:'fl_attachment'});
console.log("JS SDK URL:")
console.log(url);
console.log("URL above?")

</script>

</body>
</html>