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

どのように動作するか

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

入手方法

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

  1. パブリッシャーアカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
  2. サイトビルダーを開く」をクリックします。
  3. 必要なブロックに画像を追加します。可能なオプション:
    • 説明
    • ギャラリー
  4. 以下のコードをカスタムコードブロックに追加します:
Copy
Full screen
Small screen
 1<script>
 2(function () {
 3  var blocks = ['.block--description', '.block--gallery'];
 4
 5  var style = document.createElement('link');
 6  style.rel = 'stylesheet';
 7  style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
 8  document.getElementsByTagName('head')[0].appendChild(style);
 9
10  var script = document.createElement('script');
11  script.type = 'text/javascript';
12  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
13  script.addEventListener('load', function () {
14    var fancyBoxClass = 'image-fancybox';
15    blocks.forEach(function (block) {
16      $(block)
17        .find('[data-bg]')
18        .toArray()
19        .forEach(function (element) {
20          var url = element.getAttribute('data-bg')
21            .replace('url(', '')
22            .replace(')', '')
23            .replace('"', '')
24            .trim();
25          if (url === '') {
26            return;
27          }
28          $(element)
29            .parent()
30            .wrap('<a style="width: 100%; height: 100%;" class="' + fancyBoxClass + '" href="' + url + '"></a>');
31        });
32    });
33
34    $('.' + fancyBoxClass)
35      .fancybox();
36  }, false);
37  document.getElementsByTagName('body')[0].appendChild(script);
38})();
39</script>

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

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


自分のコードを追加する

  1. ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。
  1. 独自のコードをブロックに挿入します。
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。

お役立ちリンク

最終更新日: 2025年7月17日

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

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!
フィードバックを送信できませんでした
後でもう一度お試しいただくか、doc_feedback@xsolla.comまでお問い合わせください。