画像の拡大

ホームページに掲載している商品写真をなるべく大きくしてお見せしたいと思うのはごく自然のことです。とは言ってもレイアウトの都合もあり、初めからすべて大きくして表示することは無理があります。そこでサムネール画像を拡大して表示する方法のいくつかを取り上げたいと思います。尚、サンプルの写真は当社のクライアント様で工業用ブラシ(除電ブラシ)を販売していらっしゃる株式会社スタック・アンド・オプティーク様の商品です。

パターンA

サンプル1

【グループ化】

  • グループ1
  • グループ2
  • グループ3
クリックで拡大【Lightbox】
●写真上でクリックすると別ウィンドウで拡大写真が表示されます。
●グループ化でき、拡大された写真上で次の写真へ移動できます。

パターンB

サンプル1

マウスオーバーで拡大【CSS3】
●スタイルシートだけでできる最も簡単な実装例です。(CSSのバージョンは3)
●サンプルでは最大拡大値に至るまでの時間を1秒に設定しています。徐々に拡大されるのはそのためです。0秒に設定するといきなり拡大表示されます。
●CSS3を実行できないブラウザ(例えばIE8)では動作しません。
●jQueryでも同じ表現ができますが、あえてCSSで実装してみました。

パターンC

サンプル1

マウスオーバー時カーソルの動きで拡大【jQueryプラグイン】
●jQueryのプラグイン「elevatezoom.js」を使用しました。
●このプラグインでは表現にいくつかのバリエーションがありますが、今回はベーシックなものをサンプルにしています。