JQeryを探しています。


商品画像が複数枚あるとして、
それらのサムネイル画像がならんでいる上に
そのうち1枚の大きな画像を表示。

サムネイルをクリックするたびに、大きな画像をそれに切り替えるという物です。
できたら、評価のしっかりしている物、選択・表示しているサムネイルはborderで囲まれる物が良いです。

以下URLの商品紹介で使われているような物です。
http://www.earth1999-netshop.jp/fs/earth/cutandsewn/10103B40020
(トップページ http://www.earth1999-netshop.jp/


※同じ物を紹介していただいた場合は、最初に紹介してくださった方にポイントを差し上げます。
また、あまり使えなさそうな物を紹介いただいてもポイントは差し上げられないのでご了承ください。

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2010/11/20 11:01:40
  • 終了:2010/11/21 20:47:51

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922010/11/21 15:17:15

ポイント100pt

コメント欄が有効になっていないのでこちらに。

無理やりjQueryプラグインを使わなくても、その程度なら特に必要ないと思います。

デモ http://jsfiddle.net/pebtW/

<html>
<head>
<style>
.thum_list {
  padding: 0px;
}

.thum_list li{
  float: left;
  list-style: none;
  margin-right: 7px;
}

.thum_list img{
  width: 53px;
  cursor: pointer;
  border: solid 3px gray;
}

.thum_list img.active{
  width: 53px;
  cursor: pointer;
  border: solid 3px pink;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function() {
  $('.thum_list img').click(function() {
    $('.thum_list img').removeClass('active');
    $(this).addClass('active');
    $('.large').attr('src', this.src);
  });
});
</script>
</head>
<body>
<div>
<div class="thum">
<img class="large" src="http://fsimg.earth1999-netshop.jp/photos/10103B40020_1.jpg"/>
</div>
<ul class="thum_list">
<li>
<img src="http://fsimg.earth1999-netshop.jp/photos/10103B40020_1.jpg" class="active"/>
</li>
<li>
<img src="http://fsimg.earth1999-netshop.jp/photos/10103B40020_2.jpg" />
</li>
<li>
<img src="http://fsimg.earth1999-netshop.jp/photos/10103B40020_3.jpg" />
</li>
<li>
<img src="http://fsimg.earth1999-netshop.jp/photos/10103B40020_4.jpg" />
</li>
<li>
<img src="http://fsimg.earth1999-netshop.jp/photos/10103B40020_5.jpg" />
</li>
<li>
<img src="http://fsimg.earth1999-netshop.jp/photos/10103B40020_6.jpg" />
</li>
</ul>
</div>
</body>
</html>

もっと凝った演出をしたいのならjQuery lightBoxというプラグインがあります。沢山亜種があるので気に入った物を選ぶといいでしょう。

jQuery lightBox plugin 本家

Lightboxスクリプトいろいろ | DesignWalker

31 mind blowing collection of jQuery light box

id:tetlis

素晴らしいです、ありがとうございます。

「回答受付中にコメント・トランクバックを表示する」という設定ができることも、初めて知りました。

ありがとうございます。

2010/11/21 20:47:16

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません