- ベストアンサー
FC2のHPでjQueryの設置ができない
- FC2のHPでボタンを押すと画像が次々に送られていく一般的なスライド型のjQueryを設置しようとして、スライド動作が実装されず、ページにただ画像が縦並びになっただけのエラー画面になってしまいます。
- 解決方法を自分なりに調べて試してみましたが、何度やってもダメでした。行き詰まって先に進めないため、設置方法をお願いしたいです。
- 初心者なので具体的に教えていただけると助かります。現在のソースコードは記述が足りていないか間違っている可能性があります。
- miyuua
- お礼率76% (113/147)
- JavaScript
- 回答数6
- ありがとう数1
- みんなの回答 （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" }); });
その他の回答 (5)
- warpspace
- ベストアンサー率56% (83/147)
とりあえず、これで動作するはずです。 （インデントは全角スペースになっていますので、コピペする場合は半角スペースに変更して ください） <!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">コメント１</p> </li> <li> <img alt="" src="http://artpaint01hellohappynight.web.fc2.com/image/1918753941_201.jpg" /> <p class="flex-caption">コメント２</p> </li> </ul> </div> </body> </html>
補足
こんにちは、ありがとうございました!! ページに無事表示され、動作もしました！ かなり悩んでいたので大変助かりました。。 すみません、後もう少しだけ宜しいでしょうか。。 明示してありますソースだとスライドショーがページ全体にフルサイズで表示されてしまうので、例えば、中央揃えで幅・高さを指定して適当な大きさで固定表示するにはどこに書き入れたら良いでしょうか？ ページの一部分に載せたいのですが。。 あと、矢印が表示されないので画像の両端に表示させる矢印のタグと、自動ループを止めるオプション、以上３点それぞれのタグと書き入れ場所を教えて頂けないでしょうか… 重ね重ねすみません。 animation: "slide"に続けてオプションを入れようとするとエラーになってしまうのです… 違うjsにする必要があるのか、自分のやり方がおかしいのか…宜しくお願い致します…
- warpspace
- ベストアンサー率56% (83/147)
＞えっとHPのURLとは自サイトの、でしょうか？ そうです。あなたがスライド・ショーを設定しているページのURLです。
補足
お手数おかけしてしまいすみません。 以下になります。 スライドショーの他はまだありませんが。。 http://artpaint01hellohappynight.web.fc2.com/newfile0.html ページで見ると文字化けしているみたいなのですが、画像はページ上では表示されていました。 ただの縦並び状態ですが。。 どうぞ宜しくお願い致します。
- warpspace
- ベストアンサー率56% (83/147)
スクリプトの詳細を理解していませんので必須か否かは定かではありませんが、 <head>～</head>の間に次のようにflexslide.cssのパスを指定して みてください。 <link rel="stylesheet" href="xxxxx/flexslider.css" type="text/css" media="screen" /> それでもだめな場合、もし差し支えなければホームページのURLを明示してください。 チェックしてあげますよ。
補足
残念ながら…やはりダメでした。。 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> </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)
「flexslider.css」が見当たりませんが、質問内容への単なるコピペ ミスですか？。
補足
いえ、参考にしたサイトでは「必要に応じて」としか書かれていなかったので、必要ない場合もあるのかと思い込んでおり記述してませんでした。 やはり今回の場合CSSが必要でしょうか？ おかしいなとは感じていたのですが、自分にはどこに入れれば良いのかCSSの記述方法がわからなかったので、打ち込めませんでした。 CSSを入れれば動くようになりますか？ 上記のソースにCSSを記述する必要があるとなると、どこにどのように打ち込んだら良いでしょうか？ <head>と</head>の間になるのでしょうか。 大変お手数ですが、宜しければソースを教えて頂きたく思います。 度々恐れ入ります。 宜しくお願い致します。
- warpspace
- ベストアンサー率56% (83/147)
prototype.jsを使用していませんか？。使用している場合は prototype.jsとjQueryは競合（コンフリクト）します。共存させるためには、 ↓の対策が必要です。
補足
prototype.jsは、DLしていないのでたぶん使用してないと思います。 これは元々中に入っているものなのでしょうか？ 両方ないといけませんか？ URL先を拝見しましたが、両方を一緒に使う事はよくないとありました。 なのであまり関係ないのかも知れません… 今、ディレクトリにアップしているものは、「js」と書かれたフォルダの中に入っているjquery-1.10.2.min.js（jQuery本体）とjquery-flexslider-min.js の２つと、フォルダに入っていないflexslider.css、あとはimageフォルダになります。 jQuery本体とflexslider.js、flexslider.cssがアップロードされている状態です。 なのでprototype.jsではなくあるのはflexslider.jsというものなのですが。。 記述方法は上記で大丈夫なのでしょうか？ 再度確認したところ、画像表示もいまいちされてないようです。 何か勘違いをしていましたら申し訳ないです。 宜しくお願いします。
お礼
遅くなりましたが、無事疑問点が解決しました！ 基本がわかっていなかったので何度もお聞きしてしまってすみませんでした。 しかし、組み方など勉強になりました。 奥深さやまだまだ色々と難しいこともわかりました。 長い事お付き合い下さって大変感謝しております。 恐らく今回の質問についてはもう大丈夫かと思います。 あとは今回の事を参考に自分でも簡単なカスタマイズ程度は出来るように頑張ってみます。 本当に助かりましたありがとうございました…！