こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

scrollable.jsのroop設定について

http://flowplayer.org/tools/scrollable/index.html

こちらのサイトのjquery.scrollable.jsに関しての質問です。
scrollable.jsを動かすページに
jquery.scrollable.min.js
jquery.mousewheel.js
を読み込ませています。

あとはhead部分に
<script type="text/javascript">
$(function() {
$("#scrollable").scrollable({
horizontal:true,
});
});
</script>
を記述しています。

html部分は
<div id="scrollable">

<div class="navi"></div>

<a class="prev"></a>
<div class="items">
<a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a>
<a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a>
<a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a>
</div>
<a class="next"></a>
</div>

簡単に記述してあります。(サイト記載の通り)
これで問題なく左右に動くのですが、
このitemsの部分をループさせるように設定したいのです。(15の隣に1、1の隣に15のように)
色々と調べて試してみましたが知識不足のためかうまく作動しません。
お力をお貸し頂ければと思い質問致しました。
できましたらお早い回答をよろしくお願い致します。

投稿日時 - 2011-04-11 17:05:23

QNo.6661053

すぐに回答ほしいです

質問者が選んだベストアンサー

#1です。

やっぱり circular: true ではないでしょうか?

最小限にしてみて、こんなので循環すると思いますけれど…?
(英語をちゃんと読むのは大仕事なので、かなり適当です)



* 面倒なのでクリックで次を表示の仕様にしています
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#scrollable { position:relative; overflow:hidden; width:195px; height:195px;}
#scrollable .items {position:absolute; width:4000px;}
#scrollable .items a {display:block; float:left; width:200px; height:200px; background-color:#ffc; border-right:1px solid #aaa;}
</style>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
<script type="text/javascript">
<!--
$(function() {
$("#scrollable").scrollable({ circular: true }).click(function(){
$(this).data("scrollable").next();
});
});
//-->
</script>
</head>

<body>
<div id="scrollable">
<div class="items">
<a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a>
<a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a>
<a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a>
</div>
</div>
</body>
</html>

投稿日時 - 2011-04-11 21:29:19

お礼

お礼が遅くなってしまって申し訳ありません。
迅速な対応をありがとうございました。
無事上記のソースで出来ました。
もう少し英文の読解力と、javascriptの知識を身に着けるよう努力致します。
ありがとうございました!

投稿日時 - 2011-04-21 12:58:01

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

#2です。

サイトの自動リンク機能のために、#2のソースのライブラリ読込みの<script>タグ部分がおかしくなってしまいました。
修正してお読みください。

投稿日時 - 2011-04-11 21:33:23

ANo.1

試してませんけれど、ご提示のサイトの説明部分に書いてあるような…

 http://flowplayer.org/tools/scrollable/index.html#configuration
英語が苦手なので斜め読みですが、この(↑)表でみると、オプションで
 circular: true
を設定してあげればよさそうな感じがしますけど。

投稿日時 - 2011-04-11 18:04:37

補足

迅速な回答ありがとうございます。
すみません、circular: trueは試してみたのですがオプションはどこに・どのような文法で記述するのかが分からず…といった感じでした。
ヘッダーに
<script type="text/javascript">
$(function() {
$("#scrollable").scrollable({
horizontal:true,
circular: true
});
この様に入れてみたのですが駄目でした。
申し訳ないです…。
});
</script>

投稿日時 - 2011-04-11 18:46:12

あなたにオススメの質問