ページでLightboxを使用したい

[snoknoow]

Prestigeを使用してアパレル系ショップを運営しております。

お客様の着用写真を紹介するギャラリーページを作成し、Lightboxで写真を拡大表示にしたいと考えております。

こちらのQ&A内で見つけた「【Debut】Light Boxで画像をポップアップ表示にしたい」を参考に

パートナーアカウントの方でDawnを使用して試してみたところうまくいったのですが、

Presitigeを使用している方ではどうしてもうまくいきません。

具体的には、写真クリックで拡大表示はされますが、"close.png”などの画像は表示されず、ブラウザの戻るボタンでしか拡大を解除できません。

原因と解決方法を教えていただけると有り難いです。

お忙しいところ恐れ入りますが何卒よろしくお願いいたします。

[Qcoltd]

参考にされた投稿に記載の、

③ 
lightbox.css
close.pngなどのimg urlを修正

において、

Prestigeではうまくいかない問題があるのかもしれませんね。

Prestigeにおいて上記の画像のURLをどのように修正されたかお教えいただければ、

具体的な回答ができるかもしれません。

しかし、

Prestigeが有料テーマである都合上、

コードを実際に埋め込めんでの検証ができないので、

その点、ご了承ください。

ご参考まで。

(キュー田辺)

[snoknoow]

ご回答誠にありがとうございました。

Prestigeにおいて上記の画像のURLをどのように修正されたかお教えいただければ、

具体的な回答ができるかもしれません。

こちらについてですが、

lightbox.cssの以下4箇所を修正しました。

-----

background: url(../images/loading.gif) no-repeat;

↓

background: url(images/loading.gif) no-repeat;

-----

background: url(../images/prev.png) left 48% no-repeat;

↓

background: url(images/prev.png) left 48% no-repeat;

-----

background: url(../images/next.png) right 48% no-repeat;

↓

background: url(next.png) right 48% no-repeat;

-----

background: url(../images/close.png) top right no-repeat;

↓

background: url(close.png) top right no-repeat;

-----

加えて、theme.liquidに以下を追記しています。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
{{ 'lightbox.css' | asset_url | stylesheet_tag }}
{{ 'lightbox.js' | asset_url | script_tag }}

テーマの開発元であるmaestrooにも問い合わせてみたのですが、サポート外とのことで解決には至りませんでした。

お忙しい所何度も申し訳ありませんが、お知恵をお借りできれば助かります。

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

[Qcoltd]

@snoknoow 様

ありがとうございます。

Dawnの方も、同様の修正をされていて、Dawnはうまく動いているのですね。

いただいた修正方法ですと、画像のパスが通らないと思うので、

逆にDawnの方がうまくっているのが、不思議ではあるのですが、

私が知らない仕様があるのかもしれません。

ですので、

私が分かる範囲での回答になります。

(1)

こちらから、

https://github.com/lokesh/lightbox2/tree/dev/src/images

loading.gif

prev.gif

next.gif

close.gif

をダウンロードします。

(2)

ストア管理画面 > 設定 > ファイルから、

loading.gif

prev.gif

next.gif

close.gif

をストアに、アップロードします。

(3)

上記、アップロードが完了しますと、

https://cdn.shopify.com/s/files/0/00000/0000/0000/files/loading.gif

のようなリンクを、同画面から取得できるかと思いますので、

そちらを使って、

下記のようにされてはいかがでしょうか？

※実際のURLは、画面から取得したものをお使いください。

-----

background: url(../images/loading.gif) no-repeat;

↓

background: url(https://cdn.shopify.com/s/files/0/00000/0000/0000/files//loading.gif) no-repeat;

-----

background: url(../images/prev.png) left 48% no-repeat;

↓

background: url(https://cdn.shopify.com/s/files/0/00000/0000/0000/files/prev.png) left 48% no-repeat;

-----

background: url(../images/next.png) right 48% no-repeat;

↓

background: url(https://cdn.shopify.com/s/files/0/00000/0000/0000/files/next.png) right 48% no-repeat;

-----

background: url(../images/close.png) top right no-repeat;

↓

background: url(https://cdn.shopify.com/s/files/0/00000/0000/0000/files/close.png) top right no-repeat;

-----

ご参考まで。

(キュー田辺)

[snoknoow]

詳しいご説明誠にありがとうございました！

教えていただいた方法で試してみましたが、残念ながら解決しませんでした…。

もう少し自分でも試行錯誤してみようと思います。

貴重なお時間をありがとうございました。

[Qcoltd]

@snoknoow 様

承知しました。

もし、解決が難しそうでしたら、

実際にエラーが発生している状態がわかるURLを、

プライベートメッセージなどでお送りいただければ、

より具体的な解決方法を提示できるかもしれません。

(お約束はできませんが。。。)