Demo : Gallery

This is a media gallery sample,you can switch carousel mode to rotating、slider or coverflow.

 
<div style="min-height:600px;position:relative"> 
<u-oneplayer data-options="pickfile:true" class="u-oneplayer" tabindex="-1" style="width:90%;height:90%" role="region" lang="en" aria-label="OnePlayer"> 
</u-oneplayer> 
</div> 

<script id="tpl-oneplayer-picker" charset="UTF-8" type="text/html"> 
     
<div class = "uop-picker"> 
  <div class="tabstrip"> 
    <ul class="nav nav-tabs"> 
    </ul> 
    <div class="tab-content"> 
    </div> 
  </div> 
</div>    
     
</script> 

<script id="tpl-oneplayer-picker-tabitem" charset="UTF-8" type="text/html"> 
  <li data-pickfrom="<%= from %>"> 
    <a data-toggle="tab"><%= label %></a> 
  </li> 
</script> 

<script id="tpl-oneplayer-picker-tabpane" charset="UTF-8" type="text/html"> 
<div class="tab-pane" ></div> 
</script> 

<script id="tpl-oneplayer-picker-listing" charset="UTF-8" type="text/html"> 
  <div class="lark-carousel rotate" > 
    <div  class="items-container" > 
      <ul class= "items" > 
        <!-- Add your images (or video) here --> 
      </ul> 
      <!-- Text at center of ground --> 
      <p class = "desc">3dMAX  Rotate  Carousel</p> 
      <div id="ground" class="ground" style="width: 720px; height: 720px;"></div> 
    </div> 
    <a class="prev">‹</a> 
    <a class="next">›</a> 
    <a class="cycle-stop"></a> 
    <ol class="indicators"> 
    </ol> 
  </div>         
</script> 

<script id="tpl-oneplayer-picker-listing-modes" charset="UTF-8" type="text/html"> 
  <li class="pull-right"> 
    <div class="btn-group carousel-modes" data-toggle="buttons"> 
      <label class="btn btn-default"> 
        <input name="carsoulMode" type="radio" value="slide"><span class="fa fa-exchange"></span> 
      </label> 
      <label class="btn btn-default"> 
        <input name="carsoulMode" type="radio" value="rotate"><span class="fa fa-houzz"></span> 
      </label> 
      <label class="btn btn-default"> 
        <input name="carsoulMode" type="radio" value="coverflow"><span class="fa fa-gg"></span> 
      </label> 
    </div> 
  </li>     
</script> 

<script id="tpl-oneplayer-picker-listing-item" charset="UTF-8" type="text/html"> 
  <li class="item"  data-media="<%= media %>" > 
    <div class="content"><img src="<%= poster %>"></div> 
  </li>   
</script> 

<script> 
    function initPage(langx,domx,oneplayer) { 
      let $ = domx.query; 
      var medias = [ 
          { 
            type: 'image', 
            poster : "/medias/enterprise/demos/diagramjhg.jpeg", 
            media : "/medias/enterprise/demos/diagramjhg.jpegp",  
            title : "diagramjhg" 
          }, 
          { 
           type: 'image', 
            poster : '/medias/enterprise/demos/flyingcar.jpg', 
            media : "/medias/enterprise/demos/flyingcar.obj.zip",  
            title : "flyingcar" 
          }, 
          { 
            type: 'image', 
            poster : '/medias/enterprise/demos/gosthouse.jpg', 
            media : "/medias/enterprise/demos/gosthouse.obj.zip",  
            title : "gosthouse" 
          }, 
          { 
           type: 'image', 
            poster : "/medias/enterprise/demos/grand-view-park-sf.jpeg", 
            media : "/medias/enterprise/demos/grand-view-park-sf.jpegp",  
            title : "grand view park" 

          }, 

          { 
            type: 'image', 
            poster : "/medias/enterprise/demos/primaryiondrive.jpg", 
            media : "/medias/enterprise/demos/primaryiondrive.glb",  
            title : "PrimaryIon Drive" 
          }, 
           
          { 
           type: 'image', 
            poster : "/medias/enterprise/demos/sam010.jpg", 
            media : "/medias/enterprise/demos/sam019.mp4",  
            title : "sam" 

          },        
          { 
           type: 'image', 
            poster : "/medias/enterprise/demos/the-earth-around.png", 
            media : "/medias/enterprise/demos/the-earth-around.mp4p",  
            title : "the earth around" 

          }        
      ]; 

      const mediaEls = Array.prototype.slice.call(document.getElementsByTagName('u-oneplayer')); 

      if (mediaEls && mediaEls.length > 0) { 
        for (let i = 0, e = mediaEls.length; i < e; i++) { 
          const mediaEl = mediaEls[i], 
                pickerOptions = { 
                  tabs : [ 
                    {label:"Gallery",from:"listing",items:medias,modes:true} 
                  ], 

                  template : $("#tpl-oneplayer-picker").html(), 

                  templates : { 
                    tabitem : $("#tpl-oneplayer-picker-tabitem").html(), 
                    tabpane : $("#tpl-oneplayer-picker-tabpane").html() 
                  }, 

                  froms : { 
                    listing : { 
                      template : $("#tpl-oneplayer-picker-listing").html(), 

                      item : { 
                        template : $("#tpl-oneplayer-picker-listing-item").html() 
                      }, 

                      modes : { 
                        template : $("#tpl-oneplayer-picker-listing-modes").html() 
                      } 
                    } 
                  } 
                }; 

          if (mediaEl.player === undefined) { 
             mediaEl.player = new oneplayer.Player(mediaEl,{ 
               autoplay : true, 
               picker : pickerOptions 
             }); 
          } 
        } 
      } 
    } 
</script> 

<link type="text/css" rel="stylesheet" href="/lib/tpl/skydoku/assets/oneplayer/css/oneplayer-all.css"> 
<style> 
  .throbber { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background: rgba(255, 152, 0, 0.86); 
    color: rgb(255, 255, 255); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
  } 
  .u-oneplayer { 
    position: absolute; 
  } 

  .uop-picker .lark-carousel .desc, .lark-carousel .ground { 
    display: none; 
  } 

  .uop-picker .lark-carousel.rotate .desc, .lark-carousel.rotate .ground { 
    display: block; 
  } 

  .uop-picker .lark-carousel .items-container { 
    height: 100%;  
  } 

  .uop-picker .lark-carousel  .item img { 
    max-width: 90%; 
    max-height: 90%; 
    display: block; 
    margin: auto; 
    cursor : pointer; 
  } 

  .uop-picker .lark-carousel.rotate .items-container { 
    width: 120px;  
    height: 170px;  
  } 
  
  .uop-picker .lark-carousel.rotate .item img { 
    display: block; 
    height : 220px; 
    width: 220px; 
  } 

  .uop-picker .lark-carousel.coverflow .item { 
    height : 360px; 
    width : 360px; 
  } 

  .uop-picker .lark-carousel.coverflow .item img { 
    display: block; 
    height : 360px; 
    width : 360px; 
  } 

 .uop-picker .lark-carousel.slide .item img { 
    display: block; 
    height : 420px; 
    width : 840px 
  } 
</style>