project_theme_lightbox

Installation / Integration

  1. First install the extension and activate it in the Extension-Manager.
  2. Import the `lightboxManagerinto your JavaScript files and call theLightboxManager.init()` function.
  3. Add the `_lightbox.scss` file to your stylesheet.

Now every element's link with the given css class (default: `.default-lightbox`) in the `init()` function will open in a lightbox.

JavaScript integration example

Import the lightbox.js module in your theme. The settings for the glightbox can be seen here.

import LightboxManager from 'lightboxManager';

// Uses default settings and handles galleries
LightboxManager.init();
// Will handle external videos depending on the cookie consent
LightboxManager.init({type: 'video', glightbox: {selector: '.sg-youtube-item'}});
// Handles modals
LightboxManager.init({type: 'modal', glightbox: {closeOnOutsideClick: false}});
// Creates a lightbox for each .sg-teaser-item
document.querySelectorAll('.sg-teaser-item').forEach((item) => {
    // Content from another page on the same website without headers, css or js files.
    const sgTeaser = LightboxManager.init({type: 'external', item});
    // Bind an event to the lightbox when it opens (optional)
    sgTeaser.lightbox.on('open', () => PageManager.reInitialize('.ginlined-content'));
});

HTML Integration example

Examples for the html integration can be found here.

LightboxManager

The purpose of the LightboxManager is to handle all the required settings for the specific type of the lightbox. The LightboxManager takes an object of settings as a parameter which contains the following:

PropertyDefaultParametersDescription
type`'default' |'external'`, `'modal'`.`'video'`,`'default'`These are the types that can be used.
item`undefined | HTMLElement | The item which is used as a trigger for the external content. (required if the type is'external'`
pageType`104 |103= without header,104` = with headerThe page type of the external content.
glightbox`{selector: '.default-lightbox'}`Glightbox SettingsThe settings for the glightbox

The `type` property is for enabling custom behavior and loading the ideal preset settings. You can leave out all properties, and the LightboxManager will set the appropriate settings by default.

Information about GLightbox

  • GLightbox will automatically create lightboxes with the given selector in the settings.
  • The type of the lightbox is automatically set depending on the URI
  • Every lightbox on the page with the same selector will be grouped into the same slide.
  • To split up the slides you have to create a new GLightbox class (preferable with LightboxManager).