«
»

FreelyView – Flashで商品画像を移動・拡大

2009/11/09

FreelyView

EC-CUBEの商品ページにある商品画像をFlashで移動・拡大させて見ることができます。
これにより限定された表示エリア内でも商品のディティールを見せることができ、商品訴求力を高めることができます。

Features

  • 画像を拡大させることにより、対象物のディティールをユーザーに伝えることができます。
  • Flashのステージサイズ内で移動・拡大するので、ページデザインやブラウザサイズに影響しません。
  • 拡大・縮小時は、画像の中心を基準に変化するのではなく、見ている部分を中心にして変化します。
  • EC-CUBEデフォルトテンプレートのように、拡大画像が別画面で立ち上がることがありません。
  • 表示サイズは自由に設定可能
  • 拡大スピード指定可能
  • 実はEC-CUBE以外でも使えます！

License

以下の事項に従う限り、遠慮なくご自由にお使いください。 個人・法人、商用・非商用は問いません。
でも、コメントやリンクバックしてくれると非常に嬉しいです。

  • 著作権は、開発者(シックスバード)に帰属するものとします。
  • 使用したことで生じた請求・損害について、一切の責任を負わないものとします
  • サポートの義務を負わないものとします。

使用するにあたって何か気になることがありましたらコメント、もしくはお問い合わせください。

Download

FreelyViewをダウンロードする

ダウンロードされるファイル

  • FreelyView.swf
  • detail.tpl (EC-CUBEの商品ページ用テンプレートファイル)
  • images/noimage.jpg (商品画像が存在しなかった場合の代替画像)

別途、swfObject(JavaScript)が必要です。

Change Log

2009/11/9
  • FreelyView 1.0 リリース

How to Use

  1. ダウンロードした FreelyView.swf と imagesフォルダ を productsディレクトリ（products.phpと同じディレクトリ）に入れてください。
  2. ダウンロードした detail.tpl の <!– ## START FreelyView ## –> から <!– ## END FreelyView ## –> をEC-CUBEの data/Smarty/templates/テンプレート名/detail.tpl の相当する箇所にコピペ。
    ※ダウンロードした detail.tpl はバージョン2.4.1のものですので、ソースを何も変更しておらず、かつ2.4.1であれば丸ごとファイルを差し替えても問題ありません。
  3. swfObjectからダウンロードした swfobject.js を user_data/packages/パッケージ名/js/ に入れる。

何もカスタマイズなどをされていなければ、上記の通りで問題ないと思います。
商品画像がなかった場合の代替画像を変更したい場合は、imagesディレクトリに noimages.jpg というファイル名で上書きしてください。

スライダー機能紹介

Example

ステージサイズ 260 x 260 画像サイズ 500 x 500 ※EC-CUBEのデフォルトサイズと同じです。
FreelyViewサンプル

 

ステージサイズ 450 x 450
画像サイズ 3000 x 1985

FreelyViewサンプル

 

Customize

FreelyView独自のカスタマイズを行いたいという方がいらっしゃればお問い合わせください。
有料となりますが、ご要望に添ったオリジナルのFreelyViewを開発致します。
FreelyViewだけではなく、サイトデザインやEC-CUBEカスタマイズなどのご依頼でも遠慮なくご相談ください。



FreelyViewに対してご要望や改善点、バグなど、何かありましたらコメントください。
できるだけご期待には応えていきたいと思います（汗


Tags: , ,

コメントをどうぞ