• 締切済み

jQueryのSnowfall Pluginで

jQueryのSnowfall Pluginで、複数の画像を降らせたいのですが、どのようにカスタマイズしたら良いでしょうか? ちなみに下記サイトのやり方で、1種類の画像(png)を降らせるところまでは出来ています。 http://wispblog.tree-web.net/data/1/page_1_1356.html 上記サイトのやり方ですと1種類だけなので、これを複数種類の画像(png)を同時に降らせる形にしたいのです。 javascriptはある程度のカスタマイズはできますが、自分で一から作る程のスキルはありません。 どなたかお知恵を貸して頂けると幸いです。 どうぞよろしくお願いいたします。

  • js_qa
  • お礼率100% (1/1)

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

中身を全く見てないので、推測と感覚だけの回答ですが… >ある程度のカスタマイズはできますが~ とのことなので、少なくとも以下の1)は簡単にできるでしょう。 2)も、オプションなどが同じでよければ、いじるところは少なくて済むかも。 3)はオリジナルが対応していなければ、全部作るのとあまり変わらないかも。 …ということで、考え方を3通り。 1)全部をコピペで二組作って、名前を変えて動かす。    → 大変非効率的ですが、すぐに出来るのでお手軽。 2)(想像するところ)処理はループで各要素(画像)を動かしているのでしょうから、   オプションの設定などが同じでもよければ、画像の移動するところだけ、   2種類の画像要素を処理するように変更する。   扱う数も2種類使い分けられればなお良い。    → スクリプトの構成と処理の内容を把握することが必要 3)機能全体をオブジェクト化しておいて、それぞれの画像に対してインスタンスを   作成する。 (もしかすると、もとのスクリプトがすでにこのようになっているかも)    → 考え方のみ参考にして、自分で作成するのに近いかも。     (もし、オリジナルが対応していれば何もする必要ないです。) 3)の参考になれば… http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs04/ajaxjs04_01.html http://www.graviness.com/virgo/javascript/object.html http://msdn.microsoft.com/ja-jp/magazine/cc163419.aspx

js_qa
質問者

お礼

ご回答どうもありがとうございました。 理想の方法は(2)なのですが、具体的な記述方法が分からずつまづいております。 javascriptについての知識が不足しているのを実感しました・・・ もう少し自分なりにjavascriptのスキルをつけたいと思います。

関連するQ&A

  • jQuery Cycle Pluginについて

    JavaScriptで、右から左に自動で画像が流れるスライドショーを表現するために、 現在いろいろなプラグイン等を見ています。 その中に、「jQuery Cycle Plugin」というのがあったのですが、 こちらのサイトに行き all となっているファイルのダウンロードを するために対象のリンクをクリックすると、なぜか403エラーになってしまいます。 こちらはすでに配布を終了してしまった、ということなのでしょうか? 試しにと思い、同じページにあるLite Pluginを設置しても、 私の望む動きは得られませんでした。 同じようなプラグインを使用中の皆様、どうかご意見やご指摘、アドバイスをいただけないでしょうか? ※ちなみに、正常に動いているサイトさんでは、jQueryは1.2.6を、 ※「jQuery Cycle Plugin」のallを使用していました。

  • 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, }); }); お詳しい方、どこが悪いのか是非、 ご教授くださいますようお願いいたします。

  • 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 このページによる追加のダイアログ表示を抑止する」と書いたポップアップが3度ほど出るようになりました。 こういう状況なのですがどうにか一緒に使える方法はないでしょうか? 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> お願いします。

  • jQuery版のlightbox.jsのカスタマイズについて質問です。

    jQuery版のlightbox.jsのカスタマイズについて質問です。 やりたいことは下記の2点です。 1.「prev」や「next」をhover時ではなく絶えず出ているようにする。 2.任意でグルーピングをする。 使用したjQuery版lightbox.jsは下記のサイトからダウンロードしました。 jQuery lightBox plugin http://leandrovieira.com/projects/jquery/lightbox/ JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら 教えていただきたいです。 よろしくお願いいたします。

  • jquery-galleryviewのカスタマイズ・・・

    jquery-galleryviewをカスタマイズして自分のページに使用したいのですが、JavaScriptの知識に乏しく、どこをいじれば良いのかわかりません。 http://www.spaceforaname.com/jquery/galleryview 画像のサイズなどは変更できたのですが、 ・pointer ・next ・prev この画像だけがどこで変更させるのかが分からず困っています。 画像を置き換えても、サイズが固定されているようで、小さな画像に置き換えてもデフォルトの大きさに引き伸ばされます。 解説サイトやおわかりになる方、是非アドバイスお願いします><

  • jQueryアコーディオンについて

    どなたかご教授頂けると嬉しいです。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-easy-accordion.html 上記のjQueryがクロスブラウザ対応と書いてありましたので使用したのですが、設置後にOperaやIE8(9?)で表示がおかしくなることに気づき困っています。 画像と文字が横にならない+リンクに触れるようにする方法はありませんでしょうか… 宜しくお願いします、

  • 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使用不可 よろしくお願いします。

  • ページ横スクロールでjQuery lightBox

    横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin (http://leandrovieira.com/projects/jquery/lightbox/) を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。(拡大時の背景のオーバーレイもずれている) これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。

  • jQuery UI Accordion Plugin(jQuery U

    jQuery UI Accordion Plugin(jQuery UI アコーディオン プラグイン)でアコーディオンメニューを作っています。 下記のような要素を ↓html <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div> プラグインを読み込んで ↓javascript $("#accordion").accordion(); みたいな簡単な記述でアコーディオンメニューが実装できます。 サンプルURL:http://jquery.bassistance.de/accordion/demo/ これを自動で上から順に一定間隔で展開するようにしたいのですが(クリックして展開する動作も生きで)、 動きイメージ:http://www.au.kddi.com/ aubyKDDIサイトの左側のメニュ↑ このプラグインを使わないやり方とかでもいいです。 ご教授の程お願いいたします。

専門家に質問してみよう