FC2のHPでjQueryの設置ができない

このQ&Aのポイント
  • FC2のHPでボタンを押すと画像が次々に送られていく一般的なスライド型のjQueryを設置しようとして、スライド動作が実装されず、ページにただ画像が縦並びになっただけのエラー画面になってしまいます。
  • 解決方法を自分なりに調べて試してみましたが、何度やってもダメでした。行き詰まって先に進めないため、設置方法をお願いしたいです。
  • 初心者なので具体的に教えていただけると助かります。現在のソースコードは記述が足りていないか間違っている可能性があります。
回答を見る
  • ベストアンサー

FC2のHPでjQueryの設置ができない

FC2のHPでボタンを押すと画像が次々に送られていく一般的なスライド型のjQueryを設置しようとして、参考サイトの通りにソースにプラグインを記述/コピペしたのですが、確認すると、スライド動作が実装されず、ページにただ画像が縦並びになっただけのエラー画面になってしまいます。 解決方法を自分なりに調べて色々試してみましたが、何度やってもダメでした。 行き詰まって先に進めないので、どなたか設置方法を切にお願い致します。 ちなみにタグ類は少しなんとなくわかる程度の初心者なので出来る限り具体的に教えて下さると有り難いです。 <head>と<body>にそれぞれ記述するものを参考サイト通りに入れていったはずなのですが。。 以下に現在打ち込んでいるソースを載せましたので、記述が足りていない/間違っているなど、ありましたら指定して下さい。。 jQueryは現在最新バージョンの【1.10.2】バージョンをFC2ディレクトリにアップロード済みなので一部書き換えなどしてあります。 画像パスが上手くいってないのでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.flexslider-min.js"></script> <script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> </head> <body style="background-color: rgb(139, 139, 139); color: rgb(0, 0, 0); "> <p>&nbsp;</p> <div class="flexslider"> <ul class="image"> <li> <img src="image/1128355_m.jpg" /> <p class="flex-caption">画像1のキャプション</p> </li> <li> <img src="image/2661080_m.jpg" /> <p class="flex-caption">画像2のキャプション</p> </li> </ul> </body> </div> </html> ーーーーーーー それぞれの動作の意味など細かいところまではわかっていません… プラグインを入れてあるファイルの場所にも問題があるのでしょうか… ちなみにライトボックスの設置には成功したのですが、ファイルの保存先が違うだけでも動作しないような気がしましたので。 あとFC2では構造上、jQueryが元々使用出来ないような記事を見かけたのですが、他のFC2ユーザーの方は出来ているようなので大丈夫ですよね… すごく初歩的な事かと思いますが、何卒宜しくお願いします。。 後々補足から回答者様に再度質問させて頂く事もあるかも知れません。

  • miyuua
  • お礼率76% (113/147)

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

  • ベストアンサー
  • warpspace
  • ベストアンサー率56% (83/147)
回答No.6

以下のように追加・変更してみてください。 >中央揃えで幅・高さを指定   (aaa:横、bbb:高さ)     <div class="flexslider">        ↓     <div class="flexslider" style="margin:0 auto; width:aaapx; height:bbbpx;"> >矢印が表示されない     http://artpaint01hellohappynight.web.fc2.com/css1/の直下に     fontsフォルダをそのまま(フォルダごと)アップロードする。 >自動ループを止めるオプション     <script type="text/javascript">       $(document).ready()         $(window).load(function() {          $('.flexslider').flexslider({           animationLoop: false,           animation: "slide"        });       });

miyuua
質問者

お礼

遅くなりましたが、無事疑問点が解決しました! 基本がわかっていなかったので何度もお聞きしてしまってすみませんでした。 しかし、組み方など勉強になりました。 奥深さやまだまだ色々と難しいこともわかりました。 長い事お付き合い下さって大変感謝しております。 恐らく今回の質問についてはもう大丈夫かと思います。 あとは今回の事を参考に自分でも簡単なカスタマイズ程度は出来るように頑張ってみます。 本当に助かりましたありがとうございました…!

その他の回答 (5)

  • warpspace
  • ベストアンサー率56% (83/147)
回答No.5

とりあえず、これで動作するはずです。 (インデントは全角スペースになっていますので、コピペする場合は半角スペースに変更して ください) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja">   <head>     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>     <script type="text/javascript" src="http://artpaint01hellohappynight.web.fc2.com/js1/jquery.flexslider-min.js"></script>     <link rel="stylesheet" href="http://artpaint01hellohappynight.web.fc2.com/css1/flexslider.css" type="text/css" media="screen" />     <script type="text/javascript">       $(document).ready()         $(window).load(function() {          $('.flexslider').flexslider({           animation: "slide"        });       });     </script>   </head>   <body style="background-color: rgb(139, 139, 139); color: rgb(0, 0, 0); ">     <div class="flexslider">       <ul class="slides">         <li>           <img alt="" src="http://artpaint01hellohappynight.web.fc2.com/image/1918753941_130.jpg" />           <p class="flex-caption">コメント1</p>         </li>         <li>           <img alt="" src="http://artpaint01hellohappynight.web.fc2.com/image/1918753941_201.jpg" />           <p class="flex-caption">コメント2</p>         </li>       </ul>     </div>   </body> </html>

miyuua
質問者

補足

こんにちは、ありがとうございました!! ページに無事表示され、動作もしました! かなり悩んでいたので大変助かりました。。 すみません、後もう少しだけ宜しいでしょうか。。 明示してありますソースだとスライドショーがページ全体にフルサイズで表示されてしまうので、例えば、中央揃えで幅・高さを指定して適当な大きさで固定表示するにはどこに書き入れたら良いでしょうか? ページの一部分に載せたいのですが。。 あと、矢印が表示されないので画像の両端に表示させる矢印のタグと、自動ループを止めるオプション、以上3点それぞれのタグと書き入れ場所を教えて頂けないでしょうか… 重ね重ねすみません。 animation: "slide"に続けてオプションを入れようとするとエラーになってしまうのです… 違うjsにする必要があるのか、自分のやり方がおかしいのか…宜しくお願い致します…

  • warpspace
  • ベストアンサー率56% (83/147)
回答No.4

>えっとHPのURLとは自サイトの、でしょうか? そうです。あなたがスライド・ショーを設定しているページのURLです。

miyuua
質問者

補足

お手数おかけしてしまいすみません。 以下になります。 スライドショーの他はまだありませんが。。 http://artpaint01hellohappynight.web.fc2.com/newfile0.html ページで見ると文字化けしているみたいなのですが、画像はページ上では表示されていました。 ただの縦並び状態ですが。。 どうぞ宜しくお願い致します。

  • warpspace
  • ベストアンサー率56% (83/147)
回答No.3

スクリプトの詳細を理解していませんので必須か否かは定かではありませんが、 <head>~</head>の間に次のようにflexslide.cssのパスを指定して みてください。 <link rel="stylesheet" href="xxxxx/flexslider.css" type="text/css" media="screen" /> それでもだめな場合、もし差し支えなければホームページのURLを明示してください。 チェックしてあげますよ。

miyuua
質問者

補足

残念ながら…やはりダメでした。。 cssの記述とその他変更も含めソースは現在このようになっています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.flexslider-min.js"></script> <script type="text/javascript"> <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" /> $(document).ready() $(window).load(function() {   $('.flexslider').flexslider({     animation: "slide"   }); }); </script> </head> <body> <body style="background-color: rgb(139, 139, 139); color: rgb(0, 0, 0); "> <p>&nbsp;</p> <div class="flexslider"> <ul class="slides"> <li> <img src="image/11283515_m.jpg" /> <p class="flex-caption">画像1のキャプション</p> </li> <li> <img src="image/26610180_m.jpg" /> <p class="flex-caption">画像2のキャプション</p> </li> </ul> </body> </div> </html> えっとHPのURLとは自サイトの、でしょうか? 参考にさせて頂いたサイト様でしたら、以下になります。 http://motoshige.net/blog/archives/3040 ↑のサイト様のデモにありますように、自分が設置したいスライドショーはこちらhttp://flexslider.woothemes.com/になります。 自分自身のサイトのURLですと、まだ何もないに等しく、スライドショーを置きたいページのみ開いている状態なのですが、このページのURLを明示すれば良いのでしょうか? すみません;

  • warpspace
  • ベストアンサー率56% (83/147)
回答No.2

「flexslider.css」が見当たりませんが、質問内容への単なるコピペ ミスですか?。

miyuua
質問者

補足

いえ、参考にしたサイトでは「必要に応じて」としか書かれていなかったので、必要ない場合もあるのかと思い込んでおり記述してませんでした。 やはり今回の場合CSSが必要でしょうか? おかしいなとは感じていたのですが、自分にはどこに入れれば良いのかCSSの記述方法がわからなかったので、打ち込めませんでした。 CSSを入れれば動くようになりますか? 上記のソースにCSSを記述する必要があるとなると、どこにどのように打ち込んだら良いでしょうか? <head>と</head>の間になるのでしょうか。 大変お手数ですが、宜しければソースを教えて頂きたく思います。 度々恐れ入ります。 宜しくお願い致します。

  • warpspace
  • ベストアンサー率56% (83/147)
回答No.1

prototype.jsを使用していませんか?。使用している場合は prototype.jsとjQueryは競合(コンフリクト)します。共存させるためには、 ↓の対策が必要です。

参考URL:
http://www.css-lecture.com/log/javascript/029.html
miyuua
質問者

補足

prototype.jsは、DLしていないのでたぶん使用してないと思います。 これは元々中に入っているものなのでしょうか? 両方ないといけませんか? URL先を拝見しましたが、両方を一緒に使う事はよくないとありました。 なのであまり関係ないのかも知れません… 今、ディレクトリにアップしているものは、「js」と書かれたフォルダの中に入っているjquery-1.10.2.min.js(jQuery本体)とjquery-flexslider-min.js の2つと、フォルダに入っていないflexslider.css、あとはimageフォルダになります。 jQuery本体とflexslider.js、flexslider.cssがアップロードされている状態です。 なのでprototype.jsではなくあるのはflexslider.jsというものなのですが。。 記述方法は上記で大丈夫なのでしょうか? 再度確認したところ、画像表示もいまいちされてないようです。 何か勘違いをしていましたら申し訳ないです。 宜しくお願いします。

関連するQ&A

  • 同HTML内で複数のjQueryを設置したいです

    買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか? 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>

  • Jqueryスライドが動きません。教えてください

    WEB制作の素人です。 皆さんが簡単といわれている「FlexSlider2」ですが、画像は出たもののスライドにならず、 登録した画像がそのまま出てしまいます。 一度見ていただけますでしょうか?(ちなみにスムーススクロールは動きます) <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slider"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします

  • Jqueryスライダーが動きません。

    WEB制作の素人です。 簡単といわれている「FlexSlider2」ですが、私がやったところ、 画像は出たもののスライドにならず、そのまま上下に出てしまいます。 一度見ていただき、間違えを教えていただけますか? (ちなみにスムーススクロールは動きます) <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。

  • jQueryについて教えてください

    現在ドットインストールでjQueryを勉強しています いきなりつまずいたといいますかエラー?があります 以下のコードなのですが文字色(<p>)が赤色になりません なぜでしょうか? このコードではjQueryはDLせずに読み込ませています DLしたほうがいいでしょうか? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <p>jQueryの練習</p> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function () { $('p').css('color', 'red'); }); </script> </body> </html>

  • jQueryで<body>内の特定のコードを削除

    よろしくお願いします。 jQuery(ver.1.8.3)を使って<body>内に記述されているHTMLコードを削除したいのですが、どのように書いたらいいのでしょうか。 ■削除したいコード <script src="http://www.hoge.com/hoge.js"></script> ■HTML <html>  <head>省略</head>  <body>   <script src="jquery-1.8.3.min.js"></script>   <script>   $(function(){   削除するスクリプト?   });   </script>   <script src="http://www.hoge.com/hoge.js"></script>  </body> <html> こちらからは編集できない領域にあるHTMLコードのため、jQueryを使ってどうにか削除できないかと思い質問させて頂きました。 どうぞよろしくお願い致します。

  • 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です。 どなたか、ご助力をお願い致します。

  • FC2 ブログで動作しない jQuery

    http://www.texotela.co.uk/code/jquery/newsticker/ を参考にページを作成して、ウェブに公開したら、思い通りに動作する様になったのですが、いざ、使用目的先の FC2 ブログに移行すると、どうやっても正常に動作しません。一体何が原因なのでしょうか?FC2 ブログ以外の FTP サーバーにアップロードしたのは正常にフェードアウトして、テキストが変わるのですが、FC2 ブログの場合は、リストのマークが表示され、フェードしないで、項目が全て表示されてしまいます。 ヘッダにソースを入れ <script type="text/javascript" src="http://xxx.xxx/headlines/jquery_min.js"></script> <script type="text/javascript" src="http://xxx.xxx/headlines/jquery_newsticker.js"></script> <script type="text/javascript"> $(document).ready( function() { $("#news").newsTicker(); parseSamples(); } ); </script> CSS をスタイルシートに入れ ボディに <ul id="news"> <li>項目1</li> <li><項目2</li></ul> を入れてるのですが、フェードしたり、リストのマークが消えなかったり、項目の一覧が表示されて、望み通りの結果が出ません。FC2 ブログでは利用出来ないのでしょうか?

  • jQuery 記述方法

    今、webサイトを作っていてjQueryを使用しようとしています。 しかし、うまくできません。外部にjavascriptファイルを置いています。 やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(¥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(¥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(¥.{a-z]+)$/,"$1_on$2")); }); ]); です。 よろしくお願いします。

  • 画像をランダムにフェードイン

    【参考サイト】 http://black-flag.net/jquery/20120606-3908.html <html> <head> <title>TOP</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.champagne.js"></script> <script type="text/javascript"> $(function(){ $('ul.champagne').champagne({ beginning_delay: 1000, delay_between: 500, duration: 1000, } }); }); </script> </head> <body style=""> <ul class="champagne"> <li><img src="画像1" /></li> <li><img src="画像2" /></li> <li><img src="画像3" /></li> <li><img src="画像4" /></li> </ul> <script type="text/javascript"> $(function(){ $("ul.champagne").champagne(); }); </script </ul> </body> </html> 上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。 どうすれば正常に動きますか? よろしくお願いします。

  • jQueryの導入方法について

    jQueryの導入が上手くいかず、全く動かなくて困っております。 サイト(http://labs.opentone.co.jp/?p=4923)から説明があったURLから実装に必要なjQueryをダウンロードしました。 ・jquery.flexslider.js ・flexslider.css そして下記コードを入力しました。 <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.flexslider.js"></script> さきほど取得した画像をスライドショーを表示させたい場所に下記の通り指定します。 画像名を「sampleX.png」としています。 <div class="flexslider"> <ul class="slides"> <li><img src="images/sample1.png"></li> <li><img src="images/sample2.png"></li> <li><img src="images/sample3.png"></li> <li><img src="images/sample4.png"></li> <li><img src="images/sample5.png"></li> </ul> </div> 最後にflexfliderの関数を呼び出してスライドショーを実行させます。 $("document").ready(function(){ $('.flexslider').flexslider(); }); 以上のことを行ってjQueryらしい動作どころか画像すら表示されませんでした。(画像パスは入力し直しています) 他にダウンロードするものやコードを書かなければならないことなど、動作に必要なものについて教えて頂けませんでしょうか。 ※上記以外のことは一切行っておりません 何卒よろしくお願い致します。

    • ベストアンサー
    • CSS

専門家に質問してみよう