Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Lightbox

Description

Purpose: The Lightbox modal displays media data such as images or videos. It may also display text that has a purely descriptive nature and does not offer interaction.
Composition: A Lightbox modal consists of one or multiple lightbox pages representing the text or media together with a title. The Lightbox uses a dark scheme if there is one or more image pages and a bright scheme if there are only text pages.
Effect: Lightbox modals are activated by clicking the full view glyphicon, the title of the object, or it's thumbnail. If multiple pages are to be displayed, they can flip through.

Rules

Usage

Lightbox modals MUST contain a title above the presented item.
Lightbox modals SHOULD contain a description text below the presented items.
Multiple items inside a Lightbox modal MUST be presented in carousel like manner allowing to flickr through items.

Example 1: Show different page types

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Modal\Lightbox;
 
function show_different_page_types()
{
    global $DIC;
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $image = $factory->image()->responsive('src/UI/examples/Image/mountains.jpg', 'Nice view on some mountains');
    $page = $factory->modal()->lightboxImagePage(
        $image,
        'Mountains',
        'Image source: https://stocksnap.io, Creative Commons CC0 license'
    );
 
    $page2 = $factory->modal()->lightboxTextPage('Some text content you have to agree on!', 'User Agreement');
 
    $image2 = $factory->image()->responsive('src/UI/examples/Image/sanfrancisco.jpg', 'The golden gate bridge');
    $page3 = $factory->modal()->lightboxImagePage(
        $image2,
        'San Francisco',
        'Image source: https://stocksnap.io, Creative Commons CC0 license'
    );
 
    $page4 = $factory->modal()->lightboxTextPage(
        'Another text content you have to agree on!',
        'Data Privacy Statement'
    );
 
    $image3 = $factory->image()->responsive('src/UI/examples/Image/ski.jpg', 'Skiing');
    $page5 = $factory->modal()->lightboxImagePage(
        $image3,
        'Ski Fun',
        'Image source: https://stocksnap.io, Creative Commons CC0 license'
    );
 
    $modal = $factory->modal()->lightbox([$page, $page2, $page3, $page4, $page5]);
    $button = $factory->button()->standard('Show some fancy images and texts', '')
        ->withOnClick($modal->getShowSignal());
 
    return $renderer->render([$button, $modal]);
}

Relations

Parents

UIComponent
Modal