モーダルウィンドウに画像を表示する方法
どのように動作するか
ユーザーが画像をより便利に閲覧できるようにするために、カスタムHTMLコードを使ってモーダルウィンドウで画像を開くように設定することができます。既存のソリューションを使用することも、独自のコードを追加することもできます。
入手方法
既存のソリューションを使用する
- パブリッシャーアカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
- 「サイトビルダーを開く」をクリックします。
- 必要なブロックに画像を追加します。可能なオプション：
- 説明
- ギャラリー
- 以下のコードをカスタムコードブロックに追加します：
Copy
- html
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>
blocksパラメータで、このモダールウィンドウを適用するCSSクラスのブロックの名前を指定します。名前を分割するにはカンマを使用します。サイトに複数の同一ブロックがある場合には、これらの設定はそのすべてに適用されます。可能なオプション：- .block--description（説明ブロック）
- .block--gallery（ギャラリーブロック）
- プレビューをクリックして、変更を確認します。
この手順については、チュートリアルビデオをご覧ください：
自分のコードを追加する
- ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。
- 独自のコードをブロックに挿入します。
この記事は役に立ちましたか？
ご意見ありがとうございました！
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。お役立ちリンク
最終更新日: 2025年7月17日誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
