Tw
感想を共有しよう！

商品詳細ページ[商品画像]プラグイン

販売価格：10,000円(税込)

公開日： 2019年5月17日 / 更新日： 2021年9月23日

対応バージョン： EC-CUBE4系に対応
4.1系	4.1.0｜4.1.1｜4.1.2｜4.1.2-p1｜4.1.2-p2
4.0系	4.0.0｜4.0.1｜4.0.2｜4.0.3｜4.0.4｜4.0.5｜4.0.5-p1｜4.0.6｜4.0.6-p1｜4.0.6-p2｜4.0.6-p3

提供：ITOBEN STYLE

サポート： style@itoben.com

商品情報

商品詳細ページ:サムネイルのカルーセル・メイン画像のモーダルウィンドウ

このプラグインは、EC-CUBE4.2系には対応していません。

EC-CUBE4.2系対応版はこちら

・商品画像をクリックすると、モーダルウィンドウにより登録時のサイズ(最大はブラウザ内100%)で画像が表示されます。
・モーダルウィンドウは、jquery.colorboxを利用しています。
・プラグイン設定画面で、モーダルウィンドウのデザインを5種類の中から選択できます。選択欄を空欄にすると、モーダルウィンドウ(画像クリック)は無効になります。
・登録画像が3点を超えると、サムネイル画像はスライド表示に切り替わります。
・スライド機能を無効にすると、横一列の一覧で表示されます。
・商品画像が1点のとき、サムネイル画像は表示されません。

プラグイン設定画面

設定アイコンをクリックすると、設定画面が開きます。
・モーダルウィンドウ欄:半角数字 1 , 2 , 3 , 4 , 5 のいずれかを入力してください。空欄にすると、モーダルウィンドウは無効となります。
・サムネイル画像:スライド表示または一覧表示を選択します。
・画像上の矢印:メイン画像、サムネイル画像、それぞれ個別に設定できます。ただし、「一覧表示」を選択した場合は、サムネイル画像の矢印は不要ですので表示されません。

モーダルウィンドウは5 種類から選択

設定画面のモーダルウィンドウ欄に数字を入力します。空欄で登録すると、モーダルウィンドウ機能は無効になり、画像はクリックできません。

サムネイル画像のレイアウト

「スライド表示」では、画像が3 枚を超えるとスライドを開始します。
「一覧表示」では、図のように、登録数に合わせて横一列で表示されます。「スライド表示」と同様、サムネイルをクリックすると、メイン画像がクリックした画像に入れ替わります。

画像上の矢印

画像の上に矢印を表示させることができます。クリックすると画像が入れ替わります。
メイン画像、サムネイル画像、それぞれ個別に設定できます。
ただし、「一覧表示」を選択した場合は、サムネイル画像の矢印は不要ですので表示されません。

商品画像1点のときのサムネイルは不要

商品画像1点のとき、サムネイルは表示されません。

動作確認デモサイト

商品画像が3点を超えるとき、サムネイルはスライドします。
メイン画像をクリックすると、モーダルウィンドウで詳細画像が開きます。
https://itoben.xsrv.jp/eccube4demo/cz4/products/detail/17

【注意】
現行サイトにおいて、商品画像部分をカスタマイズされている場合は、デフォルトの状態に戻さないとプラグインが機能しない可能性がありますので、プラグイン適用前にご確認・修正を行ってください。
特に重要なのは、divのclass要素がデフォルト状態であることです。

Product/detail.twig
▼商品画像部分(デフォルト)
---------------------------------------

<div class="ec-grid2__cell">
<div class="ec-sliderItemRole">
<div class="item_visual">
{% for ProductImage in Product.ProductImage %}
<div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
{% else %}
<div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
{% endfor %}
</div>
<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>
</div>
</div>

---------------------------------------

4.0系 4.1系プラグイン