バージョン選択

フォーラム

 どうか教えて下さい！  バグ見つけましたよ！  こんな機能あったらなぁ  プラグインについて  その他

メニュー

 当サイトについて  初めてご利用になる方へ  EC-CUBE開発情報

オンライン状況

44 人のユーザが現在オンラインです。 (37 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 44
もっと...

サイト内検索
質問 > 管理機能 > 商品詳細ページ(スマホ)の画像表示

管理機能

新規スレッドを追加する

スレッド表示 | 古いものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
468
投稿日時: 2021/4/19 18:02
対応状況: −−−
神
登録日: 2008/10/26
居住地:
投稿: 3217
Re: 商品詳細ページ(スマホ)の画像表示
デフォルトの挙動は2つの仕組みで作られていると思います。

1つは、ドットの表示切り替えで
/src/Eccube/Resource/template/default/Product/detail.twigの
128行目付近の以下の記述で指定していると思います。
responsive: [{
    breakpoint: 768,
    settings: {
        dots: true
    }
}]

ブラウザの幅が768px以下になった時にドットを表示する設定に上書きしていると思います。

2つ目は縮小画像のdivタグのclass属性「item_nav」に対して
cssのメディアクエリで表示/非表示の切り替えが指定されています。
<div class="item_nav">
    {% for ProductImage in Product.ProductImage %}
        <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
    {% endfor %}
</div>

↑に対して、/html/template/default/assets/css/style.cssの5394行目付近で
.ec-sliderItemRole .item_nav {
    display: none; }

のような記述でブラウザの幅が768px以下になった時に非表示になるように指定していると思います。
（正確には768px以上で表示という指定になっているようです）


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
■EC-CUBE3マニュアル
■blog
ag1013
投稿日時: 2021/4/16 20:25
対応状況: −−−
新米
登録日: 2020/2/22
居住地:
投稿: 9
商品詳細ページ(スマホ)の画像表示
[EC-CUBE] EC-CUBE4.0.3　
[レンタルサーバ] plesk

現在デフォルトテンプレを使用しており、スマホ商品詳細ページの商品画像をドット表示からPCのように縮小画像を表示させるように変更したいのですが、どのような工程で行えば良いのでしょうか。

ご教示いただけますと幸いです。
よろしくお願い致します。
スレッド表示 | 古いものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,707名です
総投稿数は109,948件です

投稿数ランキング

1
seasoft 		7367
2
468 		3217
3
AMUAMU 		2712
4
nanasess 		2313
5
umebius 		2085
6
yuh 		1819
7
h_tanaka 		1638
8
red 		1570
9
mcontact 		1285
10
tsuji 		958
11
fukap 		907
12
shutta 		835
13
tao_s 		799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan 		633
18 DELIGHT 572
19
patapata 		502
20
flealog 		485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.