【Debut】Light Boxで画像をポップアップ表示にしたい

[みかん]

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実装の仕方をご教示いただきたいです。

よろしくお願い致します。

[株式会社フルバランス · Accepted solution]

みかんさん

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>

で囲む

とりあえず希望の表示にはなったのですが間違っている箇所などあれば

またご教示いただきたいです。

よろしくお願い致します。