Liquid、JavaScriptなどに関する質問
Debutテンプレートをカスタマイズしています。
ギャラリーセクション(image-bar.liquid)で画像を指定して、画像クリック→画像をポップアップ表示にしたいため、Light Boxを実装したいです。
【自分でやってみたこと】
グローバルアセットの
{{ 'lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox.js' | global_asset_url | script_tag }}
theme.liquidに記載
image-bar.liquid
画像が出るdiv要素を
<a href="{{ block.settings.image | img_url: '2048x' }}" data-lightbox="sample"> </a>
で囲む
結果:画像のリンクが繋がっただけ…で行き詰まっています
Light Box実装の仕方をご教示いただきたいです。
よろしくお願い致します。
解決済! ベストソリューションを見る。
成功
みかんさん
Lightboxを簡単に実装できたら嬉しいですよね。
原因はわからないですが、
グローバルアセットを使用せず、下記のような方法で実装してみてはいかがでしょうか?
https://on-ze.com/archives/1715
よろしくお願いします。
成功
みかんさん
Lightboxを簡単に実装できたら嬉しいですよね。
原因はわからないですが、
グローバルアセットを使用せず、下記のような方法で実装してみてはいかがでしょうか?
https://on-ze.com/archives/1715
よろしくお願いします。
ご回答ありがとうございます!
グローバルアセットを読み込んだらすぐ使えるのかな?と安易に考えてました^^;
貼っていただいたurlを参考に以下の手順で実装できました!
①
lightboxデータ一式を公式サイトからDL
②
lightbox.js、lightbox.css、imgフォルダ内の各画像をアセットフォルダにアップロード
※サブフォルダは使用しない
③
lightbox.css
close.pngなどのimg urlを修正
④
{{ 'lightbox.css' | asset_url | stylesheet_tag }}
{{ 'lightbox.js' | asset_url | script_tag }}
theme.liquidに記載
⑤
image-bar.liquid
画像が出るdiv要素を
<a href="{{ block.settings.image | img_url: '2048x' }}" rel="lightbox[sample-group]”> </a>
で囲む
とりあえず希望の表示にはなったのですが間違っている箇所などあれば
またご教示いただきたいです。
よろしくお願い致します。
Shopifyペイメント決済サービスを利用していて、ストアの管理画面の通知セクションに突然「Shopifyペイメントの使用を継続するために必要な情報」というバナーメッセージが表示さ...
By Mirai Dec 3, 2023すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023