lightgallery.jsをWordPressのブロックで使うための設定

wordpressの画像、ギャラリーをZoomする機能を、lightgallery.jsを使って設定した。

僕はよく、PCのキャプチャー画像を使うので、スマホで見るときにZoomしてみやすくするために使っている。

元々は、メディア系の案件で使ったのがきっかけ。

lightGalleryとは

lightBox系のJavascriptライブラリ。色々な画像Zoom系のライブラリを探していたけど、このライブラリのサムネイルギャラリが気に入って使うことにした。

↓こんな感じ

いろんなプラグインが用意されていて、プラグインで機能を拡張するライブラリ、↑はZoomとサムネイルのプラグインを使用している。

ソース

必要なjsをインストール。picturefillは、IE用。今回はjQueryを使ったので、jqueryをインストール。

jQueryには依存しない。

※ lightGalleryはjQueryには必要ない。今回は、さっと実装するためjQueryを使ってる。

$ yarn add jquery
$ yarn add picturefill
$ yarn add lightgallery

そのまま使うとヘッダーや、ドロワーメニューの下になるので、z-indexを調整

.lg-backdrop{
  z-index: 999998;
}

.lg-outer{
  z-index: 999999;
}

「ギャラリー」、「画像」、「メディアとテキスト」、Snow Monkey Blocks「パネル」、Snow Monkey Blocks「メディアと文章」ブロックに対応してみた。

webpackを使用しているので、scssのインポートを使っている。

import $ from "jquery";
import "picturefill";
import lightGallery from "lightgallery";

// Plugins
import lgThumbnail from "lightgallery/plugins/thumbnail";
import lgZoom from "lightgallery/plugins/zoom";

// import styles
import "lightgallery/scss/lightgallery.scss";
import "lightgallery/scss/lg-zoom.scss";
import "lightgallery/scss/lg-thumbnail.scss";
import "../../css/component/_lightgallery.scss";

// lightgallery.jsのライセンスキー
const LIGHT_GALLERY_LICENSE_KEY = process.env.LIGHT_GALLERY_LICENSE_KEY;

const lightgallery = () => {
  $(function () {
    // 「ギャラリー」 ブロック
    $(".wp-block-gallery").each((index, el) => {
      const galleryContainer = el;
      $(el)
        .find("figure > img")
        .each((index, el) => {
          // 例: https://https://webkei.dev/wp-content/uploads/2021/05/210423_mate11-e1619177025530.jpeg
          const fullSizeImageUrl = $(el).attr("data-full-url");
          $(el).parent().attr("data-src", fullSizeImageUrl);
        });
      const lightGalleryConfig = {
        speed: 500,
        plugins: [lgThumbnail, lgZoom],
        selector: "figure",
        download: false,
      };
      if (LIGHT_GALLERY_LICENSE_KEY) {
        lightGalleryConfig.licenseKey = LIGHT_GALLERY_LICENSE_KEY;
      }
      lightGallery(galleryContainer, lightGalleryConfig);
    });

    // Snow Monkey Blocks「パネル」ブロック
    $(".wp-block-snow-monkey-blocks-panels").each((index, el) => {
      const galleryContainer = el;
      let hasLink = false;
      $(el)
        .find(".smb-panels__item img")
        .each((index, el) => {
          if ($(el).parent("a").length !== 0) {
            // aタグがあった場合は、galleryを適用しない
            hasLink = true;
          }

          // 例: https://webkei.dev/wp-content/uploads/2021/05/176057556_487662355762660_652648-1024x768.jpeg"
          const fullSizeImageUrl = $(el)
            .attr("src")
            .replace(/(.*)(-[0-9]*x[0-9]*)(\..*$)/, "$1" + "$3");
          $(el).parent().attr("data-src", fullSizeImageUrl);
          $(el).parent().attr("data-light-gallery", fullSizeImageUrl);
        });

      if (hasLink) {
        return;
      }

      const lightGalleryConfig = {
        speed: 500,
        plugins: [lgThumbnail, lgZoom],
        selector: "[data-light-gallery]",
        download: false,
      };
      if (LIGHT_GALLERY_LICENSE_KEY) {
        lightGalleryConfig.licenseKey = LIGHT_GALLERY_LICENSE_KEY;
      }
      lightGallery(galleryContainer, lightGalleryConfig);
    });

    // 「画像」「メディアとテキスト」、Snow Monkey Blocks「メディアと文章」ブロック
    $(
      ".wp-block-image,.smb-media-text__figure,.wp-block-media-text__media"
    ).each((index, el) => {
      const galleryContainer = el;
      if (
        $(galleryContainer).parents(".wp-block-snow-monkey-blocks-panels")
          .length !== 0
      ) {
        // Snow Monkey Blocks「パネル」ブロックの中の画像は何もしない
        return false;
      }
      if ($(el).find("a").length !== 0) {
        // aタグがあった場合は、galleryを適用しない
        return;
      }
      $(el)
        .find("img")
        .each((index, el) => {
          // 例: https://webkei.dev/wp-content/uploads/2021/05/176057556_487662355762660_652648-1024x768.jpeg"
          const fullSizeImageUrl = $(el)
            .attr("src")
            .replace(/(.*)(-[0-9]*x[0-9]*)(\..*$)/, "$1" + "$3");
          $(el).parent().attr("data-src", fullSizeImageUrl);
        });
      const lightGalleryConfig = {
        speed: 500,
        plugins: [lgZoom],
        download: false,
        selector: "img",
      };
      if (LIGHT_GALLERY_LICENSE_KEY) {
        lightGalleryConfig.licenseKey = LIGHT_GALLERY_LICENSE_KEY;
      }
      lightGallery(galleryContainer, lightGalleryConfig);
    });
  });
};

export default lightgallery;

lightGalleryの実行。

import lightgallery from "./component/lightgallery";
lightgallery();

投稿記事のみ読み込むように設定。

このサイトは、WordpressでSnow Monkeyテーマを使っているでの、my-snow-monkeyプラグインで挿入。

<?php

use Framework\Helper;


/**
 * galleryのCSSを読み込む
 */
add_action(
    'wp_enqueue_scripts',
    function() {
        if( !is_single() ) {
            // 投稿ページのみ読み込む
            return;
        }
        wp_enqueue_style(
            'my-snow-monkey-gallery',
            MY_SNOW_MONKEY_URL. '/assets/gallery.css',
            [ Framework\Helper::get_main_style_handle() ],
            filemtime( MY_SNOW_MONKEY_PATH . '/assets/gallery.css' )
        );
    }
);

/**
 * galleryのJSを読み込む
 */
add_action(
    'wp_enqueue_scripts',
    function() {
        if( !is_single() ) {
            // 投稿ページのみ読み込む
            return;
        }
        wp_enqueue_script(
            'my-snow-monkey-gallery',
            MY_SNOW_MONKEY_URL. '/assets/gallery.js',
            [],
            filemtime( MY_SNOW_MONKEY_PATH . '/assets/gallery.js' ),
            true
        );
    }
);

ライセンス

lightGalleryは、有料のライブラリ。ビジネス用途、商用利用などは有料。

ライセンス

v1の時は、1つのライセンスで複数サイトに設置できたが、v2になって1ライセンス1ドメインになった。

購入はこちらから↓。

ライセンスキーを入れないと、下記のようなワーニングがでデベロッパーコンソールに表示される。

lightGallery: 0000-0000-000-0000 license key is not valid for production use

サンプルコードでは、.envに、購入したライセンスキーを書くと反映されるようになる。
webpackの設定必須。

LIGHT_GALLERY_LICENSE_KEY=123-1234-123-1234

webpackを使わない場合は、直接書き込む。

// lightgallery.jsのライセンスキー
const LIGHT_GALLERY_LICENSE_KEY = "123-1234-123-1234";

webpackを使わない場合で、ライセンスキーを入れない場合は、falseとかを設定しておく。

// lightgallery.jsのライセンスキー
const LIGHT_GALLERY_LICENSE_KEY = false;

サンプル

色々、画像を配置してテストしてみた。

「画像」ブロック

画像をクリックすると、Zoomモーダルが起動する。

「画像」ブロック(画像リンク付き)

画像にリンクがある場合は、Zoomモーダルを起動しない。

「ギャラリー」ブロック

画像をクリックすると、サムネイル機能付きのZoomモーダルが起動する

「メディアとテキスト」ブロック

画像をクリックすると、Zoomモーダルが起動する。

山の画像

これは、山の画像です。

Snow Monkey Blocks「メディアと文章」ブロック

画像をクリックすると、Zoomモーダルが起動する。

ウエディングの画像

ウエディングの画像です。

Snow Monkey Blocks「パネル」項目(垂直レイアウト)

画像をクリックすると、サムネイル機能付きのZoomモーダルが起動する

ケーキ
ケーキ
iPhone
MacBook Air

Snow Monkey Blocks「パネル」項目(自由入力)

画像をクリックすると、サムネイル機能付きのZoomモーダルが起動する

Snow Monkey Blocks「パネル」項目(画像リンク付き)

画像にリンクがある場合は、Zoomモーダルを起動しない。

クッキング
ツリー
花火
ドリンク

まとめ

lightgallery.jsはいい感じ。

WordPressで使う場合は、lightgallery.jsのDOM構造に合わせるため、jQeuryでゴニョゴニョした。

LPとかで使うは、他にもいろんな機能があるので、今度LPで使ったときは、紹介する。

シンプルで、高機能なのでおすすめ!

この記事を書いた人

Takeo Tamura

療養中。フリーランス。Engineer 🇯🇵 Designer,Full-stack Developer. ❤️🧘‍♂️❤️🍶 ❤️ fashion