jQuery Cycle Pluginについての質問
- jQuery Cycle Pluginを使用して表示するスライドショーの動作についての質問です。
- 質問者は、Advanced Demos (Part 1)と同じように設定していますが、IEのバージョン6または7で表示するとスクリプトエラーが発生する問題があります。
- 質問者は、自己解決できずに困っているため、詳しい方にお知恵を拝借したいとしています。
- ベストアンサー
jQuery Cycle Plugin についての質問です。
jQuery Cycle Plugin についての質問です。 ▼プログラムについて jQuery Cycle Plugin （http://www.malsup.com/jquery/cycle/） ▼利用したい機能 Advanced Demos (Part 1) （http://www.malsup.com/jquery/cycle/adv.html） 上記サイトの「Advanced Demos (Part 1)」と同じように設定しようとしています。 とりあえず、FIrefox（Ver.3.3.6）とIE（Ver.8以降）では正常に動作しています。 ▼動作しているテスト用アドレス http://check.we-dok.jp/jq_cycle/cycle_test_01.html これを、IEのVer.6または、Ver.7で表示すると、スクリプトエラーがでてしまいます。 よくわからないのですが、 恐らく、ヘッダー内に記述している以下の部分が悪いと思うのですが、 本家サイトのコードを見たり、いろいろいじってみたのですが、自己解決できません。 <script type="text/javascript"> $(document).ready(function() { $('.pics').cycle({ fx:'scrollDown', speedIn: 2000, speedOut: 500, easeIn: 'bounceout', easeOut: 'backin', delay: -2000, pause: 1, }); }); お詳しい方、どこが悪いのか是非、 ご教授くださいますようお願いいたします。
- k-kazun
- お礼率75% (15/20)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- jQuery Cycle Pluginについて
jQuery Cycle Plugin（http://jquery.malsup.com/cycle/）についてですが、 自動再生ではなく、クリックで動作させたいと思っています。 そこで、1番目の画像をクリックしたら、最後の画像まで順番にフェードし、 1番目に戻る。といったような動きは、可能でしょうか。 オプションの設定をみましたが、分からなかったので ご存知の方がおられましたらお教え頂けないでしょうか。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- jQuery Cycle Pluginについて
jQuery Cycle Plugin（http://jquery.malsup.com/cycle/）を使用して、8枚の画像を次々と表示するスライドショーを実装しました。 1枚目から7枚目の間は「Skip」ボタンを表示してクリックしたら、最後の画像が表示されてスライドが停止するといったような動きは、jQuery Cycle Pluginで実現することは可能でしょうか。 知っている方がいらっしゃいましたら何かヒントを頂けませんでしょうか。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- jQuery Cycle Pluginで表示時間を
jQuery Cycle Pluginで4枚の画像をフェードで切り替えて順に表示するものを作っています。 そこでできることなら各画像の表示時間(timeoutの部分）をそれぞれで変えたいのですが、そのような方法はあるのでしょうか？ （フェードの時間（speed）は一定で構いません） 1枚目……………1秒表示 ↓（フェード1秒） 2枚目……………4秒表示 ↓（フェード1秒） 3枚目……………2秒表示 ↓（フェード1秒） 4枚目……………1秒表示（ここで停止なので厳密には秒数は関係なし） 以下のJavaScriptでは表示時間をそれぞれ変えることが可能のようなのですが、 こちらはフェード機能がないようでして…。 http://attosoft.info/blog/release-animate-image-js/ Cycle Pluginにこだわっているわけではありませんので、他の方法で実現可能なものがあれば 教えていただないでしょうか？ ※実装しなければならない条件 ・切り替え方法はフェード ・リピートしない（4枚目で止まる） ・各画像の表示時間をそれぞれで変える ←←←これを追加したい ※その他の条件 ・HTML 4.01 Transitional ・IE6でも表示可能 ・Flash使用不可 よろしくお願いします。
- ベストアンサー
- JavaScript
- jquery3系がうまくいかない
jquery3系が出ていたので使ってみたのですが、CDNはうまくいったのですが、そのものをダウンロードして使うほうがうまくいきません。 https://code.jquery.com/jquery-3.1.1.min.js のソースコードをコピペしてjquery-3.1.1.min.jsというファイルを自分で作って下記のようにしているのですが、CDNが読み込まれなかった場合に読み込むというやり方のようです。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery --> ・もちろん下記のようにもしましたが駄目でした。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery -->
- ベストアンサー
- JavaScript
- jQuery LightBox Plugin動かず
複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。
- ベストアンサー
- JavaScript
- jqueryにて
こちらではお初にお世話になります。 よろしくおねがいします！ さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: （省略）update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします！
- ベストアンサー
- JavaScript
- jQueryアコーディオンについて
どなたかご教授頂けると嬉しいです。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-easy-accordion.html 上記のjQueryがクロスブラウザ対応と書いてありましたので使用したのですが、設置後にOperaやIE8（9？）で表示がおかしくなることに気づき困っています。 画像と文字が横にならない＋リンクに触れるようにする方法はありませんでしょうか… 宜しくお願いします、
- ベストアンサー
- JavaScript
- CakePHPでjQueryを使うには
ローカル環境にてCakePHPでwebサービスを制作しています。 ブラウザでviewを確認しながら構築しているのですが、この環境でgoogleAPIのjQueryを動作させることは出来るのでしょうか？ もしできるとしたら、 <?php echo $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> で動かないのは何が問題なのでしょうか？ また、googleAPIを使わない方法でも以下のように試しましたが、これも動かない原因はどこにあるのでしょうか？ jQueryのホームページでver1.5のソースをコピーし作ったjQuery1.5.jsを、 webroot /jsに入れる。 Controllerに var $helpers=array('Ajax','Javascript'); を記述。 Viewに、 <?php echo $javascript->link('jQuery.1.5.js'); ?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> 宜しくお願いします。
- ベストアンサー
- オープンソース開発
- jquery cycleで画像リサイズ
jquery cycle pluginを使用して、画像のスライドをしています。 画像を画面中央に全画面表示をしたいのですが、 スライドする画像のサイズがそれぞれ異なるため、 画像の比率を固定して、縦横のサイズで大きい方を 画面に合わせて表示したいのです。 私が考えたのは、 (全文は載せられません。すみません。) <div id="slideImage"> <img id="slide1" src="test01.gif"> <img id="slide2" src="test02.gif"> ・・・ <img id="slide5" src="test05.gif"> </div> ↑のようにスライドする画像があるとして、 下記のjavascriptでスライドする画像分ループさせて、 id部分を変数にして、縦横どちらかが大きかったら・・・という 計算をしています。 function resize(){ for(var i=1; i<6; i++){ var slideNo = "slide" + i; var w = document.getElementById(slideNo).width; var h = document.getElementById(slideNo).height; if(w >= h){ document.getElementById(slideNo).width = screen.width; }else{ document.getElementById(slideNo).height = screen.height; } } } 確かにこれだとidがslide1の場合はサイズをリサイズしてくれるのですが、 slide2以降をリサイズしてくれません。 ループは確かに回っているし、 if文の前でリサイズ前の画像サイズをちゃんと取得しているのですが、 なぜかscreen.width(screen.height)の値が入ってくれません。 jquery cycle pluginだとそれぞれの画像のリサイズはできないのでしょうか。 みなさんお力お貸しください！！
- ベストアンサー
- JavaScript
- jQueryアコーディオン（IE6の対応）
どなたかご教授頂けると嬉しいです。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-easy-accordion.html 上記のjQueryがIE6対応とあるのですが、実際に表示を確認してみると崩れてしまっています。 どうにかIE6で正常に表示出来ないか試行錯誤しているのですが上手くいきません……。 もしわかる方がおられましたら教えてください。 宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 ご指摘の通り、修正したところ解決できました。 pause: 1, → pause: 1 この部分は、オプション設定の追加スクリプト欄に無かった部分を、 自分で新たに付け加えた箇所でした。 最後にカンマは要らなかったんですね。 本当に助かりました。 また何かありましたら、ご指導ください。