Jekyll One

J1 Theme support lightboxes out of the box. A lightbox is a helper module that displays enlarged, almost screen-filling versions of images and videos while dimming the rest of the web page. The technique used by Lightbox gained widespread popularity due to its simple and elegant style.

The term Lightbox refers to the Lightbox V2 Javascript library written by Lokesh Dhakar. The library is fully integrated to be used as a standalone module or as a helper under the hood by other modules focusing on image data like galleries, sliders, or carousels.

Lightbox V2

The current major version for Lightbox used by J1Template is version 2.9.0 for jQuery. Lightbox is fully integrated with the template system. The module is enabled by default and automatically loaded and initialized. Lightbox is controlled by it’s configuration (file) j1_lightbox.yml, located under _data/modules.

J1 Integration

The configuration file of the Lightbox module is called j1_lightbox.yml. It includes the default values used for the initialization.

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

Module sources

The sources for J1 Lightbox are stored within the asset path of J1Template. You’ll find all necessary data files under /assets/themes/j1/lightbox2:

Structure of the J1 Lightbox application tree (base components)
├── css
│   ├── lightbox.css
│   └── lightbox.min.css
├── images
│   ├── close.png
│   ├── loading.gif
│   ├── next.png
│   └── prev.png
└── js
    ├── lightbox.js
    ├── lightbox.min.js
    ├── lightbox.min.map
    ├── lightbox-plus-jquery.js
    ├── lightbox-plus-jquery.min.js
    └── lightbox-plus-jquery.min.map

Configuration

The configuration file of the module is called j1_lightbox.yml. It includes the default values used for the initialization.

The default values used for the initialization are taken from the module.
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

Lightbox V2 examples

Lightbox can be used as a standalone module to enlarge images (thumbnails) or as a helper used by other modules under-the-hood to provide Lightbox functionality, too.

The Owl Carousel module can be enabled to use Lightbox as a helper to enlarge images of a slideshow.

Standalone

Lightbox used as a standalone module helps to display single images or groups of pictures in enlarged sizes. This might be helpful for e.g. manual pages using images in a reduced resolution (shown as thumb nails for example) but should be displayed fullsize to see all the details in a better quality.

The following example shows an image in reduced size that describes the Content inheritance of Jekyll as a thumb nail image. To see what Lightbox is doing, click on the thumb nail image to enlage this picture.

Lightbox block for standalone images
Lightbox block for standalone images

Find some other examples of using Lightbox standalone. See how single (individual) images are linked for the use with Lightbox or groups of pictures managed as a sets.

Individual images

For single (individual) images, the value for the data attribute data-lightbox is set unique each picture. Click on the images below to see how Lightbox manages the data.

A Lightbox block for individual images
A Lightbox block for individual images A Lightbox block for individual images

The following HTML code is used to link the images for Lightbox from the example above.

Code example
<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>

Image sets

For a group of images (image sets), the value for the data attribute data-lightbox is set unique to the group. Click on the images below to see how Lightbox manages the data.

Lightbox block for grouped images
Lightbox block for grouped images Lightbox block for grouped images

The following HTML code is used to link the images for Lightbox from the example above.

Code example
<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>

Lightbox V2 and Carousels

The Owl Carousel is a good example how Lightbox is integrated with a slider respectively a carousel module that J1Template is using. The following example enables Lighbox and group all images into a set.

J1Template is using Lightbox for all image related modules to enlarge images managed by these modules as well. If Lightbox should be enabled for a module, set the option lighbox to enabled (disabled by default).

The carousel provides a very compact way to display a set of images as thumb nails but no need to create additional images for the lower resolution. The slider adds a navigation system for powerful selection and Lightbox add the functionality to display the images full size.

Code example
<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>

LightGallery

Lightgallery is a fast, modular and responsive jQuery Plugin to create simple but beautiful looking, featured image and video galleries supported by a powerful lightbox.

  • Fully responsive, HTML iframe support

  • Modular architecture with built-in plugins

  • Multiple instances per page

  • Smart image preloading and Font icon support

  • Touch support for Mobile Devices

  • Keyboard navigation and Mouse drag support for Desktops

  • Double-click|Double-tap support for fullsize view

  • Support for Youtube, Vimeo, Dailymotion, VK and HTML5 video

  • 20+ Hardware-Accelerated CSS3 transitions

  • Animated thumbnails, Full screen and Image Zoom support for the Lightbox

  • Easy customizable via CSS, SCSS and Module Settings

J1 Integration

J1 Theme has fully integrated Owl Carousel V1. For the typical usage of a slide show with your content no manual configuration, no carousel initialization and no HTML code is needed. J1 Owl Carousel instances are created automatically based on a single configuration step with the Owl Carousel YAML file j1_carousel_mgr.yml.

Module sources

The sources for J1 OWL Carousel are stored within the asset path of J1Template. You’ll find all necessary data files under /assets/themes/j1/owl_carousel_v1:

Structure of the J1 OWL Carousel application tree (base components)
  ├───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.png
  │       owl.video.play.png
  └───js
          owl.carousel.js
          owl.carousel.min.js

Configuration

Initialization

Customization

Plugin API

Here is the basic structure of the lightgallery module.

(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);

Sass variables

Name value Description

$backdrop-opacity

1

Gallery backdrop opacity

$lg-toolbar-bg

rgba(0, 0, 0, 0.45)

Toolbar background color

$lg-border-radius-base

2px

Base border radius for the gallery elements

$lg-theme-highlight

rgb(169, 7, 7)

Gallery highlight areas like progressbar active bg, thumbnails border..

$lg-icon-bg

rgba(0, 0, 0, 0.45)

Gallery icons background color

$lg-icon-color

#999

Gallery icons color

$lg-counter-color

#e6e6e6

Gallery counter color

$lg-counter-font-size

16px

Gallery counter font size

$lg-next-prev-bg

$lg-icon-bg

Next prev controls background color

$lg-next-prev-color

$lg-icon-color

Next prev controls icon color

$lg-next-prev-hover-color

$lg-icon-hover-color

Next prev controls icon color on hover

$lg-progress-bar-bg

#333

Progress bar background color

$lg-progress-bar-active-bg

$lg-theme-highlight

Progress bar highlight color

$lg-progress-bar-height

5px

Height of the progress bar

$zoom-transition-duration

0.3s

Image zoom animation duration..

$lg-sub-html-bg

rgba(0, 0, 0, 0.45)

Sub html container background color

$lg-sub-html-color

#EEE

Sub html color

$lg-thumb-toggle-bg

#0D0A0A

Thumbnail icon toggle icon background color

$lg-thumb-toggle-color

$lg-icon-color

Thumbnail icon toggle icon color

$lg-thumb-toggle-hover-color

$lg-icon-hover-color

Thumbnail icon toggle icon color on hover

$lg-thumb-bg

#0D0A0A

Thumbnail container background color

$zindex-outer

1050

Gallery outer div z-index

$zindex-progressbar

1080

Gallery autoplay progress bar z-index

$zindex-controls

1080

Gallery controls z-index

$zindex-toolbar

1080

Gallery toolbar z-index

$zindex-subhtml

1080

Gallery sub html container z-index

$zindex-thumbnail

1080

Gallery thumbnail container z-index

$zindex-pager

1080

Gallery pager z-index

$zindex-playbutton

1080

Video play button z-index

$zindex-item

1060

Gallery slide item z-index

$zindex-backdrop

1040

Gallery backdrop z-index

LightGallery examples

Find with the following demos, how J1 Theme implements Lightgallery for fully responsive usage. The template is based on Bootstrap and use the grid system to create tiling thumbnails automatically. No need for additional thumbnail images to create!

LightGallery on Images

The galley Old times is using 2 images per row by using the grid class col-xs-6. The view port is set to extra small, the number of columns to 6 per image (12 columns per row) with 2px gutter (spacing set to a value of 2).

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

LightGallery on Videos

Lightgallery supports YouTube, Vimeo, VK and all other types of HTML5 video formats. Such as MP4, WebM, Ogg, etc.

To display YouTube, Vimeo or VK video, you can paste the video URL, or share URL, which is provided by YouTube / vimeo in the data-src attribute. The same way you display images in the gallery. Lightgallery will check the data-src attribute and if it is YouTube or vimeo video URL, it will create the video slide.

You can even provide poster image for each videos. Poster images will be loaded instead of videos. So user will be able to navigate to other slides by using mouse drag or swipe. Poster images improve performance, and maintain the flexibility of your gallery without effecting user experience. Videos will be loaded when a user clicks on the poster images. You can place poster image url in the data-poster attribute.

Lightgallery allows you to load thumbnail images automatically from YouTube, Vimeo or VK. You can specify the size of the thumbnails in the settings. Videos will be automatically paused when a user starts to navigate to another slide. So user never have to worry about it. Lightgallery takes care of everything!

Html5 Video

To display html5 video create your video content using html5 video tag inside a hidden div. Then just add id or class name of the object(hidden div) which contains your html, inside the data-html attribute. data-src should not be provided when you use html5 videos . You can even provide video html directly inside data-html attribute.

Lightgallery will automatically check your content, and if it is id or class name of your hidden div content will be fetched from the div, and will be displayed as video. Otherwise direct content will be used for displaying the videos.

Plugin dependency

Lightgallery require the video plugin to be included in your document. Include Videojs CSS and Javascript files:

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

HTML markup

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

Examples

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

MP4 Videos - VideoJS Player

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Online Video

Lightgallery supports YouTube, Vimeo, VK and all other types of HTML5 video formats. Such as MP4, WebM, Ogg, etc. To display YouTube, Vimeo or VK video, you can paste the video URL, or share URL, which is provided by YouTube|vimeo in the data-src attribute. The same way you display images in the gallery.

Lightgallery will check the data-src attribute and if it is YouTube or vimeo video URL, it will create the video slide. You can even provide poster image for each videos. Poster images will be loaded instead of videos. So user will be able to navigate to other slides by using mouse drag or swipe. Poster images improve performance, and maintain the flexibility of your gallery without effecting user experience.

Videos will be loaded when a user clicks on the poster images. You can place poster image url in the data-poster attribute. Lightgallery allows you to load thumbnail images automatically from YouTube, Vimeo or VK. You can specify the size of the thumbnails in the settings.

Videos will be automatically paused when a user starts to navigate to another slide, so the users never have to worry about it.

Plugin dependency

Lightgallery require the video plugin to be included in your document.

API dependency

Lightgallery require vimeo player api to be included in your document for pausing the vimeo video.

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

HTML markup

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

Example

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

The Voice Kids, Germany 2021