人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JQeryを探しています。

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

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

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


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

●質問者: tetlis
●カテゴリ:インターネット ウェブ制作
✍キーワード:border URL のし クリック サムネイル
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

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

無理やり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

◎質問者からの返答

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

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

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ