- 締切済み
jqueryのプラグインjPlayerの設置方法
jqueryを使用したプラグイン、jPlayerを設置しようと思っています。 solidstate everyday http://solidstate.jp/Others/music/script_138.html このサイトの説明をもとに設置を試みましたが、jPlayerはまったく表示されず、 テキストで play stop min volume max volume と表示されるのみとなってしまいます。 サイトの説明通り、head部分にjqueryとjquery.jplayerのjsを読み込ませ、 その下に設定のjsを書きました。 さらにその下のbodyにサイトの「HTMLマークアップ」部分を そのままコピペしました。 cssは公式サイト（http://www.jplayer.org/latest/demo-01）のソースにあったものを使用し、 swfファイルのパスも変更しましたがまったく表示されません。 現在勉強中のため質問自体わかりづらいかもしれませんが、 正しい設置方法を教えていただけないでしょうか。 どうかよろしくお願いいたします。
- hetalica
- お礼率100% (3/3)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
- fujillin
- ベストアンサー率61% (1594/2576)
配布元サイトのデモは正常に作動しているのですよね？ であれば、ご質問文からは設置方法を間違えているとしかわかりません。 1）デモサイトのソースを参考に、まず、それをそっくりコピーしてみて動くか確認。 2）自分がやりたいように少しずつソースを修正しながら、動作を確認 というようなやり方が近道かも。 最初から自分で設定したければ、そのサイトのドキュメンテーションを読んで理解するしかないかも。 仮に、回答者がこれを読んで理解したとしても、どのように設置しているか不明なので、質問者様がどこで間違っているのかは指摘できないことでしょう。
お礼
すばやいご回答ありがとうございます。 仰るとおり、デモサイトのサイトをコピーし、サイト内のjquery.jplayer.jsを自分用に.swfをパスを設定したファイルに置き換え、相対パスで設定されているcssを絶対パスで設定しました。 その結果jPlayer部分の外枠は表示されるのですが、再生・停止・時間経過表示・ボリュームは表示されない状態です…。 ボタン部分はflashで作られているそうなので、これらが表示されないということは.swfのパス設定が間違っているということなのでしょうか。 絶対パスで設定し、.swfファイルにブラウザから直接アクセスすると、アクセスはできますが何も表示されない状態です。
関連するQ&A
- jqueryプラグインの設置方法
すみません、超初心者です。 コチラのサイト（http://laquu.com/plugin/innerslide/demo）の「インナースライド」プラグインを導入したいのですが、カーソルを載せてもピクリとも反応しません。 自分で書いたソースはこんな感じです.↓ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../jquery.laquu.custom-65049.js"></script> <script> jQuery(function(){ laquu("#innerslide1").innerSlide(); }); </script> <body> <div class="innerslide-panel"> <div id="innerslide1"> <p>カーソル載せる</p> <div class="laquu-innerslide"> スライドする内容 <!-- End laquu innerslide --></div> <!-- End innerslide1 --></div> <!-- End innerslide panel --></div> </body> ちなみに今はサーバーにはアップロードしておらず、完全にローカルでプレビューしています。 もしかして.jsファイルをサーバーにアップロードしなくては動かないのでしょうか？？？ 無知で申し訳ありません、ご回答宜しくお願い致します。
- 締切済み
- JavaScript
- jQueryプラグイン、サーバー上だと動かない。
こんにちは。 このたび制作しているWEBサイトにjQueryプラグインのprettyphotoを実装したいのですが、ローカルの環境では問題なく動いてくれるのですが、サーバーにアップしたとたんにエラーがでてしまいまったく動いてくれません。 <head>内のスクリプトの記述は <script src="js/libs/modernizr-2.0.6.min.js"></script> <script src="js/prettyphoto/js/jquery-1.6.1.min.js"></script> <script src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); </script> という感じです。 ※そのほか直前にprettyphotoのCSSは読み込んでおります サーバーにアップしたページのソースをみてみるとCan't find variable:$というメッセージがでていたのでプラグインの記述を (function($){ // $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); }(jQuery)); // にしてみてもCan't find variable:jQueryというメッセージがでてきてしまいます。 こちらもともとテンプレートであったサイトを改変しているものなので、このほかHTML後半部分にもいろいろjavascriptの記述があります。以下となります。 <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script> <script type="text/javascript" src="js/jquery.validate.pack.js"></script> <script type="text/javascript" src="js/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script> <!-- super fish js include --> <script type="text/javascript" src="js/superfish/js/superfish.js"></script> <script type="text/javascript" src="js/superfish/js/hoverIntent.js"></script> <script defer src="js/plugins.js"></script> <script defer src="js/script.js"></script> レイアウトが崩れないようひとつひとつとりはずしてみたのですがprettyphotoは動いてくれませんでした。 またパスが間違っていないかも何度もチェックはしたつもりです。 本当に困っているのですが、このような時どうやって原因を探していけばよいのか、何かアドバイスを いただけたらと思い投稿させていただきました。 当方、WEB制作初心者のため、見当はずれなことを訊いていましたらご容赦ください。 どうぞよろしくおねがいします。
- ベストアンサー
- HTML
- jQuery prettyPhoto 設置について
jQuery prettyPhoto 設置についてド初級の質問ですが、よろしくお願いします。 http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ を設置するのに、ヘッダーに <script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> と記述すると別サイトで見ましたが、文字コードshift_jis で作られたサイトでは正しく作動しないのでしょうか？ （実際設置しましたがダメでした。） お分かりの方いましたら、ご回答ください！
- ベストアンサー
- JavaScript
- jqueryのプラグインdroppy.jsについて
WEBデザイン初心者です。 グローバルナビ部分を、ドロップダウンリストにしたいなと思い、jqueryで実装しようと思っています。 調べてみたところ、よく使われているプラグインにdroppy.jsというものがありましたが、 どの紹介サイトでもjQueryのサイトにリンクされています。 ただ、そこから、ダウンロードファイルが見つかりません。 もしかして、jQueryサイトでは取り扱わなくなったプラグインなのでしょうか。 あまりにもdroppyの事例が多いので、できれば導入したいのですが、分かる方いれば、よろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryのプラグインをダウンロードしたい
jquery.updnWatermark.js をダウンロードしたいのですが、ファイルを紹介しているページからそのjavascriptのダウンロードページへ直で行くとOff lineと表示されます JQuery.comのトップページからplugginに行ってみると The plugins site is currently in development と表示され、現在配布されていないようです そこで他のサイトで提供してくれるところがないか探したのですが見つかりません どなたかこのファイルを提供しているサイトがありましたらぜひ教えてください
- ベストアンサー
- JavaScript
- jqueryのバージョン違いの解決方法は？
どうしてもわからないので、ご教授お願いいたします。 http://baby.caregoods.org/のサイトでjquery.treeview.js（http://bassistance.de/jquery-plugins/jquery-plugin-treeview/）のツリーメニューを使っています。 同梱されていたjquery1.4.3を使っていました。 ところが、このサイトの管理画面で画像のドラッグ＆ドロップで入れ替えるという機能が使えなくなり、元のjquery1.6.2に戻したところjquery.treeview.jsのメニューが使えなくなってしまいました。(いろいろなpluginが入っているようです。) 複数のjqueryが使えないのはここで調べてわかったのですが、http://stacktrace.jp/jquery/with_other_lib.htmlのサイトを参考にして ----------------- // $ 関数および jQuery関数の上書きを元に戻します。 var $j = jQuery.noConflict(true); // $ は jQuery ver1.4.3を参照します。 alert($.fn.jquery); // => 1.4.3 // jQuery は jQuery ver1.4.3を参照します。 alert(jQuery.fn.jquery); // => 1.4.3 // $j は jQuery ver1.6.2を参照します。 alert($j.fn.jquery); // => 1.6.2 ---------------------------- と書いたjsファイルを読み込むのですが、1.6.2しか反映されず、1.4.3で使っているjquery.treeview.jsが使えません。 このjsファイルの前に、jquery-1.4.3.jsとjquery-1.6.2.jsは呼び出してあります。 firefoxで閲覧すると「1.6.2」「1.6.2 このページによる追加のダイアログ表示を抑止する」「1.4.3 このページによる追加のダイアログ表示を抑止する」と書いたポップアップが３度ほど出るようになりました。 こういう状況なのですがどうにか一緒に使える方法はないでしょうか？ javascriptは初心者なので説明があまり上手くないので申し訳ありません。 うまく伝わるかわかりませんが、よろしくお願いいたします。
- 締切済み
- JavaScript
- 同HTML内で複数のjQueryを設置する方法
複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、 片方のみしか作動しません。 色々と探した結果、複数使う場合はちゃんとした記述方法があるということがわかったのですが、その方法が詳しくわかりません。 http://stacktrace.jp/jquery/with_other_lib.html こちらのサイトでは意味がわからず・・・ 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="js3/accordian.pack.js"></script> <script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js2/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="js2/jquery.timers-1.1.2.js"></script> <script type="text/javascript" src="js2/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ filmstrip_size: 6, frame_width: 145, frame_height: 160, background_color: 'transparent', nav_theme: 'dark', border: 'none', show_captions:true, caption_text_color: 'black' }); }); </script> ---------------------------------------- タブメニューがaccordian.pack.js、 その下のすべてがスライドショーのものです。 スライドショーはこちらを参考にしてつくりました。 http://spaceforaname.com/filmstrip.html 本当に困っております。 どうかご回答お願い致します。
- ベストアンサー
- JavaScript
- jquery.bgSwitcherが設置できない
私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <TITLE>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg { width: 640px; height: 415px; margin: 0; padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか？ このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか？ 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。
- 締切済み
- JavaScript
- jQuery
http://bmath.org/wordpress/?p=663 上記を参考にＷＥＢページをつくってみたのですが、上手くいきません。 javascript部分をｈｔｍｌの <script type="text/javascript" src="js/site.js"></script>にいれたからでしょうか？ また、ｊｓフォルダは<script type="text/javascript" src="js/jquery.scrollTo-min.js">ではなく、jquery.scrollTo-1.4.3.1を使っています。 よきアドバイスお願いします。
- ベストアンサー
- CSS
- jqueryを複数バージョン設置
使用したいjqueryに伴い、複数のバージョン違いのjsファイルをリンクさせたいのですが、調べると、複数設置は非推奨と記載がありました。 現状４つあるのですが、動作はしています。 ひとつに絞るべきか、何を基準に絞ればいいか、 「noConflict()」を使用した場合の適切な記載方法など教えていただけないでしょうか。 素人質問で申し訳ありませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
すばやいご回答ありがとうございます。 Jplayer.swfはすでにアップし、パス指定も修正しているのですが…。 ただ、公式サイトのデモページをコピーし、jquery.jplayer.jsとcssを修正しただけで動かしたところ、外枠のみが表示され、flashでできている再生・時間経過・ボリュームボタンは表示されませんでした。 Jplayer.swfは絶対パスで設定し、ブラウザからもアクセスはできるのでパスの場所は合っているのですが…。