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

【Cherenkovさんへ】JavaScriptについての質問です。
以前、質問したMIHO0206です。
http://q.hatena.ne.jp/1302436359
先日、ご回答頂いたサンプルでやってみたのですが、私の勘違いで理想の形とちょっと違っていました。。。(素人なのですみません。。。)
うまく伝えられていなくてすみません。。。

理想の形は、
・左側のアイコンリストはクリックした状態をページジャンプ時にもキープ(例えば上から3つめをクリックした場合、ページジャンプ時にも上から3つめが光っている)
・今、右側がiframe になっているので、ページジャンプ時にURLが変わりません。各アイコンをクリックした時は、URLはそれぞれのページで変わるようにしたい。

です。
ちゃんと理想の状態をお伝え出来ていずにお手数をお掛けしますが、ご検討頂ければ幸いです!!

よろしくお願いします!


●質問者: MIHO0206
●カテゴリ:ウェブ制作
✍キーワード:JavaScript URL すみません アイコン キー
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

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

どこのページにジャンプしたのか、カルーセルは何番目かの情報をURLパラメータで渡す方法で作ってみました。

https://github.com/cherenkov/q.hatena.ne.jp-1303270512

上の方にあるダウンロードボタンから落としてください。


<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;
}

#mycarousel li a img {
 border: 3px solid transparent;
}

#mycarousel li a.selected img {
 border: 3px solid red;
}
</style>
<script>
$(function() {
 if (location.search) {
 var first = parseInt(/f=(\d+)/.exec(location.search)[1]);
 var select = parseInt(/s=(\d+)/.exec(location.search)[1]);
 }
 
 $('#mycarousel').jcarousel({
 vertical: true,
 scroll: 1,
 start: first
 });
 
 if (first) {
 $('.jcarousel-item a').eq(select).addClass('selected');
 }
 
 //この部分は仕様に合わせて変える
 $('.jcarousel-item a').click(function(e) {
 e.preventDefault();
 var first = $('#mycarousel').data('jcarousel').first;
 var select = $('#mycarousel li a').index(this);
 location.href = this.href + '?f=' + first + '&s=' + select;
 });
});
</script>
</head>
<body>
<div id="container">
<div id="side">
<ul id="mycarousel" class="jcarousel-skin-tango">
 <li><a href="a.html"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="b.html"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="c.html"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="d.html"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="e.html"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="f.html"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="g.html"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="h.html"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="i.html"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><a href="j.html"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></a></li>
</ul>
</div>

<!-- コンテンツ -->
<div id="view">
a
</div>
</body>
</html>
◎質問者からの返答

Cherenkovさん

ありがとうございます!

勝手に指名してしまってすみません。。。(こんなのアリか分からないのですが。。。)

前の質問にコメントしても、Cherenkovさんに届かないだろうと思って、新しい質問を立ててみました。

見てくれてよかった。。。

で、早速ありがとうございます!

これならいけそうな気がします!

ちょっと試してみてからまた、お返事しますね!

関連質問


●質問をもっと探す●



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