Product Gallery Example - Glasses

An example of images, video and 3D Model with Cloudinary's Product Gallery.

by sambrace

HTML

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

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

<script>
  cloudinary.galleryWidget({
    container: '#wrap',
    cloudName: 'sambrace',
    mediaAssets: [{
      tag: "glasses",
      transformation: {crop:"fill",}
    }, {
      tag: "glasses",
      mediaType: "video",
      transformation: {crop:"fill",}
    }, 
    {tag: "glasses", 
    mediaType: "3d",
    transformation: {crop:"fill",}}],
    carouselStyle: 'thumbnails',
      themeProps: {
        //shape: 'square',
        primary: '#000',
        onPrimary: '#FFF',
      },
      thumbnailProps: {
        width: 54,
        height: 54,
        spacing: 10,
        borderWidth: 1,
        selectedStyle: 'border',
        selectedBorderWidth: 2,
        selectedBorderPosition: 'bottom',
        mediaSymbolBgShape: 'none',
        mediaSymbolIconColor: '#FFF',
        mediaSymbolSize: 24,
        navigationShape: 'square',
        navigationSize: 24,
        navigationFloat: true,
      },
  }).render();

</script>