REMIND - LIGHTBOX

Does whatever a lightbox does.

Table of contents

• Authors
• Installation
• Usage

Authors

• REMIND GmbH - [email protected]
• Michael Didion - [email protected]

Installation

Zum Einbinden des TypeScript Moduls muss folgende Abhängigkeit in den Dependencies einer package.json eingetragen werden.

npm i @remindgmbh/typescript-lightbox

Usage

Lightbox

import { Lightbox } from '@remindgmbh/typescript-lightbox'

let lightbox: Lightbox = new Lightbox('<div>Ein Html string</div>');
// Attach html to dochument body
lightbox.attach();
// Change source
lightbox.setSource('<div>Ein anderer HTML string</div>');
// Detach html from dochument body
lightbox.detach();

Output

<div class="remind-lightbox">
	<div class="remind-lightbox__header">
		<div class="remind-lightbox__close-button"></div>
	</div>

	<div class="remind-lightbox__canvas">
		<div class="remind-lightbox__content">
			<!--html string-->
			<div>Ein anderer Html string</div>
		</div>
	</div>

	<div class="remind-lightbox__footer"></div>
</div>

Parameters

| Parameter | Type | Default | Description | | ------------- | ------- | --------------------------------- | ------------------------------------------------------------- | | html | string | '' | Ein Html String der ausgeben wird | | options | object | {classes: {...}, functions: {...}}| Zum Überschreiben von CSS-Classes und Funktion für die Ausgabe|

Functions

| Parameter | Type | | ------------ | ------------------------------------------------------ | | createCanvas | (className: string) => HtmlElement | | createFooter | (className: string) => HtmlElement | | createHeader | (className: string) => HtmlElement | | createCloseButton | (className: string) => HtmlElement | | createContent | (htmlString: string, className: string) => HtmlElement |

CSS Classes

| Parameter|Default| | ----------- | ----------------------------- | | lightbox | remind-lightbox | | canvas | remind-lightbox__canvas | | header | remind-lightbox__header | | footer | remind-lightbox__footer | | content | remind-lightbox__content | | closeButton | remind-lightbox__close-button |

Example

import { Lightbox } from '@remindgmbh/typescript-lightbox'

let lightbox: Lightbox = new Lightbox(
	'<div>Ein Html string</div>',
	{
		classes: {
			footer: 'custom-content-class'
		},
		functions: {
			createContent: (htmlString, className) => {
				let html = document.createElement('span');
				html.classList.add(className);
				html.innerHtml = htmlString;
				return html;
			}
		}
	}
);
// Create html
lightbox.create();
// Attach html to dochument body
lightbox.attach();
// Detach html from dochument body
lightbox.detach();

Output

<div class="remind-lightbox">
	<div class="remind-lightbox__header">
		<div class="remind-lightbox__close-button"></div>
	</div>

	<div class="remind-lightbox__canvas">
		<span class="custom-content-class">
			<!--html string-->
			<div>Ein Html string</div>
		</div>
	</div>

	<div class="remind-lightbox__footer"></div>
</div>

LightboxImage

Parameters

| Parameter | Type | Default | Description | | ------------- | ------- | --------------------------------- | ------------------------------------------------------------- | | item | LightboxItem | {image: '', headline: '', text: ''} | Pfad zur Bild Datei, Überschrift und Text zum Bild | | options | object | {classes: {...}, functions: {...}}| Zum Überschreiben von CSS-Classes und Funktion für die Ausgabe|

Functions

| Parameter | Type | | ------------ | ------------------------------------------------------------------------------------------------------------------- | | ... | ... | | createImage | createImage: (item: LightboxItem, classNameOuter: string, classNameImage: string, classNameHeadline: string, classNameText: string) => HTMLElement |

LightboxGallery

Additional Public Methods

| Method | Description | | ---------------------------------- | -------------------------------------------------------- | | next(): void | Setze das nächste Bild in den sources als aktives Bild | | prev(): void | Setze das vorherige Bild in den sources als aktives Bild | | setItems(items: LightboxItem[]): void | Setze neue Items | | setItem(item: LightboxItem): void | Setze ausgwähltes Item |

Parameters

| Parameter | Type | Default | Description | | ------------- | ------- | --------------------------------- | ------------------------------------------------------------- | | item | LightboxItem | {image: '', headline: '', text: ''} | Pfad zur Bild Datei, Überschrift und Text zum Bild | | items | LightboxItem[] | [] | | | options | object | {showThumbnails: false, showPagination: false, classes: {...}, functions: {...}}| Erweitert um die Optionen zur Anzeige der Thumbnails und der Pagination |

Functions

| Parameter | Type | | ------------ | ------------------------------------------------------------------------------------------------------------------- | | ... | ... | | createThumbnails | (className: string) => HtmlElement | | createThumbnail | (source: string, className: string) => HTMLElement | | createPagination | (index: number, maxIndex: number, className: string, classNameCurrent: string, classNameMax: string) => HTMLElement | | createNext | (className: string) => HtmlElement | | createPrev | (className: string) => HtmlElement |

CSS Classes

| Parameter | Default | | ----------------- | ----------------------------- | | thumbnails | remind-lightbox__thumbnails | | thumbnail | remind-lightbox__thumbnail | | pagination | remind-lightbox__pagination | | paginationCurrent | remind-lightbox__current | | paginationMax | remind-lightbox__max | | next | remind-lightbox__next | | prev | remind-lightbox__prev |

Example

<div class="remind-lightbox">
	<div class="remind-lightbox__header">
		<div class="remind-lightbox__counter">
			<span class="remind-lightbox__current">###index###</span>
			<span class="remind-lightbox__max">###maxIndex###</span>
		</div>
		<div class="remind-lightbox__close-button"></div>
	</div>
	<div class="remind-lightbox__canvas">
        <div class="remind-lightbox__prev"/>
        <div class="remind-lightbox__content">
	    <img class="remind-lightbox__image"	src="###item.image###"/>
            <h2 class="remind-lightbox__headline">###item.headline###</h2>
            <span class="remind-lightbox__text">###item.text###</span>
        </div>
        <div class="remind-lightbox__prev"/>
	</div>
	<div class="remind-lightbox__footer">
		<div class="remind-lightbox__thumbnails">
			<img class="remind-lightbox__thumbnail" src="###item.image###" data="###item###">
			<img class="remind-lightbox__thumbnail" src="###item.image###" data="###item###">
			<img class="remind-lightbox__thumbnail" src="###item.image###" data="###item###">
			<img class="remind-lightbox__thumbnail" src="###item.image###" data="###item###">
			...
		</div>
	</div>
</div>