jqueryを使用した画像スクロールの複数設置

質問

こちら
http://flowplayer.org/tools/demos/scrollable/index.htm
のサンプルを参考に
画像スクロールを同一ページに複数設置しようとしたところ上手く動作してくれません。

同一ページに複数設置するにはどのようにカスタマイズすればよいのでしょうか。
またjavascript とcssの周辺の知識が浅いため、どこに着眼をおけば良いのかわかりません。
どこに着眼点をおいて調べると、上記問題が解決できるかも知りたいです。

以上よろしくお願いいたします

回答No.2

sanlouis · ベストアンサー

こんにちは！

動作確認してないですが、jquery toolsに複数設置の方法が書いてあるのでそれを参考にしました。

一つ目スタート
<div>
<a class="next"/>
<div class="scrollable">
...
</div>
<a class="prev"/>
</div>
一つ目エンド

二つ目スタート
<div>
<a class="next"/>
<div class="scrollable">
...
</div>
<a class="prev"/>
</div>
二つ目エンド

コード省略して書いていますが、nextやprevを含めた上でブロックで囲んであげて、
それをまるっと別エリアに置いてあげればたぶん大丈夫じゃないかと思います。
＊未検証ですのでご了承ください

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

ここに複数設置について書かれてありますので、参考にしてください！

お礼

ありがとうございます。
おっしゃるとおり、ブロックで囲んだだけで
2つのスクロールが問題なく動作しました。

回答No.1

yyr446

中身を全然見てないけど、
↓複数インスタンスしちゃえばよくない

$(function() {
　// initialize scrollable
　$(".scrollable1").scrollable();
　$(".scrollable2").scrollable();
　$(".scrollable3").scrollable();
});

HTMLマークアップは
<div class="scrollable1">
　<div class="items">
　　<div>
　　　<img ....>
　　　<img ....>
　　　<img ....>
　　</div>
　</div>
　　<div>
　　　<img ....>
　　　<img ....>
　　　<img ....>
　　</div>
</div>
<div class="scrollable2">
　<div class="items">
　　<div>
　　　<img ....>
　　　<img ....>
　　　<img ....>
　　</div>
　</div>
　　<div>
　　　<img ....>
　　　<img ....>
　　　<img ....>
　　</div>
</div>
<div class="scrollable3">
　<div class="items">
　　<div>
　　　<img ....>
　　　<img ....>
　　　<img ....>
　　</div>
　</div>
　　<div>
　　　<img ....>
　　　<img ....>
　　　<img ....>
　　</div>
</div>