REMIND - LIGHTBOX
Does whatever a lightbox does.
Table of contents
Authors
- REMIND GmbH - technik@remind.de
- Michael Didion - m.didion@remind.de
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>