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

【500ポイント】JavaScriptについての質問です。
添付図「A」をご参照ください。
左側にある01〜06というアイコンをクリックすると右側のみどりの部分にそれぞれに対応した画像が表示されるページに飛ぶようにしたいです。ただ、左側のアイコンリストは06までだけではなく今のところ15まであります。(今後もっと増えていきます。)なので、その上と下にある小さな▲▼をクリックすると画面には6コマ分しか見えていない状態で、1コマづつ順送りされていくようにしたいのです。(出来ればパッと順送りされるのではなく、ニュルっとした動きがいいです。)
更に(添付図「B」をご参照ください。)例えば上から3コマ目に07がある状態で07をクリックし、07に対応した画像が表示されるページに飛んだ場合、左側のアイコンリストの07はクリックした時と同じく上から3コマ目に位置していて欲しいのですが、もしそれが難しければ添付図「C」のように、ページ移動時には、必ず選択されたアイコンが一番上に来ていてもやむを得ないと思っています。
このようなサンプルか、コードを教えて頂ければ嬉しいです。
知恵をお願いします!!
ドンピシャな回答を頂ければ500ポイント進呈させて頂きます。

1302436359
●拡大する

●質問者: MIHO0206
●カテゴリ:ウェブ制作
✍キーワード:JavaScript 「A」 「C」 みどりの アイコン
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Mook
●10ポイント

左右が逆ですが、下記がイメージに近いのではないでしょうか。

http://www.shinbo.org/archives/2105


このあたりはシンプルなものから複雑なものまで、いろいろな方法が乱立しているものですから、

うまくサンプルを見つけられると、簡単に希望するデザインを実現できると思います。


今回の質問とは関係ない内容ですが、下記のようないろいろなサンプルを置いてあるサイトを

いくつか覚えておくと便利だと思います。

http://www.css-lecture.com/log/javascript/

http://www.skuare.net/

http://www7b.biglobe.ne.jp/~hmkuukan/hmpgakou/gako.html


不明な点は捕捉しますので、下記の「この質問・回答へのコメント」を有効にしておいてください。

◎質問者からの返答

ありがとうございます。


2 ● taroe
●10ポイント

ここで配布されているスクリプトをカスタマイズしてはどうでしょう?

左右の位置をかえるのも簡単です。

http://www.electricprism.com/aeron/slideshow/example5.html

サムネイル縦表示のサンプル例



スクリプトはここで配布されてます。

http://www.electricprism.com/aeron/slideshow/index.html

◎質問者からの返答

ありがとうございます。


3 ● Cherenkov
●500ポイント ベストアンサー

ドンピシャな回答にしたいのですが、仕様がよくわからないのでキビシイですね。

この質問の設定でコメント欄を有効にして補足するといいですよ。


一番簡単な方法は、jquery gallery slideshow で検索してイメージに合うギャラリー系プラグインを使うのがいいのですが、なかなか見つからないものです。

(プラグインを使うとサムネイル画像を用意しなくてもよかったり、ページ移動しなくてもその場で画像が表示できるなど管理が楽になったり閲覧しやすくなる)

なので今回は見た目と使いやすさを考えて、リスト部をjCarousel(画像リストプラグイン)で、表示部はAjaxで書き換えるデモを書いてみました。

demo: http://jsfiddle.net/CvSUB/


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />
<style type="text/css">
/* 6個表示されるように、skin.cssを上書き */
.jcarousel-skin-tango .jcarousel-container-vertical {
 height: 500px !important;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
 height: 100% !important;
 width: 100% !important;
}

#container {
 width: 950px;
}
#side {
 float: left;
}
#view {
 float: left;
 width: 700px;
}
</style>
<script>
$(function() {
 $('#mycarousel').jcarousel({
 vertical: true,
 scroll: 1
 });
 
 //この部分は仕様に合わせて変える
 $('.jcarousel-item a').click(function(e) {
 e.preventDefault();
 $('#view-img').attr('src', this.href.replace(/_s/,''));
 });
});
</script>
</head>
<body>
<div id="container">
<div id="side">
<ul id="mycarousel" class="jcarousel-skin-tango">
 <li><a href="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="http://static.flickr.com/77/199481108_4359e6b971_s.jpg"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="http://static.flickr.com/58/199481218_264ce20da0_s.jpg"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="http://static.flickr.com/70/229228324_08223b70fa_s.jpg"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></a></li>
</ul>
</div>
<div id="view">
<img id="view-img" src="http://static.flickr.com/66/199481236_dc98b5abb3.jpg" />
</div>
</body>
</html>
関連質問


●質問をもっと探す●



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