Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
enterprise:demos:gallery [2021/10/24 22:25]
admin 		enterprise:demos:gallery [2021/10/27 00:45] (current)
admin
Line 80: Line 80:
 <script> <script>
     function initPage(langx,domx,oneplayer) {     function initPage(langx,domx,oneplayer) {
-        let $ = domx.query; +      let $ = domx.query; 
-        var medias = [ +      var medias = [ 
-            { +          { 
-              type: 'image', +            type: 'image', 
-              poster : "/medias/enterprise/demos/diagramjhg.jpeg", +            poster : "/medias/enterprise/demos/diagramjhg.jpeg", 
-              media : "/medias/enterprise/demos/diagramjhg.jpegp",  +            media : "/medias/enterprise/demos/diagramjhg.jpegp",  
-              title : "diagramjhg" +            title : "diagramjhg" 
-            }, +          }, 
-            { +          { 
-             type: 'image', +           type: 'image', 
-              poster : '/medias/enterprise/demos/flyingcar.jpg', +            poster : '/medias/enterprise/demos/flyingcar.jpg', 
-              media : "/medias/enterprise/demos/flyingcar.obj.zip",  +            media : "/medias/enterprise/demos/flyingcar.obj.zip",  
-              title : "flyingcar" +            title : "flyingcar" 
-            }, +          }, 
-            { +          { 
-              type: 'image', +            type: 'image', 
-              poster : '/medias/enterprise/demos/gosthouse.jpg', +            poster : '/medias/enterprise/demos/gosthouse.jpg', 
-              media : "/medias/enterprise/demos/gosthouse.obj.zip",  +            media : "/medias/enterprise/demos/gosthouse.obj.zip",  
-              title : "gosthouse" +            title : "gosthouse" 
-            }, +          }, 
-            { +          { 
-             type: 'image', +           type: 'image', 
-              poster : "/medias/enterprise/demos/grand-view-park-sf.jpeg", +            poster : "/medias/enterprise/demos/grand-view-park-sf.jpeg", 
-              media : "/medias/enterprise/demos/grand-view-park-sf.jpegp",  +            media : "/medias/enterprise/demos/grand-view-park-sf.jpegp",  
-              title : "grand view park"+            title : "grand view park"
  
-            },+          },
  
-            { +          { 
-              type: 'image', +            type: 'image', 
-              poster : "/medias/enterprise/demos/primaryiondrive.jpg", +            poster : "/medias/enterprise/demos/primaryiondrive.jpg", 
-              media : "/medias/enterprise/demos/primaryiondrive.glb",  +            media : "/medias/enterprise/demos/primaryiondrive.glb.zip",  
-              title : "PrimaryIon Drive" +            title : "PrimaryIon Drive" 
-            }, +          }, 
-             +           
-            { +          { 
-             type: 'image', +           type: 'image', 
-              poster : "/medias/enterprise/demos/sam010.jpg", +            poster : "/medias/enterprise/demos/sam010.jpg", 
-              media : "/medias/enterprise/demos/sam019.mp4",  +            media : "/medias/enterprise/demos/sam019.mp4",  
-              title : "sam"+            title : "sam"
  
-            },        +          },        
-            { +          { 
-             type: 'image', +           type: 'image', 
-              poster : "/medias/enterprise/demos/the-earth-around.png", +            poster : "/medias/enterprise/demos/the-earth-around.png", 
-              media : "/medias/enterprise/demos/the-earth-around.mp4p",  +            media : "/medias/enterprise/demos/the-earth-around.mp4p",  
-              title : "the earth around"+            title : "the earth around"
  
-            }        +          }        
-        ];+      ];
  
-        const mediaEls = Array.prototype.slice.call(document.getElementsByTagName('u-oneplayer'));+      const mediaEls = Array.prototype.slice.call(document.getElementsByTagName('u-oneplayer'));
  
-        if (mediaEls && mediaEls.length > 0) { +      if (mediaEls && mediaEls.length > 0) { 
-          for (let i = 0, e = mediaEls.length; i < e; i++) { +        for (let i = 0, e = mediaEls.length; i < e; i++) { 
-            const mediaEl = mediaEls[i], +          const mediaEl = mediaEls[i], 
-                  pickerOptions = { +                pickerOptions = { 
-                    tabs : [ +                  tabs : [ 
-                      {label:"Gallery",from:"listing",items:medias,modes:true} +                    {label:"Gallery",from:"listing",items:medias,modes:true} 
-                    ],+                  ],
  
-                    template : $("#tpl-oneplayer-picker").html(),+                  template : $("#tpl-oneplayer-picker").html(),
  
-                    templates : { +                  templates : { 
-                      tabitem : $("#tpl-oneplayer-picker-tabitem").html(), +                    tabitem : $("#tpl-oneplayer-picker-tabitem").html(), 
-                      tabpane : $("#tpl-oneplayer-picker-tabpane").html() +                    tabpane : $("#tpl-oneplayer-picker-tabpane").html() 
-                    },+                  },
  
-                    froms : { +                  froms : { 
-                      listing : { +                    listing : { 
-                        template : $("#tpl-oneplayer-picker-listing").html(),+                      template : $("#tpl-oneplayer-picker-listing").html(),
  
-                        item : { +                      item : { 
-                          template : $("#tpl-oneplayer-picker-listing-item").html() +                        template : $("#tpl-oneplayer-picker-listing-item").html() 
-                        },+                      },
  
-                        modes : { +                      modes : { 
-                          template : $("#tpl-oneplayer-picker-listing-modes").html() +                        template : $("#tpl-oneplayer-picker-listing-modes").html()
-                        }+
                       }                       }
                     }                     }
-                  };+                  } 
 +                };
  
-            if (mediaEl.player === undefined) { +          if (mediaEl.player === undefined) { 
-               mediaEl.player = new oneplayer.Player(mediaEl,{ +             mediaEl.player = new oneplayer.Player(mediaEl,{ 
-                 autoplay : true, +               autoplay : true, 
-                 picker : pickerOptions +               picker : pickerOptions 
-               }); +             }); 
-            }+          }
         }         }
 +      }
     }     }
 </script> </script>
Line 192: Line 193:
   }   }
  
- .uop-picker .lark-carousel .desc, .lark-carousel .ground { +  .uop-picker .lark-carousel .desc, .lark-carousel .ground { 
-  display: none; +    display: none; 
- }+  }
  
- .uop-picker .lark-carousel.rotate .desc, .lark-carousel.rotate .ground { +  .uop-picker .lark-carousel.rotate .desc, .lark-carousel.rotate .ground { 
-  display: block; +    display: block; 
- }+  }
  
-.uop-picker .lark-carousel .items-container {+  .uop-picker .lark-carousel .items-container {
     height: 100%;      height: 100%; 
-}+  }
  
-.uop-picker .lark-carousel  .item img {+  .uop-picker .lark-carousel  .item img {
     max-width: 100%;     max-width: 100%;
     max-height: 100%;     max-height: 100%;
Line 210: Line 211:
     margin: auto;     margin: auto;
     cursor : pointer;     cursor : pointer;
-}+  }
  
-.uop-picker .lark-carousel.rotate .items-container {+  .uop-picker .lark-carousel.rotate .items-container {
     width: 120px;      width: 120px; 
     height: 170px;      height: 170px; 
-} +  } 
- .uop-picker .lark-carousel.rotate .item img {+  
 +  .uop-picker .lark-carousel.rotate .item img {
     display: block;     display: block;
     height : 220px;     height : 220px;
     width: 220px;     width: 220px;
- }+  }
  
-.uop-picker .lark-carousel.coverflow .item { +  .uop-picker .lark-carousel.coverflow .item { 
-   height : 360px; +    height : 360px; 
-   width : 360px; +    width : 360px; 
-}+  }
  
-.uop-picker .lark-carousel.coverflow .item img {+  .uop-picker .lark-carousel.coverflow .item img {
     display: block;     display: block;
     height : 360px;     height : 360px;
     width : 360px;     width : 360px;
-}+  }
  
  .uop-picker .lark-carousel.slide .item img {  .uop-picker .lark-carousel.slide .item img {
Line 244: Line 246:
 ===== Code ===== ===== Code =====
 <code> <code>
 +<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>
  
 </code> </code>