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

2016 年 3 月 17 日

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

このトピックには6件の返信が含まれ、4人の参加者がいます。1 年、 4 ヶ月前 yasumax さんが最後の更新を行いました。

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #77845

    ushi
    参加者

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

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

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

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

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

    #77846

    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で検索してください。

    #77847

    ushi
    参加者

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

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

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

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

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

    #77849

    yskysmr
    キーマスター

    こんにちは。

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

    #77862

    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 );
    }

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

    #77864

    ushi
    参加者

    yskysmr様 uishi様

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

    #77890

    yasumax
    キーマスター

    こんにちは。

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

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

7件の投稿を表示中 - 1 - 7件目 (全7件中)

このトピックに返信するにはログインが必要です。