![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
jCarouselとColorBoxの組み合わせについて。
jCarouselを無限ループにするとColorBoxの合計画像数が増えてしまいます。
無限ループ【wrap: circular】ではなく、「【wrap: both】最初または最後のアイテムで巻き戻す。にすると、きちんと画像数の通りに表示されます。
画像数は5枚で、それに対する説明も5個です。それぞれに、href="#inline_content1~5をつけて、連動させています。
文章ではうまく表現できませんので、見本サイトを作成しました。
見本サイト↓
http://1neko.net/cat/
画像は5枚しかないのに、9枚あることになってます。どうも、表示枚数分(この場合は4枚)が足されているみたいです。
→画像数は5枚、表示枚数は4枚で9枚。
jcarousel側で、sizeを変えてみたり、表示枚数を変えてみたりしたのですが、駄目でした。
設置した際に参考にさせていただいたサイトは↓こちらです。
http://webhako.net/jquery/plugin-jcarousel/
とても困っています。どうぞよろしくお願い致します。
No.2ベストアンサー
- 回答日時:
No.1です。
>画像は5枚しか無いのですが、スクロールしている6枚目をクリックすると、
>「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
- 回答日時:
>とても困っています。
何に困っているのかが文章からは読取れませんが、一度に4枚の画像を表示しながら循環してスライドさせようとするなら、要素を表示枚数分後ろに加えておくのが簡単なので、jCarouselもそのような方法をとっているだけではないでしょうか?
(元画像が5枚なら9枚、10枚なら14枚という関係)
LIをfloatさせておいて、横に長くしたUL全体ををスライドさせているイメージだと思います。
もとの枚数だけで実現しようとすると、最後の画像が右端にあって左にスライドさせる時に、最初の要素を右側に移動させてからスライドするといったように、スライドする度に要素を前後に移動しなければなりません。
それよりも初期設定で、表示枚数分だけ後ろに付け加えて長くしておいて、あとは表示位置を調整するだけで実現する方法をとっているのだと想像します。
多分、ほとんどの循環するスライドは同様の方法をとっているのではないでしょうか?
枚数を増やしたくなければ、上述のように、都度要素を移動させながらスライドさせるような方法でも実現可能かと思いますが、そのようなものの必要性があまり感じられませんので、ライブラリとしては作られていないのではないかと想像します。
どうしてもそのようにしたければ、探しているよりは自作した方が結果的に早いのではないでしょうか。
>jcarousel側で、sizeを変えてみたり、表示枚数を変えてみたりしたのですが、駄目でした。
jCarouselそのものをよく知りませんが、一度に表示する枚数を1枚とかにすれば、追加される画像は1枚になると想像しますけれど…?
この回答への補足
言葉足らずで大変申し訳ありません。
スクロールしている画像をクリックすると、画像の内容(?)がポップアップされる様にしているのですが、そのときの表示枚数が載せている画像の数と合わないんです。
画像は5枚しか無いのですが、スクロールしている6枚目をクリックすると、「image 6 of 6」と表示され、どんどん数が合わなくなってしまいます。
無限ループをやめると、正確な数字になります。無限ループしている画像のどこをクリックしても「image ★ of 5」としたいんですが、どうしたらいいのかがわからなくて、こちらで質問させていただきました。
ご教示いただけるのであれば、大変助かります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- CPU・メモリ・マザーボード メモリが使用可能にならない 3 2022/08/13 17:13
- 数学 フーリエ変換に関して、質問があります。 画像の一枚目を2枚目の赤い下線部の式にするにはどうすれば良い 4 2022/09/05 06:11
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- Instagram インスタの画像を複数枚投稿出来るものと出来ないものがある問題についてどなたか教えて下さい。 インスタ 4 2022/06/07 13:53
- お酒・アルコール ビールとお酒の強さについて質問です。 1 2022/06/26 14:49
- その他(IT・Webサービス) VBAを使って表を作成したいです 1 2022/06/08 21:20
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像をクリックしてその地点の...
-
JavaScriptとチェックボックス...
-
画像をフォルダに入れれば表示...
-
textareaに画像を表示したい
-
ボタンをクリックした時に、キ...
-
USEMAPでの指定区域にマウスオ...
-
jCarouselとColorBoxの組み合わ...
-
【java】背景画像を一定時間で...
-
画像のランダム表示が遅い?
-
Javascriptで指定した日付と時...
-
スワップイメージが上手く動作...
-
【スマホ】画像ボタンを押した...
-
ちょっと変わったスライドショ...
-
HTMLで条件分岐はできますか?
-
skitter(jquery)での初期表示画像
-
曜日と時間を指定して表示画像...
-
小窓について教えて下さい。
-
画像と説明文を別データで作りたい
-
Gifアニメ、最後のコマに行った...
-
MAX関数を使ってからLEFT JOIN...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
透過pngの透明部分以外をクリッ...
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックすると複数...
-
Javascriptで指定した日付と時...
-
1枚の画像をクリックして複数の...
-
ボタンをクリックした時に、キ...
-
javascriptで毎月替わる画像
-
オンマウスで、画像切り替え+...
-
【java】背景画像を一定時間で...
-
画像の重なりの順序を代える方...
-
画像がプルプルふるえるんです。
-
jQueryスライドショー画像への...
-
HTMLで条件分岐はできますか?
-
JavaScriptとチェックボックス...
-
WEBページ立ち上げ時に1回のみ...
-
中心を軸にくるくる回るjQuery ...
-
プルダウンの位置がwin/macでず...
-
bxsliderにて読み込み後に内容...
おすすめ情報