記事の詳細

ファッション系のECサイトと相性の良さそうな「着せ替え」機能を簡単に実装するプログラムを作ってみました。

使用する言語

  • HTML
  • CSS
  • JavaScript
  • jQuery

※JavaScriptやjQueryの基本的な使い方は割愛させてただきます。

着せ替え機能のサンプル

服の画像をクリックすると、服を組み合わせた画像を上部に表示します。





各種コードの説明

HTMLコード

class「base-img」の要素には、切り替えても消さない基準となる画像を入れておきます。

class「select-img」の二枚の画像は、一枚目がユーザーがクリックする選択用の画像、二枚目は着せ替え用の画像として使います。
二枚目の画像は着せ替えのみに使いますので、CSSの設定で非表示化しておきます。

着せ替え用の画像を作成する際には、基準となる画像と同じサイズで、レイヤーのように組み合わせた際に違和感が無いような位置に調整して作成します。

jQuery(JavaScript)コード

画像がクリックされたら、HTMLコードに予め仕込んである二枚目の画像のURLを取り出し、z-indexを正しい順序で埋め込みながらimgタグを生成します。

選択済みのimgタグを全て取得したら、class「base-img」以外の画像を一度消して、選択された画像のみで取得したimgタグを着せ替え画像のエリアに埋め込みます。

※z-indexは後半に取得した要素ほど上にくるような処理になっているため、画像の順番に気を付けてください。

CSS(スタイルシート)の設定

CSSの重要な設定は「#kisekae-area img」の箇所となります。
位置を調整しないとレスポンシブの際に表示が崩れてしまうため、leftやtransformで真ん中に表示されるように調整しています。

今回は簡易的なコードで組みましたが、画像の命名規則などをしっかり決めることができれば、隠している画像も不要になるかもしれませんね。

コロナの影響でECサイトが盛り上がっていますので、今回の着せ替えプログラムはECサイトで役立つかもしれません!

弊社では本記事のようなシステムの実装に関するご相談も承っておりますので、もし興味がありましたらお問い合わせまでお気軽にご連絡ください。

ではまた!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。小難しい記事を書くことが多いのですが、本人はそこまで小難しい性格……じゃなければ良いなぁと思ってます!

ほかの投稿も読んでみませんか?

コメントは利用できません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る