• 締切済み

JQUERYについて

JQUERYについてです。 下のフォトスライダーですが、キャプションをバケットの中に入れても表示されません。 http://opiefoto.com/articles/photoslider よくみると、サンプルも表示されていません。 キャプションを表示するには、どうしたら表示できますか?

みんなの回答

  • dscripty
  • ベストアンサー率51% (166/325)
回答No.1

何かわからないけど勘違いしてるとおもう。 ページに書いてあるコードをコピーして貼り付けただけの HTML だけど、1番目と 3番目の画像のときにキャプションが表示されるよ。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <base href="http://opiefoto.com/articles/assets/slider/photoslider.html" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>photoslider.js test</title> <link rel="stylesheet" type="text/css" media="screen" href="photoslider.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="photoslider.js"></script> <script type="text/javascript"> $( function () { //change the 'baseURL' to reflect the host and or path to your images //FOTO.Slider.baseURL = 'http://example.com/path/'; FOTO.Slider.baseURL = ''; //set images by filling our bucket directly FOTO.Slider.bucket = { 'default': { 0: {'thumb': 't_0.jpg', 'main': '0.jpg', 'caption': 'Opie'}, 1: {'thumb': 't_1.jpg', 'main': '1.jpg'}, 2: {'thumb': 't_2.jpg', 'main': '2.jpg', 'caption': 'Trash the Dress'}, 3: {'thumb': 't_3.jpg', 'main': '3.jpg'} } }; FOTO.Slider.reload('default'); //enable the slideshow and build the controls FOTO.Slider.enableSlideshow('default'); //automatically play FOTO.Slider.play('default'); }); </script> </head> <body> <div class="photoslider" id="default"></div> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 複数のライブラリの使用について(jQuery)

    現在jQueryを使って、タブメニュー(http://25egg.com/sample/tabmenu/)とスライダ(http://bxslider.com/)を併用したものを開発しようと思っています。 つまりタブメニューを複数用意し、そのタブメニューの中にスライダをおくかんじです。 そしていざ作ってみたら、一応タブの中にスライダがでてきて予想通りの挙動を確認することができました。 しかし、一番目のタブ(一番最初に選択されるタブ)にスライダを設置した場合のみに限られ、一番目ではなく二番目のタブにスライダを設置したら、中身が空で表示されてしまいます。 うまく伝える事ができないので、実際にサンプルを以下にまとめました。 http://web.sfc.keio.ac.jp/~t11881tm/sample.zip index.html中のコメントアウト(タブの追加)をはずすとうまくうまく動いてくれません! よろしくお願いします!

  • マウスオーバー時にマウスを追尾するjQuery

    マウスオーバー時にマウスを追尾するjQueryを探しています。 下記サイトの上段少し下にあるコンテンツにカーソルを合わせると上からマウスが入るとキャプションが上から表示され、下へマウスが出ると下へキャプションが消えていきます。 http://life-is-tech.com このjQueryの名称はなんというのでしょうか。 検索しても出てこないためご回答お願い致します。

  • IE6で動かないjQueryはどのようにすれば?

    jQueryであるサイトを作っているのですが、IE6を使用した場合動かなくなってしまい困っております。 今更そんな古いブラウザをサポートしなければ良いのにと言われそうですが・・・IE6~9の混在環境のため困っております・・・比率は数%なのですが・・・ 使っているプラグインはcoda-sliderです。http://kevinbatdorf.github.com/codaslider/ これがどうしてもスライドできずかつパネルがすべて表示されてしまいます。 (ほぼサンプルどおりのソース) とりあえず一番上にあるパネルだけでも表示されるようになれば上出来なのですが・・・ 詳しい方教えていただけませんでしょうか?

  • 複数のjqueryを入れると動かなくなる

    今サイトを作っているのですが、スライダーと違うjqueryの相性が悪い(?)か自分の記載漏れで、埋め込みをした新しいjqueryは動きますが、スライダーが動かなくなってしまいました。 サイトです:http://blackartcard.com/ ヘッダー内は下記です。 <!--Scroll to Top--> <script src="http://blackartcard.com/backtop/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://blackartcard.com/backtop/scrolltopcontrol.js" type="text/javascript"></script> <!-- ======================================= スライダー ======================================= --> <link rel="stylesheet" href="http://blackartcard.com/slider/panning-slideshow.css"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://blackartcard.com/slider/jquery.easing.1.3.js"></script> <script src="http://blackartcard.com/slider/jquery.timer.js"></script> <script src="http://blackartcard.com/slider/image-rotator.js"></script> </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript"> $(document).ready(function(){ //マスオーバー時にキャンプション表示 $('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'135px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160}); }); }); </script> </head> 両方とも単体では稼働します。 初心者で大変申し訳ございませんがわかる方宜しくお願い致します。

  • jQuery slider2のページアイコン

    小生、ウェブサイト制作経験はアリながらもJavascriptに関しては全くの素人です。 既成のJavascriptプログラムの中でスライドショー向けのjQuery slider2をダウンロードし、 ウェブサイトに適応してみました。 概ね思った通りに作動するものの、スライダー部分の右下に表示されページアイコン(class="jquery-slider-page"として作成されている部分?)が、現在表示している部分に相当するアイコンをクリックすると、現在表示している画像を進行方向に流してしまい、背景が表示されるようになっています。 なおかつ、背景が表示された状態でもう一度同じアイコンをクリックすると、消えているはずの現在ページが一瞬表示されるものの、すぐに進行方向へ流してしまうというおかしな動作をします。 もともと期待されていた動作ではないと思うのですが、ダウンロードしてきたものをそのまま使ってこのような動作になってしまっていました。 不得手ながら中身を読み取ってみたところ、現在表示しているページのページアイコンをclass="jquery-slider-page"からclass="jquery-slider-page-current"に書き換えることで、アイコンの表示を変更しているようなので、一時的にclass="jquery-slider-page-current"のクリックを不可にすれば解決するのかなとは思うのですが、何かよい方法はないでしょうか。 使用しているjsは下記のとおりです。 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js jquery.slider.min.js(http://wex.im/javascript/jquery-slider2にて公開されているファイルをダウンロードして使用) また、専用のCSSも特に書き換えなどせずに読み込ませて使用しています。 他にもjs併用はしていますが、紹介サイトでも同様の動作をしていたので、他のjsによる干渉などではない様です。 よろしくお願いします。

  • jQueryの読み込みについて

    初めまして、制作をしておりまして、 http://card.benrista.com/ 上記のサイトの上にある、sliderのjqueryがありますが、素敵だなと思いまして、 それを私のサイトでも導入したいと思いまして、導入してみました。 (アフィリエイトサイトでは無いですが。。) 【やりたい事・質問】 しかし、スライダーのjqueryは上手く機能するのですが、 上記のサイトを開いた瞬間にスライダーの下の小さいサムネイル部分の gifアニメーションが上手く動きません; http://card.benrista.com/wp-content/themes/benrista/img/index/preloader.gif 上記のURLのサイトのような形でサイトを開いた瞬間に、gifアニメーションを機能させ、 そのあと、小さいサムネイル画像を表示させたいです。 【状況】 状況としては、私のサイトの場合、開くと gifアニメーションが小さいサムネイル画像の下に隠れている状態になってしまいます。 (一応gifアニメーションがサムネイル画像の隙間から少し見える感じです) firebugなどで要素確認などしても、中々難しいです。 【p.s.】 もし、このような質問をする際に最適な掲示板などがあればご教授頂けましたら幸いです。

  • jQueryスライダーの止め方

    jQuery Destaque Plugin http://globocom.github.io/destaque/ こちらのサイトのパララックススライダーを使おうと考えていますが、 デフォルトでスライドをストップさせる方法がわかりません。 どなたかご教授下さいますでしょうか。 また、このプラグインを使って ページネーションをつけた例がございますが、 http://www.nxworld.net/sample/jquery-destaque/ 「3」「4」を表示中に「1」「2」を押すと、 スライドが左から右に遷移しますが、 この方向を固定で右から左へ動かすことは可能でしょうか? こちらもわかる方がいらっしゃいましたら、是非宜しくお願い致します。

  • jQueryアコーディオンについて

    どなたかご教授頂けると嬉しいです。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-easy-accordion.html 上記のjQueryがクロスブラウザ対応と書いてありましたので使用したのですが、設置後にOperaやIE8(9?)で表示がおかしくなることに気づき困っています。 画像と文字が横にならない+リンクに触れるようにする方法はありませんでしょうか… 宜しくお願いします、

  • jQuery スライダー

    下記のサイトを参考にjQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置しました。 参考サイトにあるようにちゃんと動かす事は出来たのですが。 しかし、現在作成中のwebページは、このコンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxにしたいのですが自分なりに試行錯誤しても、メイン表示エリアがスライダーを表示する、幅950px内の中央に来ません。 参考サイトには、今回のjqueryのソースではコンテンツスライダー要素全体を囲うブロック要素が100%でないといけないとなっています、この場合はHTML,CSS,SCRIPTどこを変えれば、コンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxに納める事ができるのでしょうか? 自分のソースを書くスペースが無いので、申し訳ありませんが、私が参考にしたサイトのURLよりソースをご確認頂き、ご指摘お願いいたします。 参考サイト http://black-flag.net/jquery/20121219-4407.html

  • jQueryで複数枚同時にスライダーをさせたい

    色々改造したりしてみたのですが、何ともいかず行き詰ってしまいました。 jQueryを用いたスライダーで、画像のように5枚ずつスクロールをして写真を見せたく、 制作をしているのですが、 スライダー下にある○のナビゲーションも上記と同じように 5つアクティブになるようにするには、どのようにすればよいのでしょうか。 1つだけというものは数多くあると思うのですが、 複数枚となると、このナビゲーション部分はどこにどのように記述すればいいのでしょうか。 すみませんが、どなたかそのようなプラグインまたは記述方法をご存知の方、 ご教授くださいませ。 ちなみに今はこれをベースに使っています。 http://slidesjs.com/