Jcarousel　複数設置について

前へ 次へ
このQ&Aのポイント
  • jCarouselとThickbox 3を使って複数の商品をHTMLに表示したいが方法がわからない。
  • Aシリーズ、Bシリーズ、Cシリーズの商品を同一のHTMLに複数表示させたい。
  • jCarouselとThickbox 3のサンプルコードが提供されているが、商品のシリーズごとに表示させる方法がわからない。
回答を見る
  • ベストアンサー

Jcarousel　複数設置

http://sorgalla.com/jcarousel/の下から２番目のjCarousel and Thickbox 3についてです。 試行錯誤して何とか１つはHTMLに表示できました。 が、しかし、商品のシリーズごとに同一のHTMLに複数表示させたいのですが やり方がわかりません。 ・Aシリーズ ・Bシリーズ ・Cシリーズ みたいな感じです。 よろしくお願いします。 以下、ソースです。 // Set thickbox loading image tb_pathToImage = "images/loading-thickbox.gif"; var mycarousel_itemList = [ {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"}, {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"}, {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"}, {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"}, {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"}, {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"}, {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"}, {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"}, {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"}, {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"} ]; function mycarousel_itemLoadCallback(carousel, state) { for (var i = carousel.first; i <= carousel.last; i++) { if (carousel.has(i)) { continue; } if (i > mycarousel_itemList.length) { break; } // Create an object from HTML var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0); // Apply thickbox tb_init(item); carousel.add(i, item); } }; /** * Item html creation helper. */ function mycarousel_getItemHTML(item) { var url_m = item.url.replace(/_s.jpg/g, '_m.jpg'); return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>'; }; jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ size: mycarousel_itemList.length, itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback} }); }); </script> </head> <body> <div id="wrap"> <h1>jCarousel</h1> <h2>Riding carousels with jQuery</h2> <h3>jCarousel and Thickbox 3</h3> <p> Example of jCarousel working together with <a href="http://jquery.com/demo/thickbox/">Thickbox 3</a>. </p> <ul id="mycarousel" class="jcarousel-skin-ie7"> <!-- The content will be dynamically loaded in here --> </ul> </div>

  • AJAX
  • 回答数1
  • ありがとう数4

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.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とスクリプトの両方を変更しなればならないので面倒ですね。 また、別々に設定されているので、要素の数が合わないときを考慮した処理なども作成しておく必要がありますので、あまりお勧めとは思えません。 （自由度は一番高いかも知れませんが…）

e-sonesone
質問者

お礼

回答ありがとうございます。 <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> の記述形式だったのでこちらにして形になりました。 (確かにメンテナンスを考えると手間ですが頻繁にある訳ではないので) 詳しいご説明、ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. AJAX

関連するQ&A

  • jqueryのプラグインのjquery.jcarousel.jsについ

    jqueryのプラグインのjquery.jcarousel.jsについて http://sorgalla.com/projects/jcarousel/examples/static_auto.html jquery.jcarousel.jsはデフォルトで<ul>の中の<li>要素をスライドさせていますが、 これを<div>の中の<dl>に変更できればと考えております。 なんどいじってみてもエラーで停止してしまいます。 どなたかご教授ください。

    • ベストアンサー
    • AJAX
  • JQuery　Agile Carouselの設置に関して

    サイトにAgile Carousel(参考URL:http://code.google.com/p/agile-carousel/)を取り込みたく、 ダウンロードし設定したのですが、どう設定しても、うまく画像が取り込まれません。 ファイルは jquery.agile_carousel-beta.2.0.zip jquery.agile_carousel-beta.1.1.zip jquery.agile_carousel-alpha_21.zip とダウンロードし、その中のhtmlファイルで試してみましたが、どれも表示されませんでした。 また画像ファイルや保存先ディレクトリのパーミッションを755、777にもしてみたのですが、表示されず・・・。 googleなどで検索してみたものの、英語サイトかつ情報量が少ない為、お手上げ状態です。 どなたか、ご存知の方がおられましたら、是非ご指導のほどよろしくお願い致します。

  • 以下の画像のユニフォームやウインドブレーカーのエメラルドグリーン部分の本当のRGB値を教えて下さい。

    以下の画像のユニフォームやウインドブレーカーのエメラルドグリーン部分の本当のRGB値を教えて下さい。 ユニフォーム http://www.ebbets.com/images/large/hai61r.jpg http://farm4.static.flickr.com/3561/3825594916_74d8436c48_o.jpg http://farm3.static.flickr.com/2478/3825594882_606ff63ac8_o.jpg http://farm3.static.flickr.com/2630/3825594828_46f2693622_o.jpg http://farm4.static.flickr.com/3511/3824793441_de954bb45d_o.jpg http://farm3.static.flickr.com/2503/3825594764_ac0ab79731_o.jpg http://farm3.static.flickr.com/2442/3824793377_50b44abdf4_o.jpg ウインドブレーカー http://blog-imgs-31.fc2.com/l/u/n/lunkerrush/islanders1.jpg http://blog-imgs-31.fc2.com/l/u/n/lunkerrush/islanders2.jpg 「GetRGB」というフリーソフトを用いても、実際の画像には影やブロックノイズ等の影響で少しポインタを動かしただけで色んな値が出てしまいます。 御存知の方は御回答を宜しく御願い致します。

  • IE6,IE7でThickBox3の画像がうまく表示されません。

    IE6,IE7でThickBox3の画像がうまく表示されません。 htmlへの記述は以下のような感じなのですが、Firefoxでは問題なく表示されるのですが IE6、IE7だと、画像だけ表示されなかったり、同じ画像が上下に２枚表示されたりします。 そしてたまに上手く表示されます。 検索するとIEで真中に表示されないというのがありましたが、それとは原因が違うようです。 どなたかご存知の方はいませんでしょうか？ 宜しくお願い致します。 <ul> <li><a href="../img/photo/flower/001.jpg" class="thickbox" rel="flower" title="花"><img src="../img/photo/flower/001_s.jpg" alt="花" width="100" height="66" /></a></li> <li><a href="../img/photo/flower/002.jpg" class="thickbox" rel="flower" title="花"><img src="../img/photo/flower/002_s.jpg" alt="花" width="100" height="66" /></a></li> </ul>

    • ベストアンサー
    • HTML
  • Thickboxの設置方法について

    超初心者的な質問なのですがスミマセン。 ブログにThickboxをいうものを設置したいと思っています。 様々なサイトから情報を集めたのですが、どうも理解できないでおります。 段取りとして、http://jquery.com/demo/thickbox/　よりファイル4つをＤＬしたのち・・・ この4つのファイルをどこへどう、アップすればよいのか？という質問なのです（ホント初心者なのでスミマセン） ブログにアップできるファイル形式は、jpgとgifなどのいわゆる画像系しか出来ません。ということは設置は無理なのでしょうか？ それと、もう一つだけお願いします。 ブログにlightboxを設置した際に、テスト運用のブログでは完全に動作していましたが、閲覧用ブログではＩＥブラウザそのものが開けませんでした。2つのブログは全く同じ形式で、同じものを貼り付けたんですけど。 こんなことってあるんですね。 lightboxは知人にやってもらいましたので、ファイルのアップとかは他人任せでした。 もしlightboxが可能ならそれを使いたいのですけど、無理ならThickboxにと思いまして・・ それでもダメならあきらめるしかないのかな・・・（涙

  • thickboxのグループ化がうまくいかない原因は？

    はじめまして。 thickboxと格闘しています・・・ グループ化しなければ、ふつうに表示できるのですが、 グループ化したとたんに、見られなくなります。 これは、なぜなのでしょうか？？？ 特別変わったことは何もしていません。 バッティングするようなjsも、置いてません。 javascriptのことはほとんどわかりませんので、 簡単に教えていただけるととても嬉しいです。 ちなみに・・・ index.html(このページで表示させたい） jquery.js thickbox.css thickbox.js 001.jpg 002.jpg 003.jpg これらをすべて同じレベルに配置しています。 ↓index.htmlは、こんな感じです。 -------------------------------------------------- ～略～ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>サンプル</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link href="thickbox.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <a href="001.jpg" class="thickbox" rel="test" >画像1</a><br> <a href="002.jpg" class="thickbox" rel="test" >画像2</a><br> <a href="003.jpg" class="thickbox" rel="test" >画像3</a> </body> ～略～ -------------------------------------------------- 初歩的なことで申し訳ないのですが、宜しくお願いいたします。

  • ランダムなフェードインを作りたいです。

    jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル http://jsajax.com/articles/jQuerySimplestSlidesh … の画像を順番通りでなくランダム表示に修正したいです。 自分なりに考えて作ってみたのですが、正しく機能しませんでした。 どこをどのように修正すればランダムになるのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simplest jQuery Slideshow</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} .fadein { position:relative; height:332px; width:500px; } .fadein img { position:absolute; left:0; top:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. … <script type="text/javascript"> var imglist = new Array( "http://farm3.static.flickr.com/2610/4148988872_9 … "http://farm3.static.flickr.com/2597/4121218611_0 … "http://farm3.static.flickr.com/2531/4121218751_a … var select = Math.floor((Math.random() * 100)) % imglist.length; var t0 = "<img src='"+imglist[select]+"' border='0' >"; $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('t0').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> </head> <body> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_9 … alt="" /> <img src="http://farm3.static.flickr.com/2597/4121218611_0 … alt="" /> <img src="http://farm3.static.flickr.com/2531/4121218751_a … alt="" /> </div> </body> </html>

    • ベストアンサー
    • AJAX
  • IEとFirefoxで動きません。(画像表示機能)

    http://web.mac.com/tippex.sfpdm.0227/SHINMIURA/still_life_2.html 画像をクリックすると同じページ内で次の写真を表示する機能をJavaScriptで作ってみました。　SafarとGoogle Chrome (両方ともMac)では正しく動作するのですが、IEとFirefox(Mac)では正しく作動しません。Windows版のFirefoxは試せる環境が無いので確認出来ていません。 JavaScriptに関して、一切の知識が無い状態で色々なサイトを見てかき集めたスクリプトで動作させてる状態です。 なお、サイト自体はiWebを使いHTMLスニペットにJavaScriptを貼りつけています。なので、HTML全体を自ら作っているわけではありあせん。 なお、画像はflickrをソースにしています。 下記が、HTMLスニペットに書き込んだ、スクリプトです。 よろしくお願いします。 <a href=javascript:parapara()> <img src=http://farm5.static.flickr.com/4060/4279758936_9d887a858a.jpg name=name border=0> <script language=javascript> <!-- if(navigator.appVersion.charAt(0) >=5) { var paraImg= new Array(); paraImg[0] = new Image(); paraImg[0].src = "http://farm5.static.flickr.com/4060/4279758936_9d887a858a.jpg"; paraImg[1] = new Image(); paraImg[1].src = "http://farm5.static.flickr.com/4068/4279758858_907a3d1047.jpg"; paraImg[2] = new Image(); paraImg[2].src = "http://farm5.static.flickr.com/4029/4279014977_9757c50436.jpg"; paraImg[3] = new Image(); paraImg[3].src = "http://farm5.static.flickr.com/4043/4279758682_e2b19578ba.jpg"; paraImg[4] = new Image(); paraImg[4].src = "http://farm5.static.flickr.com/4071/4279758616_9605cd0dec.jpg"; } var paraCount = 0; function parapara() { if(paraCount < paraImg.length-1) { paraCount++; } else { paraCount = 0; } document.images["name"].src = paraImg[paraCount].src; } //--> </script>

  • サイドの髪のカール

    高１の男子です★ http://farm2.static.flickr.com/1260/1292977986_88ae1777dc.jpg?v=0 ↑の堂本光一さんの、サイドの髪のカール(?)は どうすればできるのでしょうか?? ちょっと分かりずらいかもしれませんが、教えて下さい！

  • jQuery スライド（カルーセル）のカスタマイズ

    jQuery スライド（カルーセル）のカスタマイズで困っています。 http://slidesjs.com/ こちらのサイトのJqueryライブラリを使って、 常時3つ表示のスライドギャラリー（カルーセル）を作成したいと思っています。 サンプルの中に3つ表示のタイプが含まれているのですが、（/Slides/examples/Carousel/) スライドも3つ同時に動きます。この部分を1つずつ動かしたいと思いカスタマイズしていますが、 うまくいきません。 要件としては、下記です。 ・同時に3つ表示させたい ・スライドは１つずつ動かしたい ・きれいにループさせたい（最後と最初のアイテムをスムースに接続） ・「Prev」「Next」「pagination」はそのまま活かしたい ・「pagination」のボタンは現状、1つに対して3つのアイテムがスライドするが、１つに対して1つにしたい。 別のライブラリをベースにしたほうがよいでしょうか。 何分素人なので、どなたかご教授くださいませ。よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する