Carousel.usでAmazon風リコメンドを実現！
とうとう来ましたっ！
って言ってもすでに存在するスクリプトなのかもしれませんが、
Amazonのあの、くるくる回るヤツ。
そう、商品がくるくる回るアレ！
ということで、
Amazonに言ったことがある人はもうお馴染みのくるくる回るレコメンドを
実現できるJavascriptを実践＆ご紹介してみようと思います。
元ネタは以下より。
[JS]画像をダイナミックに3D回転させるスクリプト -Carousel.us | コリス
(どこから見つけてくるんでしょうね、このような新しいネタを...）
1.Carousel.usをダウンロード
以下、本家サイトより、ファイル一式をダウンロード。
Carousel.us
http://www.piksite.com/carousel.us/
ページ下部のDownload部分、「You can download it here.」より
ファイル一式をダウンロードします。
What is it ?を見るところによると、このスクリプトを動かすには、
定番のprototype.js、scriptaculous.jsが必要とのことです。
サンプルのような反転効果を出したいときはPHP Easy Reflections v3なるものが必要だそうです。
・prototype.js
http://www.prototypejs.org/
・scriptaculous.js
http://script.aculo.us/
・PHP Easy Reflections v3
http://reflection.corephp.co.uk/
一応、ダウンロードしたCarousel.us.zipには一式入っているようです。
2.ファイル一式をアップロードしちゃいます！
まずはアップロードしちゃいましょう！
アップロードファイルは以下です。
・_css
・_image
・_inc
・_js
・index.php
・reflect.php
煩わしい変更より、実際の画面を見てみたいのでね。
※index.phpファイル38行目あたりの「foreach($images as &$value) {」部分、
「&」がエラーになるようですので、削除で対応。
管理人の環境だと、Carouselディレクトリにアップしてみます。
Carousel.usサンプル
うむ素晴らしい！
くるくる回るではないか！
かわいらしいじゃないか！
3.設定変更したいなら！
どうやらconfig.phpファイルに書かれている以下のコードを変更することで、
実際の動きを調整することができるようですね。
'includes' => '_inc/', 'javascript' => '_js/', 'css' => '_css', 'path' => '_images/', 'opacity' => '80', 'height' => '100', 'radiusx' => '400', 'radiusy' => '120', 'centerx' => '240', 'centery' => '190', 'clickit' => 'true', 'base' => '0.15', 'speed' => '0.05'
画像パスやら、画像サイズなど何とはなしに設定すれば無問題！
んで、写真をクリックして、表示されるテキストは、
page.phpを変更することで、設定が可能なようです。
もちろん、管理人、JSの知識など一切ありませんが、
なんとなくコード名を見ていたら、できましたゾ！
なんとかサンプルをいじれたので今日はこの辺で！
マーケティング的独り言
話題のリコメンドエンジンにひと細工を加えられるなら、面白いですね。
Zozoやファッションウォーカーなど若者向けのショッピングモールには最適ですね。
関連エントリー
トラックバック(0)
このブログ記事に対するトラックバックURL:
http://km33.net/mt/mt-tb.cgi/192
コメントする
お気軽にコメントをどうぞ！
