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:lightbox [2021/10/20 02:54]
admin 		enterprise:demos:lightbox [2021/10/24 23:37] (current)
admin
Line 1: Line 1:
 +~~Title:lightbox ~~
 +
 +====== Demo : Lightbox ======
 +===== Overview =====
 +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.
 +
 +===== Running =====
 +
 <HTML> <HTML>
-<div>Lightbox media gallery</div>+<div>Click any of the thumbnail images below to pop up a lightbox.</div>
  
 <div id="links" class="links"> <div id="links" class="links">
-    <a href="/_media/enterprise/demos/diagramjhg.jpegp" title="1" data-gallery=""><img src="/_media/enterprise/demos/diagramjhg.jpeg"></a> +    <a href="/medias/enterprise/demos/diagramjhg.jpegp" title="diagramjhg.jpegp" data-gallery=""><img src="/medias/enterprise/demos/diagramjhg.jpeg"></a> 
-    <a href="/_media/enterprise/demos/flyingcar.obj.zip" title="2" data-gallery=""><img src="/_media/enterprise/demos/flyingcar.jpg"></a> +    <a href="/medias/enterprise/demos/flyingcar.obj.zip" title="flyingcar.obj" data-gallery=""><img src="/medias/enterprise/demos/flyingcar.jpg"></a> 
-    <a href="/_media/enterprise/demos/gosthouse.obj.zip" title="3" data-gallery=""><img src=/_media/enterprise/demos/gosthouse.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="/_media/enterprise/demos/grand-view-park-sf.jpegp" title="4" data-gallery=""><img src="/_media/enterprise/demos/grand-view-park-sf.jpeg"></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="/_media/enterprise/demos/PrimaryIonDrive.glb" title="4" data-gallery=""><img src="/_media/enterprise/demos/PrimaryIonDrive.jpg"></a> +    <a href="/medias/enterprise/demos/primaryiondrive.glb.zip" title="primaryiondrive.glb" data-gallery=""><img src="/medias/enterprise/demos/primaryiondrive.jpg"></a> 
-    <a href="/_media/enterprise/demos/sam009.mp4" title="4" data-gallery=""><img src="/_media/enterprise/demos/sam009.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="/_media/enterprise/demos/the-earth-around.mp4p" title="4" data-gallery=""><img src="/_media/enterprise/demos/the-earth-around.png"></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>   </div>
Line 22: Line 31:
     <ol class="indicators"></ol>     <ol class="indicators"></ol>
 </div> </div>
-<script type="text/javascript" src="/lib/tpl/skydoku/assets/oneplayer/utilhub-tookits-oneplayer-std.js"></script> 
- 
 <script > <script >
-    $(function() { +  function initPage(langx,domx,oneplayer) { 
-      require([ +    var $ = domx.query;
-        "skylark-langx", +
-        "skylark-domx", +
-        "utilhub-tookits-oneplayer" +
-      ],function(langx,domx,oneplayer) { +
-        initPage(langx,domx,oneplayer); +
-       }); +
-    }); +
-     +
-    function initPage(langx,domx,oneplayer) { +
-        var $ = domx.query;+
  
-        require([ +    require([ 
-          "utilhub-toolkits-comctrls-carousels" +      "utilhub-toolkits-comctrls-carousels" 
-        ],function(carousels) { +    ],function(carousels) { 
-          'use strict'+      '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 + '"]');
  
-           $(document).on('click', '[data-gallery]', function (event) { +          domx.eventer.stop(event); 
-              // Get the container id from the data-gallery attribute: + 
-              var id = $(this).data('gallery'), +        var players = []; 
-                  $lightbox = $("#media-lightbox"); +        var playingPlayer; 
-               +        function onSlide(e) { 
-              var callbacks = { +          if (playingPlayer) { 
-                onopen: function () { +            playingPlayer.stop(); 
-                  container.data('gallery', this).trigger('open') +          } 
-                }, + 
-                onopened: function () { +          players[e.toIndex].resize(); 
-                  container.trigger('opened') +        } 
-                }, + 
-                onslide: function () { +        function renderMediaItem(item, callback) { 
-                  container.trigger('slide', arguments) +          item.altText = item.altText || item.title; 
-                }, + 
-                onslideend: function () { + 
-                  container.trigger('slideend', arguments) +          let playerElement = $("<div class=\"u-oneplayer\"/>")[0], 
-                }, +              player = new oneplayer.Player(playerElement,{ 
-                onslidecomplete: function () { +                  picker : false, 
-                  container.trigger('slidecomplete', arguments) +                  autoplay : false, 
-                }, +                  fileOptions :{ 
-                onclose: function () { +                    type : item.type, 
-                  container.trigger('close') +                    url : item.href 
-                }, +                  }, 
-                onclosed: function () { +                  poster : item.poster, 
-                  container.trigger('closed').removeData('gallery')+ 
 +              }); 
 + 
 +          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 %>'\""+  
 +                    "<% } %>"+  
 +                 "/>"
                 }                 }
-              }; +             },
-              // Select all links with the same data-gallery attribute: +
-              var links = $(this) +
-                .closest('[data-gallery-group], body') +
-                .find('[data-gallery="' + id + '"]'); +
-              //if (viewOptions.filter) { +
-              //  links = links.filter(viewOptions.filter); +
-              //}+
  
-              domx.eventer.stop(event);+            start: $('[data-gallery]').index(this), 
 +            onjumped : onSlide 
 +          }, 
 +          callbacks 
 +        );
  
-            var players = []; +        let carsousel = new carousels.Carousel($lightbox[0],carsouselOptions);
-            var playingPlayer; +
-            function onSlide(e) { +
-              if (playingPlayer) { +
-                playingPlayer.stop(); +
-                ///playingPlayer.pause(); +
-              }+
  
-              players[e.toIndex].resize(); +        $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">
  
-            function renderMediaItem(item, callback) { +<style> 
-              item.altText = item.altText || item.title;+#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; 
 +}
  
  
-              let playerElement = $("<div class=\"u-oneplayer\"/>")[0], +.links img { 
-                  player = new oneplayer.Player(playerElement,{ +    width: 300px; 
-                      picker : false, +    height: 200px; 
-                      autoplay : false, +    margin: 30px; 
-                      fileOptions :{ +    cursor: pointer; 
-                        type : item.type, +}
-                        url : item.href +
-                      }, +
-                      poster : item.poster,+
  
-                  });+.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;
  
-              //    player.src({ +  padding: 15px; 
-              //       type: item.type, +  right: 15px; 
-              //        src: item.href  +  cursor: pointer; 
-              //    });+} 
 +</style>
  
 +</HTML>
  
-              player.on("pause",function(){ +===== Code ===== 
-                playingPlayer = null; +<code> 
-              });+<div>Click any of the thumbnail images below to pop up a lightbox.</div>
  
-              player.on("play",function(){ +<div id="links" class="links"> 
-                playingPlayer = player; +    <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;
  
-              players.push(player); +    require([ 
-              return playerElement;+      "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 + '"]');
  
-            var items = links.map(function(index,link){ +          domx.eventer.stop(event);
-               let $img = $(link).find('img'); +
-               return { +
-                "title" : link.title, +
-                "href" : link.href, +
-                "poster" :  $img.attr("src"), +
-                "thumbnail" : $img.attr("src") +
-               }; +
-            });+
  
 +        var players = [];
 +        var playingPlayer;
 +        function onSlide(e) {
 +          if (playingPlayer) {
 +            playingPlayer.stop();
 +          }
  
-              var carsouselOptions = Object.assign( +          players[e.toIndex].resize(); 
-                { +        }
-                   data : { +
-                       items : items +
-                   },+
  
-                   item : { +        function renderMediaItem(item, callback) { 
-                     template : renderMediaItem +          item.altText = item.altText || item.title;
-                   },+
  
-                   indicators : { 
-                      indicator : { 
-                        template : "<li " +  
-                          "<% if (title) { %>" +   
-                            "title = \"<%= title %>\""+  
-                          "<% } %>" +   
-                          "<% if (thumbnail) { %>" +   
-                            " style = \"background: url('<%= thumbnail %>'\""+  
-                          "<% } %>"+  
-                       "/>" 
-                      } 
-                   }, 
  
-                  start: $('[data-gallery]').index(this), +          let playerElement = $("<div class=\"u-oneplayer\"/>")[0], 
-                  onjumped : onSlide +              player = new oneplayer.Player(playerElement,{ 
-                }, +                  picker : false, 
-                callbacks +                  autoplay : false, 
-              );+                  fileOptions :{ 
 +                    type : item.type, 
 +                    url : item.href 
 +                  }, 
 +                  poster : item.poster,
  
-              let carsousel = new carousels.Carousel($lightbox[0],carsouselOptions);+              });
  
-              $lightbox.find(".close").click(function(){ +          player.on("pause",function(){ 
-                  $lightbox.hide(); +            playingPlayer = null;
-              }) +
-              $lightbox.show();+
           });           });
  
 +          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> </script>
  
Line 206: Line 399:
  
 .links img { .links img {
-  width : 120px;+    width: 300px; 
 +    height: 200px; 
 +    margin: 30px; 
 +    cursor: pointer;
 } }
  
Line 226: Line 422:
 } }
 </style> </style>
 +</code>
 +
  
-</HTML>