jCarouselとColorBoxの組み合わせに

質問

jCarouselとColorBoxの組み合わせについて。
jCarouselを無限ループにするとColorBoxの合計画像数が増えてしまいます。

無限ループ【wrap: circular】ではなく、「【wrap: both】最初または最後のアイテムで巻き戻す。にすると、きちんと画像数の通りに表示されます。
画像数は５枚で、それに対する説明も５個です。それぞれに、href="#inline_content1～5をつけて、連動させています。
文章ではうまく表現できませんので、見本サイトを作成しました。
見本サイト↓
http://1neko.net/cat/

画像は５枚しかないのに、９枚あることになってます。どうも、表示枚数分（この場合は４枚）が足されているみたいです。
→画像数は５枚、表示枚数は４枚で９枚。
jcarousel側で、sizeを変えてみたり、表示枚数を変えてみたりしたのですが、駄目でした。

設置した際に参考にさせていただいたサイトは↓こちらです。
http://webhako.net/jquery/plugin-jcarousel/

とても困っています。どうぞよろしくお願い致します。

回答No.2

fujillin · ベストアンサー

No.1です。

＞画像は５枚しか無いのですが、スクロールしている６枚目をクリックすると、
＞「image 6 of 6」と表示され、～～
なるほど。　理解が足らずに、失礼いたしました。

いくつか方法はありそうな気がします。

1）正攻法で、どちらかのライブラリを解読して修正する。
　　（かなり面倒かも）
2）「image 6 of 6」の表示をやめる。
　　（確認していませんが、CSSでなんとかなりませんか？）
3）ソースを見ると拡大用のソースを非表示で別に用意しているようなので、
　　colcorboxはそちらで動作するようにしておいて、jCarouselとcolorboxを繋ぐ
　　スクリプトだけ追加で作成する。
　　（若干効率は悪いですが、一番簡単そう）

例えば3）の方法だと、<ul id="mycarousel">からcolorboxをはずしておいて、別に
$("#mycarousel").click(function(evt){
　var t = evt.target;
　if(t.nodeName != "IMG") return;
　var indx = $(t).parents("li:first").attr("jcarouselindex");
});
みたいなことで、クリックされたli要素にjCarouselが付しているインデックスを取得できます。でもこのインデックスは、開始が1からで、際限なく大きくなっていくみたいですね。
実は、この（↑）インデックスの処理からすると、No.1で私が想像していた回答とは違うことをやっているみたい。どうやら、スライドする度に要素の追加と削除を繰り返しているようですね。
それなので、現状の「n of 9」nの値は、必ずしも想像した値ではなく、違う値になっている可能性があります。

それはともかくとして、得られたインデックス値をそのまま使わずに、この値から画像数での剰余を求めてあげればノーマルなインデックスに変換可能かと思います。（正確には-1してから）
この数値をもとに、改めてcolorboxの要素をクリックするなり表示するなりしてあげれば、ご質問の目的は達せそうな気がしますが…

回答No.1

fujillin

＞とても困っています。
何に困っているのかが文章からは読取れませんが、一度に4枚の画像を表示しながら循環してスライドさせようとするなら、要素を表示枚数分後ろに加えておくのが簡単なので、jCarouselもそのような方法をとっているだけではないでしょうか？
（元画像が5枚なら9枚、10枚なら14枚という関係）

LIをfloatさせておいて、横に長くしたUL全体ををスライドさせているイメージだと思います。
もとの枚数だけで実現しようとすると、最後の画像が右端にあって左にスライドさせる時に、最初の要素を右側に移動させてからスライドするといったように、スライドする度に要素を前後に移動しなければなりません。
それよりも初期設定で、表示枚数分だけ後ろに付け加えて長くしておいて、あとは表示位置を調整するだけで実現する方法をとっているのだと想像します。
多分、ほとんどの循環するスライドは同様の方法をとっているのではないでしょうか？

枚数を増やしたくなければ、上述のように、都度要素を移動させながらスライドさせるような方法でも実現可能かと思いますが、そのようなものの必要性があまり感じられませんので、ライブラリとしては作られていないのではないかと想像します。
どうしてもそのようにしたければ、探しているよりは自作した方が結果的に早いのではないでしょうか。

＞jcarousel側で、sizeを変えてみたり、表示枚数を変えてみたりしたのですが、駄目でした。
jCarouselそのものをよく知りませんが、一度に表示する枚数を1枚とかにすれば、追加される画像は1枚になると想像しますけれど…？

補足

言葉足らずで大変申し訳ありません。
スクロールしている画像をクリックすると、画像の内容（？）がポップアップされる様にしているのですが、そのときの表示枚数が載せている画像の数と合わないんです。
画像は５枚しか無いのですが、スクロールしている６枚目をクリックすると、「image 6 of 6」と表示され、どんどん数が合わなくなってしまいます。
無限ループをやめると、正確な数字になります。無限ループしている画像のどこをクリックしても「image ★ of 5」としたいんですが、どうしたらいいのかがわからなくて、こちらで質問させていただきました。
ご教示いただけるのであれば、大変助かります。