FROM CACHE - jp_header

ページでLightboxを使用したい

snoknoow
Shopify Partner
5 0 0

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

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

 

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

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

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

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

 

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

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

5件の返信5

Qcoltd
Shopify Partner
1051 429 414

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

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

において、

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

 

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

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

 

しかし、

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

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

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
snoknoow
Shopify Partner
5 0 0

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

 

 

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
Shopify Partner
1051 429 414

@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;

-----

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
snoknoow
Shopify Partner
5 0 0

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

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

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

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

Qcoltd
Shopify Partner
1051 429 414

@snoknoow 様

 

承知しました。

 

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

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

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

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

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/