【500ポイント】JavaScriptについての質問です。
添付図「A」をご参照ください。
左側にある01〜06というアイコンをクリックすると右側のみどりの部分にそれぞれに対応した画像が表示されるページに飛ぶようにしたいです。ただ、左側のアイコンリストは06までだけではなく今のところ15まであります。（今後もっと増えていきます。）なので、その上と下にある小さな▲▼をクリックすると画面には6コマ分しか見えていない状態で、1コマづつ順送りされていくようにしたいのです。（出来ればパッと順送りされるのではなく、ニュルっとした動きがいいです。）
更に（添付図「B」をご参照ください。）例えば上から3コマ目に07がある状態で07をクリックし、07に対応した画像が表示されるページに飛んだ場合、左側のアイコンリストの07はクリックした時と同じく上から3コマ目に位置していて欲しいのですが、もしそれが難しければ添付図「C」のように、ページ移動時には、必ず選択されたアイコンが一番上に来ていてもやむを得ないと思っています。
このようなサンプルか、コードを教えて頂ければ嬉しいです。
知恵をお願いします！！
ドンピシャな回答を頂ければ500ポイント進呈させて頂きます。
No.3
1504
493
500pt
ドンピシャな回答にしたいのですが、仕様がよくわからないのでキビシイですね。
この質問の設定でコメント欄を有効にして補足するといいですよ。
一番簡単な方法は、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>
No.1
1314393
10pt
左右が逆ですが、下記がイメージに近いのではないでしょうか。
http://www.shinbo.org/archives/2105
このあたりはシンプルなものから複雑なものまで、いろいろな方法が乱立しているものですから、
うまくサンプルを見つけられると、簡単に希望するデザインを実現できると思います。
今回の質問とは関係ない内容ですが、下記のようないろいろなサンプルを置いてあるサイトを
いくつか覚えておくと便利だと思います。
http://www.css-lecture.com/log/javascript/
http://www7b.biglobe.ne.jp/~hmkuukan/hmpgakou/gako.html
不明な点は捕捉しますので、下記の「この質問・回答へのコメント」を有効にしておいてください。
No.2
1099132
10pt
ここで配布されているスクリプトをカスタマイズしてはどうでしょう？
左右の位置をかえるのも簡単です。
http://www.electricprism.com/aeron/slideshow/example5.html
サムネイル縦表示のサンプル例
スクリプトはここで配布されてます。
ありがとうございます。
No.3
1504493
ここでベストアンサー
500pt
ドンピシャな回答にしたいのですが、仕様がよくわからないのでキビシイですね。
この質問の設定でコメント欄を有効にして補足するといいですよ。
一番簡単な方法は、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>
Cherenkov
2011/04/12 02:43:22
1
4
2
MIHO0206
ありがとうございます。