How to set swatch images thumbnail bar vertically in Media Viewer?

Question

<script type="text/javascript"> var mixedMediaViewer = new s7viewers.MixedMediaViewer({ "containerId":"s7viewer", "params":{ "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample", "serverurl":"http://s7d1.scene7.com/is/image/", "videoserverurl":"http://s7d1.scene7.com/is/content/" } }).init(); </script>

I want to have the swatch images to be showed vertically as highlighted in the image.

score 0 · Accepted Answer · answered Mar 12 '20 at 05:37

I have altered the sample example. This is not the perfect solution but this may help you:

<!DOCTYPE html> 
<html> 
     <head> 
         <script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/MixedMediaViewer.js"></script> 
         <style type="text/css"> 
           #s7viewer.s7mixedmediaviewer { 
             width: 640px; 
             height: 480px; 
           } 
           .s7swatches {
             top: 30%;
             transform: rotate(90deg);

           }
           .s7swatches > div {
             top:200% !important;

           }
         </style> 
     </head> 
     <body> 
         <div id="s7viewer" style="position:relative"></div> 
         <script type="text/javascript"> 
           var mixedMediaViewer = new s7viewers.MixedMediaViewer({ 
             "containerId":"s7viewer", 
             "params":{ 
               "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample", 
               "serverurl":"https://s7d1.scene7.com/is/image/", 
               "videoserverurl":"http://s7d1.scene7.com/is/content/" 
             } 
           }).init(); 
        </script> 
    </body> 
</html>

You can add more css logic of your own to adjust the bar. – Vaibhav Gidde Mar 12 '20 at 05:40 — Vaibhav Gidde, Mar 12 '20 at 05:40

How to set swatch images thumbnail bar vertically in Media Viewer?

1 Answers1