EC-CUBEの商品ページにある商品画像をFlashで移動・拡大させて見ることができます。
これにより限定された表示エリア内でも商品のディティールを見せることができ、商品訴求力を高めることができます。
Features
- 画像を拡大させることにより、対象物のディティールをユーザーに伝えることができます。
- Flashのステージサイズ内で移動・拡大するので、ページデザインやブラウザサイズに影響しません。
- 拡大・縮小時は、画像の中心を基準に変化するのではなく、見ている部分を中心にして変化します。
- EC-CUBEデフォルトテンプレートのように、拡大画像が別画面で立ち上がることがありません。
- 表示サイズは自由に設定可能
- 拡大スピード指定可能
- 実はEC-CUBE以外でも使えます！
License
以下の事項に従う限り、遠慮なくご自由にお使いください。 個人・法人、商用・非商用は問いません。
でも、コメントやリンクバックしてくれると非常に嬉しいです。
- 著作権は、開発者(シックスバード)に帰属するものとします。
- 使用したことで生じた請求・損害について、一切の責任を負わないものとします
- サポートの義務を負わないものとします。
使用するにあたって何か気になることがありましたらコメント、もしくはお問い合わせください。
Download
ダウンロードされるファイル
- FreelyView.swf
- detail.tpl (EC-CUBEの商品ページ用テンプレートファイル)
- images/noimage.jpg (商品画像が存在しなかった場合の代替画像)
別途、swfObject(JavaScript)が必要です。
FreelyView EC-CUBE2.11対応Verをダウンロードする（detail.tplのみ）
Change Log
- 2011/3/30
- FreelyView EC-CUBE2.11対応バージョンをリリース（detail.tplのみ）
- 2009/11/9
- FreFreelyView 1.0 リリース
How to Use
- ダウンロードした FreelyView.swf と imagesフォルダ を productsディレクトリ（detail.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％で表示することはできません。
時間が取れましたら初期表示サイズを設定出来るようにしてみたいと思います。
いつになるか分かりませんが（汗
お世話になります。
ec cube メイン画像 flash で検索いたしましてこちらにたどりつきました。
こちらのサービスでは、拡大縮小をユーザーが取るようになっていますが、
サイト側での再生したフラッシュを商品詳細（※ECCUBEの詳細-メイン画像 *
[260×260]の部分）にアップロードできるようにはなりませんでしょうか。
コメントいただけるとありがたいです。
よろしくお願いします。
フラッシュ自体(swfファイル)を商品管理からアップロードできないかということでしょうか？
もしそうなりますと、FreelyViewとは全く別の話となり、
商品管理のカスタマイズが必要となります。
お答えいただき、ありがとうございます。
＞フラッシュ自体(swfファイル)を商品管理からアップロードできないかということでしょうか？
そのつもりでいました。こちらもてっきり、フラッシュ自体を商品管理からアップロードしているものと思いました。
＞もしそうなりますと、FreelyViewとは全く別の話となり、
＞商品管理のカスタマイズが必要となります。
そうなのですね。ありがとうございます。
ちょっと大掛かりな話になってしまうようですね。
探していますが対応しているものがなさそうです。
初めてコメントいたします。
当方、はじめてのECサイト制作なのですが、詳細イメージの表示方法について
検索しておりましたところ、こちらのサイトを見つけました。
FreelyViewが素晴らしいと思い、使用させて頂きたく思っているのですが
修正方法についてわからない点があり、こちらにコメントをさせて頂きました次第です。
導入対象はEC-CUBE 2.11です。
（downloadファイルを解凍して拝見したのですが、2.11は
結構様変わりしていて困惑しております。）
2.11では拡大表示させると、別windowではなくmodal_windowのような表示になるのですが
このmodal_window上にスライダー表示可能なのでしょうか？
お忙しいところ大変申し訳ございません。
ご助言等頂ければ幸いです。
どうぞよろしくお願いいたします。
MPVさん、はじめまして。
私はまだ2.11をインストールしてないので、EC-CUBEがどこまで変わったか、
また、FreelyViewの動作がどうなるか確認出来ていないので、
これからインストールして確認してみたいと思います。
sixbird様
お返事頂きましてありがとうございます。
ご確認、ご助言頂ければ幸いです。
その後確認してみたのですが、defaultでは
faceboxを使用して表示しているようです。
（2.4では別windowを開いていますね。）
EC-CUBE2.11に対応したdetail.tplをリリースしました。
各ファイルの設置方法などは過去バージョンと同じです。
あとは、インストールしたEC-CUBE2.11のdetail.tplにダウンロードしたファイルを上書きすればOKです。
sixbird様
確認が遅れてしまい、申し訳ございません。
ご対応頂きまして真にありがとうございます。
当方、環境のDBの状態を真っ新にしたいと思い、
新規インストールを行い、その環境下で
sixbird様のファイルをダウンロードさせて頂き
detail.tplを上かぶせして実行してみたのですが、
どうも表示がうまく行われません。
（main画像表示が全く行われない状態です。）
開発環境は以下の通りです。
windows7 professional
XAMPP 1.7.4
EC-CUBE 2.11.0（修正パッチ適用済み）
MySQL 5.5
swfobjectは2.2で、ブラウザはgoogle chromeの10.0.648.204です。
もう少し確認してみます・・・。
取り急ぎお礼まで、失礼いたします。