jQuery(カルーセル)で作る、画像付き商品紹介

商品紹介や販売サイトで使えそうなテクニック。。かな?
サムネイル(画像)をずらーっと並べて表示する方法です。

Amazonの商品ページのまんなかあたりにある
「この商品を買った人はこんな商品も買っています」
に似たインターフェイスです。

細かい方法はこちらのページに書かれています。
Link:jQueryで作る“Amazon風”インターフェイス(ASCII.jp)
ここにも書かれているようにjQueryライブラリ本体が必要です。

あとはオリジナルスクリプト。jCarouselがベースになっています。 一応、連載を見よう見まねで試してみましたが、
ほぼこの通りで問題なかったです。
ただ、このままだと見た目が思い通りにならないので、
作品例のページを参照し、CSSを編集する必要があります。
あとは矢印ボタンの画像を準備しないといけません。

追加するcssは以下の4つ
#jqCarousel(全体)
.jqCarouselPrev(←ボタン)
.jqCarouselClipArea(画像のエリア)
.jqCarouselNext(→ボタン)
↓一応、サンプルです。

#jqCarousel {
height:120px;
追加→width: 605px;
}
.jqCarouselPrev {
left:0;
position:relative;
top:40px;
}
.jqCarouselClipArea {
clip:rect(0px, 575px, 64px, 24px);
→訂正: clip: rect(0px 550px 64px 24px);
margin:0;
padding:0;
position:absolute;
width: 10000px;
}

.jqCarouselNext {
left:550px;
position:relative;
top:40px;
}

設置するサイトで適宜調節してください。

ちなみに、実際に画像が見えるエリアは
clipで指定されているエリアです。
.jqCarouselClipAreaのwidthは適当です。
画像が2列になってしまうとうまく表示されなかったので、一列に並ぶように大きくしただけです。
同じような感じでFlickerの画像の呼び出しや、ギャラリーにも使えそうです。
ちょっと最近jQueryが楽しくなってきました。

プログラミング、勉強してみようかなぁと思う今日この頃です。
2009年2月20日追記:一部追加・訂正しました。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です