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

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

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

★★★★★0件の評価

公開日: 2022年9月9日 / 更新日: 2024年7月9日

対応バージョン: EC-CUBE4.2系~
4.3系4.3.0
4.2系4.2.0|4.2.1|4.2.2|4.2.3|4.2.3-p1

提供:ITOBEN STYLE

サポート: [email protected]

商品情報

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

EC-CUBE4.2系対応
4.0系・4.1系には対応していません


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

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

プラグイン設定画面

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

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

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

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

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

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

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

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

画像上の矢印

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

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

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

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

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

商品画像部分をカスタマイズされている場合の注意

【注意】
現行サイトにおいて、商品画像部分をカスタマイズされている場合は、デフォルトの状態に戻さないとプラグインが機能しない可能性がありますので、プラグイン適用前にご確認・修正を行ってください。
特に重要なのは、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') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}></div>
{% else %}
<div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></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') }}" alt="" width="133" height="133" loading="lazy"></div>
{% endfor %}
</div>
</div>
</div>
---------------------------------------

PAGE TOP

リリースノート

EC-CUBE4.3に対応しました。(2024/07/09)
EC-CUBE4.3に対応しました。
商品詳細ページ:サムネイルのカルーセル、メイン画像モーダルウィンドウ表示プラグイン4.2系新規リリー(2022/09/09)
商品メイン画像をクリックすると、モーダルウィンドウにより登録時のサイズ(最大はブラウザ内100%)で画像が表示されます。
登録画像が3点を超えると、サムネイル画像はカルーセル(スライド)表示に切り替わります。
スライド機能を無効にすると、横一列の一覧で表示されます。

PAGE TOP

商品詳細ページ[商品画像]プラグイン4.210,000円(税込)

この商品に対するお客様の声

この商品に対するご感想をぜひお寄せください。

PAGE TOP