- ベストアンサー
Jcarousel 複数設置について
- jCarouselとThickbox 3を使って複数の商品をHTMLに表示したいが方法がわからない。
- Aシリーズ、Bシリーズ、Cシリーズの商品を同一のHTMLに複数表示させたい。
- jCarouselとThickbox 3のサンプルコードが提供されているが、商品のシリーズごとに表示させる方法がわからない。
- e-sonesone
- お礼率33% (1/3)
- AJAX
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ライブラリについては知りませんが、回答がないみたいなので… サムネイルと拡大画像の名前などに規則性があるのかないのか、キャプション表示があるのかないのかやthickboxでグルーピングをするのかなどによって方法が変わってくるとは思いますが… thickboxは基本的にリンク要素のhrefに拡大画像のアドレスを指定して、class="thickbox"を設定しておけば処理してくれるみたいです。 （グループ表示するのだと、rel属性の設定を使い分けるとかが必要） http://jquery.com/demo/thickbox/ なので、簡単なのはjCarouselだけのときのHTMLソースが ◆（1） <ul class="carousel"> <li><img alt="" src="A_s.jpg"></li> <li><img alt="" src="B_s.jpg"></li> <li><img alt="" src="C_s.jpg"></li> ・・・・・・・・・ </ul> だとすれば、 ◆（2） <ul class="carousel"> <li><a href="A_m.jpg" class="thickbox"><img alt="" src="A_s.jpg"></a></li> <li><a href="B_m.jpg" class="thickbox"><img alt="" src="B_s.jpg"></a></li> <li><a href="C_m.jpg" class="thickbox"><img alt="" src="C_s.jpg"></a></li> ・・・・・・・・・ </ul> のようにしておくだけで、個別に（拡大表示だけの）thickboxが適用可能となるようです。 このようなソースでも、jCarouselはそのまま処理してくれるので一番簡単かも。 ＞商品のシリーズごとに同一のHTMLに複数表示させたいのですが ＞やり方がわかりません。 jCarouselを複数設定するのはセレクタで複数の要素をセットするか、あるいは、オプションなどが異なる場合は分けてそれぞれ設定すれば良いだけのようです。 ご提示のサイトの「Static Examples」の一番下に、複数設置の例がでています。 http://sorgalla.com/projects/jcarousel/ サムネイルと拡大画像に規則性があるような場合（上例のような場合）は、スクリプトで◆（1）のソースHTMLから◆（2）のソースに自動変換することができるでしょう。 上の例で言えば $(".carousel li img").each(function(){ var src = this.src.replace(/_s.jpg$/,"_m.jpg"); $(this).wrap('<a href="' + src + '" class="thickbox"></a>'); }); のような方法で可能です。 jCarouselの設定の後でも大丈夫とは思いますが、jCarouselはいろいろHTMLの構造をいじっているみたいなので、先に変換しておいたほうが無難かも。 サムネイルと拡大画像に関連性がないものをスクリプトで設定したいのであれば、ご提示のスクリプトのように配列でデータを用意しておいて、同じように設定してゆくことになるかと思いますが、メンテナンスを考えると、変更があるたびにHTMLとスクリプトの両方を変更しなればならないので面倒ですね。 また、別々に設定されているので、要素の数が合わないときを考慮した処理なども作成しておく必要がありますので、あまりお勧めとは思えません。 （自由度は一番高いかも知れませんが…）
お礼
回答ありがとうございます。 <li><img alt="" src="A_s.jpg"></li> <li><img alt="" src="B_s.jpg"></li> <li><img alt="" src="C_s.jpg"></li> 上記ような記述だと何とか分かるのですが 私が試したサンプルは動的に読み込む形だったようなので 困ってました。 複数設置のサンプルは <li><img alt="" src="A_s.jpg"></li> <li><img alt="" src="B_s.jpg"></li> <li><img alt="" src="C_s.jpg"></li> の記述形式だったのでこちらにして形になりました。 (確かにメンテナンスを考えると手間ですが頻繁にある訳ではないので) 詳しいご説明、ありがとうございました。