EC-CUBEの商品ページにある商品画像をFlashで移動・拡大させて見ることができます。
これにより限定された表示エリア内でも商品のディティールを見せることができ、商品訴求力を高めることができます。
Features
- 画像を拡大させることにより、対象物のディティールをユーザーに伝えることができます。
- Flashのステージサイズ内で移動・拡大するので、ページデザインやブラウザサイズに影響しません。
- 拡大・縮小時は、画像の中心を基準に変化するのではなく、見ている部分を中心にして変化します。
- EC-CUBEデフォルトテンプレートのように、拡大画像が別画面で立ち上がることがありません。
- 表示サイズは自由に設定可能
- 拡大スピード指定可能
- 実はEC-CUBE以外でも使えます！
License
以下の事項に従う限り、遠慮なくご自由にお使いください。 個人・法人、商用・非商用は問いません。
でも、コメントやリンクバックしてくれると非常に嬉しいです。
- 著作権は、開発者(シックスバード)に帰属するものとします。
- 使用したことで生じた請求・損害について、一切の責任を負わないものとします
- サポートの義務を負わないものとします。
使用するにあたって何か気になることがありましたらコメント、もしくはお問い合わせください。
Download
ダウンロードされるファイル
- FreelyView.swf
- detail.tpl (EC-CUBEの商品ページ用テンプレートファイル)
- images/noimage.jpg (商品画像が存在しなかった場合の代替画像)
別途、swfObject(JavaScript)が必要です。
Change Log
- 2009/11/9
-
- FreelyView 1.0 リリース
How to Use
- ダウンロードした FreelyView.swf と imagesフォルダ を productsディレクトリ（products.phpと同じディレクトリ）に入れてください。
- ダウンロードした detail.tpl の <!– ## START FreelyView ## –> から <!– ## END FreelyView ## –> をEC-CUBEの data/Smarty/templates/テンプレート名/detail.tpl の相当する箇所にコピペ。
※ダウンロードした detail.tpl はバージョン2.4.1のものですので、ソースを何も変更しておらず、かつ2.4.1であれば丸ごとファイルを差し替えても問題ありません。 - 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: EC-CUBE, Flash, FreelyView
いつもあありがとうございます。FreelyViewを利用さえていただいております。
今回設置してみたのですが、画像劣化してしまっています。
これはどの画像を読み込んでいるのでしょうか？
詳細-メイン拡大画像[500×500]なのかもしれませんがなぜか劣化してします。
対処方法等ありましたら教えてください。
読み込んでいる画像は管理画面で言う「詳細-メイン拡大画像」です。
detail.tplに「商品画像」とコメントしている部分がその画像を指定してる部分です。
画像の劣化ですが、detail.tplで指定してるステージサイズより画像サイズより小さくなってたりしませんか？
swfobjectを指定している行を見て頂くとデフォルトでは260となっていますが、これがステージサイズですので、EC-CUBEのデフォルトと違うテンプレートを使用しているのでしたら、ここのサイズが違う可能性があります。
画像サイズ > ステージサイズ
という関係になるようにしてみて下さい。
さっそくのご返信ありがとうございます。
サイトは
http://e-stylelife.jp/
になります。
読み込んでる画像のほうがサイズが大きく４００＊４００になります。
jpgだけ確認すると画像が奇麗に表示されています。
detail114.htmlを拝見しました。設置自体は問題ないようですね。
元画像を見たのですが、この画像自体の画質が結構粗く見えます。
（500×500のサイズで32kbくらいなので、画質を結構抑えて出力しているのではないのでしょうか？）
ですので、FreelyViewで縮小したときにその粗さが目立つのかもしれません。
一度、画質の良いものでご確認してみて頂けますでしょうか。
ちなみに、ヘッダーにある横長のバナーが376×48で30kbくらいです。
これと比較すると、メイン画像の画質が低いことが分かるかと思います。
ご返信ありがうございます。
detail114.htmlみていただきありがとうございます。
元画像は下記になります。
http://e-stylelife.jp/upload/save_image/04032339_4bb7532524dae.jpg
http://e-stylelife.jp/upload/save_image/04032339_4bb753250367b.jpg
確かに画質が悪いのですが、
detail114.html
を、みると画像を拡大すると逆にきれいに表示されているような気がします。
> 拡大すると逆にきれいに表示されているような気がします。
実際には画像が拡大されているのではなく、元のサイズになっているだけです。
初期表示の画像サイズが縮小されて表示されています。つまり、ステージサイズ＝画像初期サイズです。
貴サイトの場合、500×500の画像を260×260に縮小して見せています。
このページのサンプルを見ていただいてもお分かりになるように、画像500×500、ステージ260×260という同条件でも綺麗に見えています。
ですので、以前のコメントにも書きましたが、画質の良いものでご確認してみて頂けますでしょうか。
FreelyViewを利用させていただいております。
自分はカメラのプロファイルではまった経験があります。
フォトショプでプロファイルを外したら
キレイに表示されるようになりました。
さて、ご質問があるのですが、FreelyViewにて
onMouseOver chang_imgの処理で
EC CUBEのサブ画像を表示することは可能でしょうか？
当方で挑戦してみたのですがうまくいかず
御指南頂ければ幸いです。
よろしくお願いいたします。
chang_imgのタイミングでというのは難しいかと思います。
なので、detail.phpをカスタマイズして、サブ画像の拡大画像URLを引っ張ってくる必要があります。
もしかしたらdetail.php内では取得してるかもしれませんので、あとはSmarty側で出力するだけでいいかも知れません。
あとはdetail_image.php（拡大画像が表示される画面）でFreelyViewを仕込むかというところでしょうか。
初期値を設定することは可能でしょうか。
画像に文字が入っていると、商品詳細ページの表示時に縮小されているため若干見えにくかったりするので、はじめからサイズ100%の状態で表示させたいのです。
残念ながら今のところ、初期表示に画像サイズを100％で表示することはできません。
時間が取れましたら初期表示サイズを設定出来るようにしてみたいと思います。
いつになるか分かりませんが（汗