├── css
│   ├── lightbox.css
│   └── lightbox.min.css
├── images
│   ├── close.jpg
│   ├── loading.gif
│   ├── next.jpg
│   └── prev.jpg
└── js
    ├── lightbox.js
    ├── lightbox.min.js
    ├── lightbox.min.map
    ├── lightbox-plus-jquery.js
    ├── lightbox-plus-jquery.min.js
    └── lightbox-plus-jquery.min.map

enabled:                      true
alwaysShowNavOnTouchDevices:  false
albumLabel:                   Image %1 of %2
disableScrolling:             false
fadeDuration:                 600
fitImagesInViewport:          true
imageFadeDuration:            600
maxWidth:
maxHeight:
positionFromTop:              50
resizeDuration:               700
showImageNumberLabel:         true
wrapAround:                   true

<div class="imageblock mb-4">
  <a href="{imagesdir}/image-1.jpg"
     data-lightbox="example-1"
     data-title="Optional caption #1.">
     <img src="{imagesdir}/thumb-1.jpg"
     alt="Girl looking out people on beach">
  </a>
  <a href="{imagesdir}/image-2.jpg"
     data-lightbox="example-2"
     data-title="Optional caption #2.">
     <img src="{imagesdir}/thumb-2.jpg"
     alt="Two men in bicycle jerseys sitting outside at table having coffee">
  </a>
</div>

<div class="imageblock mb-4">
  <a href="{imagesdir}/image-3.jpg"
     data-lightbox="example-set"
     data-title="Click the right half of the image to move forward.">
     <img src="{imagesdir}/thumb-3.jpg"
          alt="Golden Gate Bridge with San Francisco in distance">
  </a>
  <a href="{imagesdir}/image-4.jpg"
     data-lightbox="example-set"
     data-title="Or press the right arrow on your keyboard.">
     <img class="example-image" src="{imagesdir}/thumb-4.jpg"
          alt="Forest with mountains behind">
  </a>
  <a href="{imagesdir}/image-5.jpg"
     data-lightbox="example-set"
     data-title="The next image in the set is preloaded as you&apos;re viewing.">
     <img class="example-image" src="{imagesdir}/thumb-5.jpg"
      alt="Bicyclist looking out over hill at ocean">
  </a>
</div>

<ul id="owl-demo-lightbox" class="owl-carousel list-unstyled">
  <li class="item">
    <a href="/path/to/images/image_1"
       data-lightbox="owl-demo-lightbox">
      <img class="lazyOwl" data-src="/path/to/images/image_1">
    </a>
  </li>
  ...
  ...
  <li class="item">
    <a href="/path/to/images/image_n"
       data-lightbox="owl-demo-lightbox">
      <img class="lazyOwl" data-src="/path/to/images/image_n">
    </a>
  </li>
</ul>
<script type="text/javascript">
  $(document).ready(function() {
    $("#owl-demo-lightbox").owlCarousel({
      items:      2,
      lazyLoad:   true,
      navigation: true,
    });
  });
</script>

  ├───css
  │   │   owl.carousel.css
  │   │   owl.carousel.min.css
  │   │   owl.transitions.css
  │   │   owl.transitions.min.css
  │   │
  │   └───themes
  │           j1_template.css
  │           j1_samples.css
  ├───images
  │       ajax-loader.gif
  │       grabbing.jpg
  │       owl.video.play.jpg
  └───js
          owl.carousel.js
          owl.carousel.min.js

(function($, window, document, undefined) {
    'use strict';
    var defaults = {
        fullScreen: true
    };
    var Fullscreen = function(element) {
        // You can access all lightgallery variables and functions like this.
        this.core = $(element).data('lightGallery');
        this.$el = $(element);
        this.core.s = $.extend({}, defaults, this.core.s)
        this.init();
        return this;
    }
    Fullscreen.prototype.init = function() {
    };
    /**
    * Destroy function must be defined.
    * lightgallery will automatically call your module destroy function
    * before destroying the gallery
    */
    Fullscreen.prototype.destroy = function() {
    }
    // Attach your module with lightgallery
    $.fn.lightGallery.modules.fullscreen = Fullscreen;
})(jQuery, window, document);

gallery::jg_old_times[ role="mb-4 wm-800" ]

<link href="http://vjs.zencdn.net/4.12.15/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12.15/video.js"></script>

<div style="display:none;" id="video_1">
  <video class="lg-video-object lg-html5" controls="none" preload="none">
    <source src="/path/to/video_1" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>
...
<div style="display:none;" id="video_n">
  <video class="lg-video-object lg-html5" controls="none" preload="none">
    <source src="/path/to/video_n" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>
<div class="j1-lg-galleryblock">
  <div class="title">Video gallery title</div>
  <ul id="j1-lg-video-html5-ul" class="row j1-lg-gutter list-unstyled">
    <li class="col-xs-6 col-sm-4 col-md-3 video"
        data-html="#video_1"
        data-poster="/path/to/video_1-poster"
        data-sub-html="Caption text for video_1" data-html="#video1">
      <a class="thumbnail" href="#">
        <img class="img-responsive" src="/path/tp/video-thumbnail_1.jpg">
      </a>
    </li>
    ...
    <li class="col-xs-6 col-sm-4 col-md-3 video"
        data-html="#video_n"
        data-poster="/path/to/video_n-poster"
        data-sub-html="Caption text for video_n">
      <a class="thumbnail" href="#">
        <img class="img-responsive" src="/path/tp/video-thumbnail_n.jpg">
      </a>
    </li>
  </ul>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $('#j1-lg-video-html5-ul').lightGallery({ videojs: true });
  });
</script>

<div class="j1-lg-galleryblock">
  <div class="title">Video gallery title</div>
  <ul id="j1-lg-video-online-ul" class="row j1-lg-gutter list-unstyled">
    <li class="col-xs-6 col-sm-4 col-md-3 video"
        data-src="/url/of/video_1"
        data-poster="/path/to/video_1-poster"
        data-sub-html="Caption text for video_1" data-html="#video1">
      <a class="thumbnail" href="#">
        <img class="img-responsive" src="/path/tp/video-thumbnail_1.jpg">
      </a>
    </li>
    ...
    <li class="col-xs-6 col-sm-4 col-md-3 video"
        data-src="/url/of/video_n"
        data-poster="/path/to/video_n-poster"
        data-sub-html="Caption text for video_n">
      <a class="thumbnail" href="#">
        <img class="img-responsive" src="/path/tp/video-thumbnail_n.jpg">
      </a>
    </li>
  </ul>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $('#j1-lg-video-online-ul').lightGallery();
  });
</script>