Demo : Lightbox

This is a lightbox sample.
Lightbox is a popup window that displays medias by filling the screen, and dimming out the rest of the web page.

 
<div>Click any of the thumbnail images below to pop up a lightbox.</div> 

<div id="links" class="links"> 
    <a href="/medias/enterprise/demos/diagramjhg.jpegp" title="diagramjhg.jpegp" data-gallery=""><img src="/medias/enterprise/demos/diagramjhg.jpeg"></a> 
    <a href="/medias/enterprise/demos/flyingcar.obj.zip" title="flyingcar.obj" data-gallery=""><img src="/medias/enterprise/demos/flyingcar.jpg"></a> 
    <a href="/medias/enterprise/demos/gosthouse.obj.zip" title="gosthouse.obj" data-gallery=""><img src="/medias/enterprise/demos/gosthouse.jpg"></a> 
    <a href="/medias/enterprise/demos/grand-view-park-sf.jpegp" title="grand-view-park-sf.jpegp" data-gallery=""><img src="/medias/enterprise/demos/grand-view-park-sf.jpeg"></a> 
    <a href="/medias/enterprise/demos/primaryiondrive.glb.zip" title="primaryiondrive.glb" data-gallery=""><img src="/medias/enterprise/demos/primaryiondrive.jpg"></a> 
    <a href="/medias/enterprise/demos/sam010.mp4.zip" title="sam010.mp4" data-gallery=""><img src="/medias/enterprise/demos/sam010.jpg"></a> 
    <a href="/medias/enterprise/demos/the-earth-around.mp4p" title="the-earth-around.mp4p" data-gallery=""><img src="/medias/enterprise/demos/the-earth-around.png"></a> 

  </div> 
<!-- The Gallery as lightbox dialog, should be a child element of the document body --> 
<div id="media-lightbox" class="lark-carousel slide" > 
    <div class="items"></div> 
    <h3 class="title"></h3> 
    <a class="prev">‹</a> 
    <a class="next">›</a> 
    <a class="close">×</a> 
    <a class="cycle-stop"></a> 
    <ol class="indicators"></ol> 
</div> 
<script > 
  function initPage(langx,domx,oneplayer) { 
    var $ = domx.query; 

    require([ 
      "utilhub-toolkits-comctrls-carousels" 
    ],function(carousels) { 
      'use strict' 
       $(document).on('click', '[data-gallery]', function (event) { 
          // Get the container id from the data-gallery attribute: 
          var id = $(this).data('gallery'), 
              $lightbox = $("#media-lightbox"); 
           
          var callbacks = { 
            onopen: function () { 
              container.data('gallery', this).trigger('open') 
            }, 
            onopened: function () { 
              container.trigger('opened') 
            }, 
            onslide: function () { 
              container.trigger('slide', arguments) 
            }, 
            onslideend: function () { 
              container.trigger('slideend', arguments) 
            }, 
            onslidecomplete: function () { 
              container.trigger('slidecomplete', arguments) 
            }, 
            onclose: function () { 
              container.trigger('close') 
            }, 
            onclosed: function () { 
              container.trigger('closed').removeData('gallery') 
            } 
          }; 
          // Select all links with the same data-gallery attribute: 
          var links = $(this) 
            .closest('[data-gallery-group], body') 
            .find('[data-gallery="' + id + '"]'); 

          domx.eventer.stop(event); 

        var players = []; 
        var playingPlayer; 
        function onSlide(e) { 
          if (playingPlayer) { 
            playingPlayer.stop(); 
          } 

          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; 
        } 

        var items = links.map(function(index,link){ 
           let $img = $(link).find('img'); 
           return { 
            "title" : link.title, 
            "href" : link.href, 
            "poster" :  $img.attr("src"), 
            "thumbnail" : $img.attr("src") 
           }; 
        }); 


        var carsouselOptions = Object.assign( 
          { 
             data : { 
                 items : items 
             }, 

             item : { 
               template : renderMediaItem 
             }, 

             indicators : { 
                indicator : { 
                  template : "<li " +  
                    "<% if (title) { %>" +   
                      "title = \"<%= title %>\""+  
                    "<% } %>" +   
                    "<% if (thumbnail) { %>" +   
                      " style = \"background: url('<%= thumbnail %>'\""+  
                    "<% } %>"+  
                 "/>" 
                } 
             }, 

            start: $('[data-gallery]').index(this), 
            onjumped : onSlide 
          }, 
          callbacks 
        ); 

        let carsousel = new carousels.Carousel($lightbox[0],carsouselOptions); 

        $lightbox.find(".close").click(function(){ 
            $lightbox.hide(); 
        }) 
        $lightbox.show(); 
      }); 
    }); 
  } 
</script> 

<link type="text/css" rel="stylesheet" href="/lib/tpl/skydoku/assets/oneplayer/css/oneplayer-all.css"> 

<style> 
#media-lightbox { 
    position: fixed; 
    z-index: 999999; 
    overflow: hidden; 
    background: #000; 
    background: rgba(0, 0, 0, 0.9); 
    display: none; 
    direction: ltr; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 
#media-lightbox  .item img { 
    position: absolute; 
    left: 0; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    right: 0; 
} 


.links img { 
    width: 300px; 
    height: 200px; 
    margin: 30px; 
    cursor: pointer; 
} 

.lark-carousel  .close { 
  position: absolute; 
  top: 15px; 
  left: auto; 
  margin: -15px; 
  font-size: 30px; 
  line-height: 30px; 
  color: #fff; 
  text-shadow: 0 0 2px #000; 
  text-decoration: none; 
  opacity: 0.8; 

  padding: 15px; 
  right: 15px; 
  cursor: pointer; 
} 
</style>