商品画像拡大プラグイン(4.0系)

Amazonのように、商品画像にカーソルをホバーするだけで拡大表示が可能になります。
モバイルでは画像タップ時に商品画像専用のモーダルが表示され、ピンチイン・ピンチアウトで商品画像の拡大が可能になります。
また管理画面で拡大画像の表示位置やデザインなど、細かな設定が可能です。

• カーソル領域の表示
  
  • 表示する/表示しない
• カーソルの形状
  
  • クロスヘア/ポインター/ズームイン/ノーマル
• カーソル領域の背景色
  
  • カラーピッカーで選択
• カーソル領域の透明度
  
  • 数値で設定
• カーソル領域の枠線
  
  • cssで設定
• カーソル領域のズームステップ
  
  • 数値で設定
• ズームの最大値
  
  • 数値で設定
• ズームの最小値
  
  • 数値で設定
• ズームの開始位置
  
  • 数値で設定

• 拡大画像表示位置
  
  • 拡大画像を元の画像の横に表示/カーソルを合わせた画像の上で拡大させ、尚且つ全体を拡大/カーソルを合わせた画像の上で拡大させ、一部分を拡大
• ディスプレイの空きスペースに応じた表示
  
  • 有効/無効
• 画像間の余白(左:px)
  
  • 数値で設定
• 画像間の余白(右:px)
  
  • 数値で設定
• 拡大画像サイズ設定
  
  • デフォルト
  • カスタマイズ
• 拡大画像サイズ(横:px)
  
  • 数値で設定
• 拡大画像サイズ(縦:px)
  
  • 数値で設定
• 拡大画像のアニメーション
  
  • ズームアップ/フェードイン/スライドイン
• 拡大画像の z-index
  
  • 数値で設定
• 拡大画像の枠線
  
  • cssで設定

• 拡大画像のスクロール速度
  
  • 数値で設定
• ズーム速度
  
  • 数値で設定
• 拡大画像追従速度
  
  • 数値で設定
• 拡大画像表示速度
  
  • 数値で設定

• 商品画像拡大機能有効化までの時間(ミリ秒)
  
  • 数値で設定

• 当プラグインをインストール&有効化してください。
• 管理画面 > コンテンツ管理 > キャッシュ管理 よりキャッシュを削除してください。
• 管理画面 > オーナーズストア > プラグイン一覧 > 商品画像拡大プラグイン(4.0系) の設定(歯車アイコン)よりの商品画像拡大ポップアップの設定をしてください。
• 管理画面 > コンテンツ管理 > キャッシュ管理 よりキャッシュを削除してください。

*カスタマイズを行なっている際は正常に動作しない可能性がございます。

• DBテーブル plg_zoom_product_image_config の作成

• なし

• 初期データの登録

• なし

• DBテーブル plg_zoom_product_image_config の削除

デモ環境で動作をご確認いただけます。アクセス情報は下記をご参照ください。

• ・毎日午前0時より数分間、システムメンテナンスを実施します。この間、初期化処理を行うため、設定情報がリセットされます。
• ・事前の予告なしに、システムメンテナンスを実施する場合があります。
• ・デモ環境で不具合などを発見された場合は、サポートまでメールでご連絡ください。

プラグインのロジック変更や項目追加のほか、本体カスタマイズも承っております。お気軽にこちらまでご連絡ください。

EC-CUBE やシステム開発関連の情報発信をしています。詳しくは、Bootech 公式サイトをご覧ください。

EC-CUBE 4系のローカル環境構築プロジェクトの運営も行なっています。詳しくは、Docker for EC-CUBE 4をご確認ください。