javascripthtmlcssadobemediaview

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

<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 thumbnails vertically**As like this image**

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

Solution

  • 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>