モーダルウィンドウに画像を表示する方法

どのように動作するか

ユーザーが画像をより便利に閲覧できるようにするために、カスタム HTML コードを使ってモーダルウィンドウで画像を開くように設定することができます。既存のソリューションを使用することも、独自のコードを追加することもできます。

入手方法

既存のソリューションを使用する

  1. パブリッシャーアカウント>サイトビルダーと移動します。
  2. 必要なブロックに画像を追加します。可能なオプション:
    • 説明
    • ギャラリー
  3. 以下のコードをカスタムコードブロックに追加します:

Copy
Full screen
Small screen
<script>
(function () {
  var blocks = ['.block--description', '.block--gallery'];

  var style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
  document.getElementsByTagName('head')[0].appendChild(style);

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
  script.addEventListener('load', function () {
    var fancyBoxClass = 'image-fancybox';
    blocks.forEach(function (block) {
      $(block)
        .find('[data-bg]')
        .toArray()
        .forEach(function (element) {
          var url = element.getAttribute('data-bg')
            .replace('url(', '')
            .replace(')', '')
            .replace('"', '')
            .trim();
          if (url === '') {
            return;
          }
          $(element)
            .parent()
            .wrap('<a style="width: 100%; height: 100%;" class="' + fancyBoxClass + '" href="' + url + '"></a>');
        });
    });

    $('.' + fancyBoxClass)
      .fancybox();
  }, false);
  document.getElementsByTagName('body')[0].appendChild(script);
})();
</script>

  1. blocksパラメータで、このモダールウィンドウを適用するCSSクラスのブロックの名前を指定します。名前を分割するにはカンマを使用します。サイトに複数の同一ブロックがある場合には、これらの設定はそのすべてに適用されます。可能なオプション:
    • .block--description(説明ブロック)
    • .block--gallery(ギャラリーブロック)
  2. プレビューをクリックして、変更を確認します。

この手順については、チュートリアルビデオをご覧ください:


自分のコードを追加する

  1. ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。

  1. 独自のコードをブロックに挿入します。

この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
このページを評価する
このページを評価する
改善できることはありますか?

答えたくない

ご意見ありがとうございました!

お役立ちリンク

最終更新日: 2021年7月20日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!