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; 

        let _windowLoaded = false; 
        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 autoSetup = function () { 

            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 && mediaEl.getAttribute) { 
                        if (mediaEl.player === undefined) { 
                           let player = new oneplayer.Player(mediaEl,{ 
                             autoplay : true, 
                             picker : pickerOptions 
                           }); 
                        } 
                    } else { 
                        autoSetupTimeout(1); 
                        break; 
                    } 
                } 
            } else if (!_windowLoaded) { 
                autoSetupTimeout(1); 
            } 
        }; 
        function autoSetupTimeout(wait) { 

            window.setTimeout(autoSetup, wait); 
        } 
        function setWindowLoaded() { 
            _windowLoaded = true; 
            window.removeEventListener('load', setWindowLoaded); 
        } 
        if (document.readyState === 'complete') { 
            setWindowLoaded(); 
        } else { 
            window.addEventListener('load', setWindowLoaded); 
        } 
        const hasLoaded = function () { 
            return _windowLoaded; 
        }; 

        autoSetupTimeout(1,oneplayer); 

    } 
</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: 100%; 
        max-height: 100%; 
        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>