1302436359 【500ポイント】JavaScriptについての質問です。

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/04/10 20:52:42
  • 終了:2011/04/17 11:43:28

ベストアンサー

id:Cherenkov No.3

Cherenkov回答回数1503ベストアンサー獲得回数4932011/04/11 07:57:14

ポイント500pt

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

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

  • 本当にページに飛んでいいのか(ページを移動する)
  • iframeで表示すればいいのか
  • 単純にリストの横に画像を表示すればいいのか(iframeを使わない)。このタイプのプラグインが沢山ある。

一番簡単な方法は、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>

その他の回答(2件)

id:Mook No.1

Mook回答回数1312ベストアンサー獲得回数3912011/04/10 22:05:56

ポイント10pt

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

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


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

id:MIHO0206

ありがとうございます。

2011/04/16 21:31:01
id:taroe No.2

taroe回答回数1099ベストアンサー獲得回数1322011/04/10 22:29:35

ポイント10pt

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

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

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

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



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

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

id:MIHO0206

ありがとうございます。

2011/04/16 21:31:08
id:Cherenkov No.3

Cherenkov回答回数1503ベストアンサー獲得回数4932011/04/11 07:57:14ここでベストアンサー

ポイント500pt

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

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

  • 本当にページに飛んでいいのか(ページを移動する)
  • iframeで表示すればいいのか
  • 単純にリストの横に画像を表示すればいいのか(iframeを使わない)。このタイプのプラグインが沢山ある。

一番簡単な方法は、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>
  • id:Cherenkov
    気に入らない点や質問はないのでしょうか?
  • id:MIHO0206
    Cherenkovさん

    回答ありがとうございます!
    返信が遅くなって大変失礼しました。。。
    ちょっと仕事が立てこんでしまいまして。。。

    お送り頂いたものはかなりイメージに近いです!!
    ありがとうございます。

    欲をいうと右側の画象は、ページにジャンプした状態で表示させたいです。
    またその時に、左側のリストが、クリック時の状態を保持(クリックした時にサムネイルは色が変わるようにしたく、例えば、上から2番目のサムネイルをクリックした場合、ページジャンプ時にも上から2番目のサムネイルに色が付いている状態になっている)していてくれればドンピシャのイメージです。

    あとポイントをお渡ししたいのですが、「はてな」利用が初めての為、よく要領が分かっていません。。。
    調べて必ずお渡ししますので、少々おまちください。。。
    ごめんなさい。。。







  • id:Cherenkov
    iframeでいいなら
    http://jsfiddle.net/kW8CT/
    こんな感じでしょうか?
  • id:MIHO0206
    Cherenkovさん

    早々にありがとうございます!!

    ドンピシャです!
    助かりました。

    これで、質問を締め切りますね。

    本当にありがとうございました!!

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

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

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

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