Welcart Basicにて商品ページの画像をクリックすると背景が黒にになり、ページ全体が商品画像になるのをやめたい。

[ushi]

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

表題のとおり、Welcart Basicにて、商品ページの画像をクリックすると背景が黒になり、ページ全体が商品画像になるのをやめたいのです。
画像をクリックすると、フワッと大きくなり、直前まで見ていたページが半透明になる、よくありがちなものにしたいと思っております。
そこで、２つのプラグイン、Easy FancyBoxとFancyBox for WordPressを順番に試しました。
上記のプラグインそれぞれバッチリ機能します。しかし背景が黒になり、ページ全体が商品画像になる挙動も同時にしてしまいます。
つまり、動作がかぶってしまっているのです。そのため、画像を消す→商品ページに戻らず、従前の背景真っ黒ページになる→また画像を消す→ここでやっと商品ページに戻る。

Easy FancyBoxとFancyBox for WordPressのどちらか一方を使用したいのですが、どうすれば仕様？である商品ページの画像をクリックすると背景が黒になり、ページ全体が商品画像になるのをやめることができるでしょうか。

お知恵をお貸しください。よろしくお願い致します。

——————————————-
WordPress のバージョン： 4.4.2
Welcart のバージョン：1.7.4
ご利用のテーマ：Welcart Basic
症状を確認したブラウザ：Chrome
——————————————–

[uishi]

たぶん
テーマのstyle.cssに

div#swipebox-overlay{
	background: rgba(13, 13, 13, 0.5) none repeat scroll 0 0;
}

と書いてやるか
テーマのcssフォルダにあるswipwbox.mini.cssの#swipebox-overlayを書き直してあげる。

#swipebox-overlay｛
　background: rgba(13, 13, 13, 0.5) none repeat scroll 0 0;
｝

詳しくはcss rgbaで検索してください。

[ushi]

uishi様　
早速の返信ありがとうございました。感謝いたします。

2通りの方法で試してみましたが、一つ目は背景が半透明にはなりました。二つ目は何も変化無しです。

また、プラグインを適用すると、やはり挙動がダブってしまいます。

調べたところによると、
私がやりたいことは「画像を浮かび上がるように表示させるモーダルウィンドウ」であり、
そのためには「Easy FancyBoxとFancyBox for WordPress」のどちからのプラグインで可能。
しかし、状況は welcart basic のデフォルト？である「背景が黒にになり、ページ全体が商品画像になる」挙動を取り除くことができないので困っている。

こんなところです。恐縮ですが、さらなるお知恵をお借りできればと思います。

[yskysmr]

こんにちは。

商品画像のエフェクトを外すやり方は、ドキュメントのほうに記載しています。
ご参照ください。
https://www.welcart.com/docs/themes/welcart_basic/faq.html

[uishi]

swipebox.無効化して、プラグイン利用が希望通りなんですね。
FAQにあったとは盲点でした。
functions.phpに

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
$css = '
	#swipebox-overlay｛background: rgba(13, 13, 13, 0.5) none repeat scroll 0 0;｝
	#swipebox-overlay img{ box-shadow: 0 0 30px 10px rgba(13, 13, 13, 0.7);}
	#swipebox-slider .slide .swipebox-inline-container, #swipebox-slider .slide .swipebox-video-container, #swipebox-slider .slide img{max-height:50%;max-width:50%;}
';

    wp_add_inline_style( 'swipebox-style-css', $css );
}

だと画像の大きさとモーダルの透明度と背景に影がつけられるかもしれない。ためしてないけど。
いろいろ勉強になりました。

[ushi]

yskysmr様　uishi様

無事解決しました。ありがとうございました。本当に助かりました！

[yasumax]

こんにちは。

今回は「Easy FancyBox」と「FancyBox for WordPress」のいずれかを利用することで解決されていますが、SwipeBoxの動きにつきましてushi様からのご意見を取り入れまして少し変更を加えました。

Welcart Basic 1.1.4では、背景を半透明にしさらに半透明部分をクリックすると画像を拡大していたのを閉じるという動きに変更いたしました。
・Welcart Basicデモサイト　商品詳細ページ

[投稿者]

投稿