【Cherenkovさんへ】JavaScriptについての質問です。

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

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

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

よろしくお願いします!

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/04/20 12:35:13
  • 終了:2011/04/20 21:01:46

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/04/20 18:36:59

ポイント100pt

どこのページにジャンプしたのか、カルーセルは何番目かの情報を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>
id:MIHO0206

Cherenkovさん

ありがとうございます!

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

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

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

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

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

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

2011/04/20 20:12:24
  • id:Cherenkov
    自分が回答した質問にコメントがあれば通知する設定にしているので届きますよ。
    (上のメニューの設定で確認できる)


    id:MIHO0206
    または、id記法を使えば任意のはてなユーザにメッセージを送ることが出来ます。
    例「id:はてなID」
    http://d.hatena.ne.jp/keyword/ID%A5%B3%A1%BC%A5%EB
  • id:MIHO0206
    なるほど!

    そうだったんですねっ!

    では、一旦この質問は閉めます〜
  • id:MIHO0206
    Cherenkovさん

    こんにちは。
    Cherenkovさんはフラッシュに詳しいでしょうか?
  • id:Cherenkov
    詳しくないですが、ActionScriptはJavaScriptに近いので簡単なことでしたらサポート出来るかと思います。
    どんなことでしょうか。
  • id:MIHO0206
    以前、はてなで質問して、お答えを頂いたのですが、フラッシュの知識が皆無に等しいので、回答を頂いたのですが、Actionscriptをどこに行えばいいのかが分かりません。。。

    http://q.hatena.ne.jp/1302503257

    リンクが古いので再度アップします。

    http://firestorage.jp/download/fbbee2375105d148038940f1c102a4e174681c0d


    いつも甘えてばかりですみません。。。
  • id:Cherenkov
    http://www.1art.jp/flash9/chapter/109/

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

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

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

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