- ベストアンサー
jQueryの絞り込み検索について
ixkaitoの回答
（No.1から） ---- <body> <h1>jQuery Filtering</h1> <div id="container"> <div id="filter"> <a href="javascript:void(0);" class="allitem">ALL</a> | <a href="javascript:void(0);" class="hideall">HIDE ALL</a> | <a href="javascript:void(0);" class="cat">CAT</a> | <a href="javascript:void(0);" class="food">FOOD</a> | <a href="javascript:void(0);" class="view">VIEW</a> | <a href="javascript:void(0);" class="flower">FLOWER</a> </div> <div id="filterlist"> <ul> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat1.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view1.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food1.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat2.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat3.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="flower"><a href="#"><img src="img/flower1.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat4.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view2.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food2.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view3.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food3.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat5.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat6.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food4.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view4.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat7.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food5.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat8.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="flower"><a href="#"><img src="img/flower2.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view5.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat9.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="food"><a href="#"><img src="img/food6.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat10.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="view"><a href="#"><img src="img/view6.jpg" alt="" /></a></li> <li style="display:none; width:0;" class="cat"><a href="#"><img src="img/cat11.jpg" alt="" /></a></li> </ul> </div> </div><!--/#container--> <h2>COPYRIGHT © <a href="http://black-flag.net/">BLACKFLAG.NET</a> ALL RIGHTS RESERVED.</h2> <div class="tdftdiv"><ul class="tdftad"><li>[PR]<a href="http://design.ria10.com/" target="_top">Web Design</a></li></ul></div></body> </html> ---- 以上。 でも元々ちょっと問題があるスクリプトですけどね。。。
関連するQ&A
- jqueryの絞り込み検索についてお伺いいたします
当方知識が貧しくぶしつけで申し訳ないのですが、どなたかご教授いただけたらと思います。 jqueryを使って並んでいる条件ボタンを選択すると、合致した画像が表示されるページを 作りたいと思って居ます。 2つくらいサンプルをDLしてみました。 A.http://testpage.futene.net/jqueryfilteringeliminate/index.html B.http://testpage.futene.net/refine/index.html やりたいのは、まず全体表示から、任意の条件をクリックすると合致した画像が表示されるということです。 また、複数の条件で表示が出来ることです。 cat+dogと押下していって押下されるごとに条件にあった画像が出てくる感じです。 Aの場合ですと、最初に全て押下されている常態で、いらない条件をクリックしていくものです。 これを逆に押下されていない状態から始まり、押下していくと合致した条件の画像が出てくる。 としたいです。 またBの場合ですと、一つの条件でしか、絞り込めず、二つめの条件をクリックすると、前の条件 がはずれてしまいます。 どちらのサンプルを利用しても良いのですが、どちらかのサンプルでどこのソースをいじれば 上記のような動作が可能になるか教えていただけないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- デザイナー・クリエイティブ職
- jqueryで画像を切り替えたい
以下ソースがあります。 ●main.js $(function(){ jQuery.ajax({ url : "./news.txt", type : "get", success : function(data){ alert(data); } }); }); ●news.txt test と記述しています。 ●index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>jQuery Sample</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <h1>jQueryサンプル</h1> <p>非同期通信の処理</p> </body> </html> この三つのファイルを同じ階層に置き、index.htmlで実行したところ 非同期通信(testのアラート)が表示されました。 そこで、 index.htmlファイルの左側にメニューを設けて、 メニューをクリックすると、画像のみが切り替わるという 内容で、jqueryによるajax実装を行いたいのです。 (左のメニュー1がクリックされれば、リンゴの画像。 メニュー2がクリックされれば、みかんの画像等) ulタグと、jquery関数にどういう仕掛けを入れると 果物画像の入れ替えが行えるでしょうか。 ご教授お願いします。
- ベストアンサー
- AJAX
- ｊQueryについて
skitterのサムネイルについて skitterというｊQueryを使っています。http://thiagosf.net/projects/jquery/skitter/ サムネイル表示をしているのですが、このサムネイルは表示画像の左下の部分を切り取った物が表示されるのですが この画像を表示している画像の縮小版を表示することはできないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 【jquery】自動再生するスライドショー
jquery プラグインで、 ○自動再生するスライドショーで、 ○画像に対して、hover イベントで再生を一時停止できる ○左右の方向ボタン（「<」「 >」 ）で再生方向をコントロールできる ものを探してます。 自動再生の動きは、 http://logicbox.net/jquery/simplyscroll/ がベストなんですが、このプラグインは、自動再生モードでは、 方向をコントロールするボタンを表示できないのです。 上記の条件に合致するものを、誰かご存知ないでしょうか？ あるいは、上記のプラグインで、自動再生しながら、左右の方向ボタンを表示し、 ボタンをクリック、もしくは hover することで、方向を反転させられるように するにはどうすればいいでしょうか。 詳しい方、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryで教えてください＞＜；
画像にマウスを置いたときに、下にテキストが表示され、なおかつ両端の矢印をクリックするとスライドするようなjQueryを教えてください＞＜；宜しくお願いします！！
- 締切済み
- JavaScript
- JQueryを使用して画像をゆっくり表示させる
JQueryを使用して画像をゆっくり表示させる ご覧いただきましてありがとうございます。 今回新規でＨＰを作るにあたり、トップの画像をゆっくりと表示させようと思っています。 そういった画像はFlashで良く見るのですが、Flashを使わずJQueryで作成しようと思っています。 ただ、逆引きのサイトなどを見てもボランクリックで表示やスライドショーの表示方法は載っているのですが 私の理想としている風のはなかなか見つけられません。 詳しい方、ご教授いただけると幸いです。 http://www.wasedasai.net/about このような風に表示するのが理想です。 ソースを見るとこのサイトもJQueryを使用しているみたいなのですが・・・
- ベストアンサー
- JavaScript
- jqueryでGalleryを作りたい
質問します。 ライトボックスのような画像ギャラリーで、一枚の画像をクリックすると、複数の画像が出てきて、そういうグループを複数設置したいのですが、ピッタリのプラグインありますか？ 画面にはA、B画像があり、Aをクリックするとa01.jpg、a02.jpg、a03.jpg……とライトボックスのように表示され、ESCAPEを押して最初の画面に戻り、Bの画像を押すとb01.jpg、b02.jpg、b03.jpg……というふうに表示したいです。
- ベストアンサー
- AJAX
- jQuery UIを使用した画像スライダーについて
お世話になります。 当方、htmlとcssの知識しかなく、Javascriptはほとんど未知の領域なのですが、 ホームページに動きを付けたくて、jQuery UIを使用した画像スライダーの設置方法を載せたサイトを探していました。 そこで、下記のサイトさんのスライダーがイメージに近かったので使用したいと考えています。 ttp://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery#a_image_rotator サンプルページ ttp://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB そっくりそのまま実装することができ、スタイルシートの記述をいくつかいじって 枠の幅や画像の大きさを変更するまではできたのですが、 項目を追加することができませんでした。。 ※サンプルページで、4つある項目の一番下ハニートースト＠…の下にさらに項目を追加して、5つか6つくらい画像がスライドするようにしたいのです。 htmlファイルで、<li>や<div>を追加して、id="nav-fragment-4"をid="nav-fragment-5"にして 連番にもしましたが、それだけではうまく画像が表示されません。 ※4番目のタグをコピーして5番目を作りましたが、5番目をクリックしても画像が表示されず真っ白で、そのあと4番目をクリックすると、画像が2つ縦に連なって表示されます。 javascriptの記述で最大何枚画像が表示されるという記述があるのでしょうか？ 素人の質問なので、わかりにくい部分はあると思いますが、 何卒、お力添えよろしくお願いします！！
- 締切済み
- JavaScript
- (JQuery）スライダーのサンプル探しています
jquery初心者です・・。 クライアントからの要望がありましたので（http://shop.benesse.ne.jp/ ）のようなjqueryのサンプルをずっと探しているのですがありそうでなかなかありません・・ 画像が入れ替わる時の動きに決まりはありません。 右に各コンテンツのサムネイルが縦に並んでいて左のメインイメージが連動して入れ替わり 画像をクリックするとコンテンツへリンクする。 といった動きです。 どなたかご存知の方教えていただけますでしょうか・・！ 何卒よろしくお願いいたします・・・！
- ベストアンサー
- CSS
- jqueryで同じものを30個作って・・・
jqueryでカレンダーを作っています。 $(".a").click(function(){ $(".b").toggle(); }); .aを押したら.bが開閉し、内容詳細が見れるようにしています。 ページ内には同じclassが30個あるので以下のように個別にナンバー01～30まで割り振っています。 for(i=0;i<30;i++){ if (i < 10) { i = "0" + i; } $(".a-"+i).click(function(){ $(".b-"+i).toggle(); }); } ↑これだと、なぜか.a-01～.a-30のどれを押しても30個目の.b-30だけが開閉するようになってしまいました。 それぞれ(.a-01を押せば.b-01)が開閉するようにする方法を教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
お返事送れて申し訳ありません。 やあ！やりたかったことが出来ました。 ご丁寧にソース全部書いてくださってありがとうございます。 助かりました！！ 本当にほんとうにありがとうございました。 このまま使わせていただきますｍｍ