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>