Lity Video Lightbox in GeneratePress Child

Lity Video Lightbox in GeneratePress Child.md

Step 1

Downloade Lity von https://sorgalla.com/lity

Step 2

Entpacken Sie die gedownloadete Datei und rufen Sie den dist Ordner auf. Sie benötigen nur die beiden lity.min Dateien.

1. lity.min (CSS - 4kb)
2. lity.min (JavaScript - 7kb)

Step 3

Legen Sie 2 Ordner (css und js) in Ihrem Child Theme an und kopieren Sie

1. lity.min (CSS - 4kb) in den css Ordner
2. lity.min (JavaScript - 7kb) in den js Ordner

Step 4

In der functions.php Ihres ChildThemes fügen Sie folgenden Code ein:

function call_lity_scripts() {
wp_enqueue_style( 'lity-css', get_stylesheet_directory_uri() . '/css/lity.min.css' );
wp_enqueue_script( 'lity-js', get_stylesheet_directory_uri() . '/js/lity.min.js', array( 'jquery' ), NULL, true );
}
add_action('wp_enqueue_scripts', 'call_lity_scripts');

Step 5

A.) Installieren Sie Generateblocks und Generateblocks Pro - https://generateblocks.com/pro

B.) Oder installieren Sie https://wordpress.org/plugins/block-data-attribute

Video Thumbnail

Mit GenerateBlocks

1. Container hinzufügen
2. Grid hinzufügen
3. Bild hinzufügen
   
4. Bild Link auf # setzen
5. Container markieren
6. Custom Attributes auswählen
7. Unter data attribute: data-lity data-lity-target einfügen
   
8. Unter value: Einen Video Link einfügen z.B. https://vimeo.com/494022693
   

Beim Klick auf das Video Thumbnail Bild öffnet sich das Vimeo Video

Button

Mit GenerateBlocks

1. Button hinzufügen
2. Button Link "//vimeo.com/494022693"
3. Custom Attributes auswählen
4. Unter data attribute: data-lity einfügen
   
5. Unter value: leer lassen
   

Beim Klick auf den Button öffnet sich das Vimeo Video

Text Link

Mit GenerateBlocks

1. Text hinzufügen
2. Als HTML öffnen
3. <a href="//vimeo.com/494022693" data-lity>Text Link</a>

Beim Klick auf den Text Link öffnet sich das Vimeo Video

Lightbox Background ändern

.lity {
	background-color: red;
}

Lightbox X - Schliessen Button Farbe ändern

.lity-close {
	color: red;
}

Lightbox X - Schliessen Button Hover Farbe ändern

.lity-close:hover {
	color: green;
}

Dieser Gist gehört zur Facebook Gruppe: https://www.facebook.com/groups/deinwordpressprojekt