Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Nerdies24/764e39fae65a1dfc05b34f096a0e5ee0 to your computer and use it in GitHub Desktop.
Save Nerdies24/764e39fae65a1dfc05b34f096a0e5ee0 to your computer and use it in GitHub Desktop.
Lity Video Lightbox in GeneratePress Child

Image

Step 1

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

Image

Step 2

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

Image

  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

Image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment