<div style="(%%initStart%%)width:100%;height:100%;(%%initEnd%%)display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;"
  id="fsi-showcase-####RandomID1####">
  <fsi-viewer id="fsi-viewer-####RandomID2####"
  	  style="flex: 1 1 100%;"
  		width="auto"
  		height="100%"
      plugins="resize,fullScreen"
  		fullScreenElement="fsi-showcase-####RandomID1####"
  	>
  	</fsi-viewer>
	<fsi-imagegrid
	  style="flex: 0 1 60%;min-width:140px;"
		width="auto"
		height="100%"
		dir=""
    cellWidth="120"
	  cellHeight="101"
    %%Attributes%%
		viewerSelector="#fsi-viewer-####RandomID2####"
	>

    <fsi-imagegrid-template style="display:none">
      <div class="myImageGridImage" >
        <img class="fsi-image-grid-image"/>
      </div>
      <div class="myImageGridTitle">
        ###image.filename###
      </div>
    </fsi-imagegrid-template>

	</fsi-imagegrid>

	<style>
	      fsi-imagegrid .fsi-imagegrid-root .myImageGridTitle{
  				padding:0 4px;
  				font-size:11px;
  				text-align:center;
  				height:20px;
  				line-height:20px!important;
  				background-color:#000;
  				color:#999;
  				overflow:hidden;
  				text-overflow:ellipsis;
  				white-space: nowrap;
  			}

  			fsi-imagegrid .fsi-imagegrid-root div.myImageGridImage{
  				height:calc(100% - 20px);
  				background-color:#DDD;
  			}
  </style>

</div>
<!-- JSON:
{"mainTag":"fsi-thumbbar","dimTag":"div","dimOffsetWidth":160, "dimOffsetHeight":30}
-->
