Differences

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

Link to this comparison view

Both sides previous revision Previous revision
enterprise:demos:slider [2021/10/24 23:54]
admin 		enterprise:demos:slider [2021/10/25 00:00] (current)
admin
Line 7: Line 7:
  
 ===== Running ===== ===== Running =====
- 
 <HTML> <HTML>
 <!-- The Gallery as inline carousel, can be positioned anywhere on the page --> <!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
Line 167: Line 166:
 </style> </style>
 </HTML> </HTML>
 +===== Code =====
 +<code>
 +<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
 +<div id="media-carousel" class="lark-carousel slide" style="width:900px;height:600px;margin:1em auto;max-width:95%">
 +    <div class="items"></div>
 +    <h3 class="title"></h3>
 +    <a class="prev">‹</a>
 +    <a class="next">›</a>
 +    <ol class="indicators"></ol>
 +</div>
 +<br>
  
 +<script>
 +  function initPage(langx,domx,oneplayer) {
 +    var $ = domx.query;
 +
 +    require([
 +      "utilhub-toolkits-comctrls-carousels"
 +    ],function(carousels) {
 +      'use strict'
 +
 +      // Initialize the Gallery as video carousel:
 +
 +      var medias = [
 +        {
 +          title: 'living room',
 +          href: '/medias/enterprise/demos/1k_01_living_room.jpgp',
 +         type: 'image/panorama+jpeg',
 +         poster: '/medias/enterprise/demos/1k_01_living_room.jpgp'
 +        },
 +        {
 +          title: 'kitchen',
 +          href: '/medias/enterprise/demos/1k_02_kitchen.jpgp',
 +         type: 'image/panorama+jpeg',
 +         poster: '/medias/enterprise/demos/1k_02_kitchen.jpgp'
 +        },
 +        {
 +          title: 'bathroom',
 +          href: '/medias/enterprise/demos/1k_03_bathroom.jpgp',
 +         type: 'image/panorama+jpeg',
 +         poster: '/medias/enterprise/demos/1k_03_bathroom.jpgp'
 +        },
 +        {
 +          title: 'washroom',
 +          href: '/medias/enterprise/demos/1k_04_washroom.jpgp',
 +         type: 'image/panorama+jpeg',
 +         poster: '/medias/enterprise/demos/1k_04_washroom.jpgp'
 +        },
 +        {
 +          title: 'toilet',
 +          href: '/medias/enterprise/demos/1k_05_toilet.jpgp',
 +         type: 'image/panorama+jpeg',
 +         poster: '/medias/enterprise/demos/1k_05_toilet.jpgp'
 +        }
 +        
 +      ];
 +
 +      var players = [];
 +      var playingPlayer;
 +      function onSlide(e) {
 +        if (playingPlayer) {
 +          playingPlayer.stop();
 +          ///playingPlayer.pause();
 +        }
 +
 +        players[e.toIndex].resize();
 +      }
 +
 +      function renderMediaItem(item, callback) {
 +        item.altText = item.altText || item.title;
 +
 +        let playerElement = $("<div class=\"u-oneplayer\"/>")[0],
 +            player = new oneplayer.Player(playerElement,{
 +                picker : false,
 +                autoplay : false,
 +                fileOptions :{
 +                  type : item.type,
 +                  url : item.href
 +                },
 +                poster : item.poster,
 +
 +            });
 +
 +        player.on("pause",function(){
 +          playingPlayer = null;
 +        });
 +
 +        player.on("play",function(){
 +          playingPlayer = player;
 +        });
 +
 +        players.push(player);
 +        return playerElement;
 +      }
 +
 +
 +      $('#media-carousel').plugin("utilhub.toolkits.comctrls.carousel",{
 +          cycle : {
 +            interval:0
 +          },
 +          data : {
 +            items: medias 
 +          },
 +          mode : "slide",
 +          start : 0,
 +          onjumped : onSlide,
 +
 +          item : {
 +            template : renderMediaItem
 +          },
 +         indicators : {
 +            indicator : {
 +              template : "<li " + 
 +                "<% if (title) { %>" +  
 +                  "title = \"<%= title %>\""+ 
 +                "<% } %>" +  
 +                "<% if (poster) { %>" +  
 +                  " style = \"background: url('<%= poster %>'\""+ 
 +                "<% } %>"+ 
 +             "/>"
 +            }
 +         }
 +      });
 +    });
 +  }
 +</script>
 +
 +<link type="text/css" rel="stylesheet" href="/lib/tpl/skydoku/assets/oneplayer/css/oneplayer-all.css">
 +
 +<style>
 +    .lark-carousel.slide {
 +          width:680px;
 +          height:480px;
 +          margin:1em auto;    
 +          max-width: 100%;
 +         max-height: 100%;
 +    }
 +    .lark-carousel.slide .indicators {
 +          z-index: 100;
 +          bottom: 30px;
 +          background: #00000080;
 +          margin: 0;
 +          padding: 0;
 +          right: 0;
 +          left: 0;
 +          height: 80px;
 +     }
 +
 +     .uop-poster{
 +        background-size: cover;
 +     }
 +
 +      .lark-carousel.slide > .indicators > li {
 +          width : 60px;
 +          height: 60px;
 +          background-size: 100% 100% !important;
 +      }
 +
 +</style>
 +</code>