- 締切済み
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.】 もし、このような質問をする際に最適な掲示板などがあればご教授頂けましたら幸いです。
- dkknmr
- お礼率0% (0/18)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- nekomikekamo
- ベストアンサー率73% (71/97)
ポイントはこの部分だとは思いますが・・・・ jQuery(window).load(function($){ jQuery("#index_gallery").sliderkit({ shownavitems:3, auto:true, autospeed:5000, navscrollatend:true, circular:true }); }); loadが早すぎるのであれば、load後にsetTimeoutなどでウェイトを持たせても 良いのではないでしょうか？ gifが下に隠れて少し見えてしまうのであれば、実行時にgifを消すのもありかと。
関連するQ&A
- jQueryに関してアドバイス頂けますでしょうか
はじめまして、gumkucha_maxと申します。 jQueryに関して、どなたかご教授頂けますでしょうか。 ページ内に複数のスライダーを設けたいのですが、 現状、下記ページのような動きになってしまいます。 ▼現状のページ http://ihatovo-cafe.com/tmp/search-2014/index-test20140312.html やりたい事としては、各スライダーのサムネイル画像をクリックすると、 メインの画像が切り替わるという動きにしたいのですが、 現状はサムネイル画像をクリックすると、ページ内にある全てのスライダーのメインが切り替わってしまいます。 どなたかご教授お願い致します。
- ベストアンサー
- JavaScript
- jQuery等で背景をフル表示＋スライドショー
http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は３枚で、３枚目の画像だけ、縦長になっているので、 背景が３枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 ３枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか？ jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。
- ベストアンサー
- CSS
- jQueryでクリックした場所に赤枠を付けたいです
度々恐縮ですが、またjQueryに関してお知恵を拝借ください。 下記ページにスライダーを設置していますが、 サムネイル画像をクリックした時と、オンマウスした時に、サムネイル画像に赤枠（CSSのボーダー）を付けたいです。 http://ihatovo-cafe.com/tmp/search-2014/index-test20140312.html サムネイルをクリックした時、サムネイルに赤枠をつけるまでならなんとか出来そうなのですが、 選択中のサムネイルとは別のサムネイルをクリックした時に、 選択中のサムネイルからは赤枠が消え、新しく選択したサムネイルに赤枠をつける・・ という動きに悩んでおります。 どなたかご教授くださいませ。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryでのgalleryについて
http://sugoude.inuiyosuke.jp/ 上記のようなサイトのjQueryのプラグインはないでしょうか？ Google探してますが、スライダーやシンプルなギャラリーはありますがこういった流れるjQueryは 見当たりませんでした。 他の方法でもいいですが、最近jQueryにはまっているため質問させていただきました。 よろしくおねがいします。
- ベストアンサー
- JavaScript
- アニメGIFをスライドで表示される度に１コマ目から
jQueryを使ったスライダーで、アコーディオン状に画面が水平スライドするのですが、 コメント枠にアニメGIFも表示しています。 スライダーが動いて最初にアニメGIFが表示された時だけ1コマ目から表示されますが、スライダーが折り返して次の表示の時にはGIFのループが途中から表示されてしまいます。 これをGIF画像が画面に映る度に1コマ目から表示させるにはどうしたら良いでしょうか？ 下記サイトがjQueryプラグインのソースサイトです。 http://www.armagost.com/zaccordion/
- ベストアンサー
- CSS
- 複数の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> 両方とも単体では稼働します。 初心者で大変申し訳ございませんがわかる方宜しくお願い致します。
- ベストアンサー
- JavaScript
- jqueryのスライダー カスタムについて
http://zxcvbnmnbvcxz.com/jquery-簡単かつ高性能なスライダー【bxslider】の設置-divス/ こちらのスライダーを使用して、 「next」と「back」を画像にしたいのですが、 どこを書き換えらできますでしょうか。 html内に記述がないので多分以下のjsだと思うのですが。。 http://preview.spawn.jp/demonstration/js/jquery.bxSlider.min.js 詳しい方、どうぞよろしくお願いしあます。
- ベストアンサー
- JavaScript
- jQueryで複数枚同時にスライダーをさせたい
色々改造したりしてみたのですが、何ともいかず行き詰ってしまいました。 jQueryを用いたスライダーで、画像のように5枚ずつスクロールをして写真を見せたく、 制作をしているのですが、 スライダー下にある○のナビゲーションも上記と同じように ５つアクティブになるようにするには、どのようにすればよいのでしょうか。 １つだけというものは数多くあると思うのですが、 複数枚となると、このナビゲーション部分はどこにどのように記述すればいいのでしょうか。 すみませんが、どなたかそのようなプラグインまたは記述方法をご存知の方、 ご教授くださいませ。 ちなみに今はこれをベースに使っています。 http://slidesjs.com/
- 締切済み
- JavaScript
- jQueryの基本的なことについて教えてください
自サイトで 「jQuery Slider²」http://wex.im/javascript/jquery-slider2 を設置しようと試みています。 私はhtmlとcssの知識しかありません。 今までずっと、HTML 4.01 Transitionalで、タグ打ちしながらサイトの作成をしていました。 行き詰ったらその都度ネットで調べて…という感じで 10年以上サイト製作をしていますが素人ほどの知識だと思っています。 それで、初めて上のスライドショーを設置しようと色んなサイトを参考にしたのですがうまく動きません。 （google chrome、IE8で見ています） 何が悪いのか…と上記URLの配布サイトを見たところ、 Examples <head> stuff <script type="text/javascript" src="js/jquery.slider.min.js"></script> <link href="css/jquery.slider.css" rel="stylesheet" type="text/css" /> と、2段目がtype="text/css" />という風に閉じてあって、 あぁ、これってページ全体をもうhtmlじゃなくて xhtmlで書かないと動かないって事なのかなぁ、という疑問が沸いてきました。 実際このスライドショーに限らず、jqueryのプラグインを使用している 色んなサイトがxhtml方式になっているのを確認しましたが jQueryのプラグインは、xhtmlでないと動かないものでしょうか？ それとも、このプラグインに限ってはxhtmlなのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- こんな動きができるJqueryを探しています。
お客さまより、こんな動きができないか？と言われていろいろ探していたんですが、 全然見つからないので、こちらで質問させていただきます。 こちらのサイトの様な動きができるJqueryプラグインはありませんか？ ↓↓↓↓ ---- 摂南大学様サイト http://www.setsunan.ac.jp/ ---- 左右の画像は透明にならなくてもかまいません。（むしろならないほうがいいです） メインの画像が１枚だけ切り替わるスライダーは沢山あるみたいなんですが、 この様に、左右の画像が表示され、なおかつ下のまるい図の色が変わるものが見つからずに、 とても困っています。 どなたか教えていただけませんか？
- ベストアンサー
- JavaScript
補足
ご回答ありがとう御座います。 しかし、どうも上手くいきません。 スライドの下にgifアニメーションが隠れた状態になってしまいます。 なので、loadの時間では無いのかと思うのですが（汗） loadが早すぎるのであれば、load後にsetTimeoutなどでウェイトを持たせても 良いのではないでしょうか？ gifが下に隠れて少し見えてしまうのであれば、実行時にgifを消すのもありかと。 ＞素人で意味がわかっておりません。