JSFiddle - React, Tailwind, and code Playground

by Janaka_Ravindra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.4/viewer.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.4/viewer.css">

<div id="images">

    <img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" >
    <img src="https://images.pexels.com/photos/1212487/pexels-photo-1212487.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    <img src="https://images.unsplash.com/photo-1612012460576-5d51b5b04b00?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8d2FsbHBhcGVyJTIwZm9yJTIwbW9iaWxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80">
  </div>

CSS

div img{
  height : 200px;
}

/* .viewer-toolbar > ul > li{
  width: 40px;
  height: 40px;
}

.viewer-toolbar > ul > .viewer-large{
  width: 46px !important;
  height: 46px !important;
}

.viewer-toolbar > ul > li::before{
  margin: 10px 0px 0px 10px !important;
}

.viewer-play::before {
    background-position: -97px 3px !important;
 } */

JavaScript

const viewer = new Viewer(document.getElementById('images'),{

viewed() {

	      viewer['image'].style['border'] = "1px solid white";
        
        for (let t = 0; t < viewer['toolbar'].childNodes[0].childNodes.length; t++){
          let li = viewer['toolbar'].childNodes[0].childNodes[t];

          if(li.className === 'viewer-play viewer-large'){

            li.style.width = '46px';
            li.style.height = '46px';
            /* li.before.style.margin = '10px 0px 0px 10px'; */ //here is my try

          }else{

            li.style.width = '40px';
            li.style.height = '40px';

          }
          
        }
}

});