jQueryを使用してサーバー上のファイル一覧を取得する方法
- jQueryを使ってクライアント側でサーバー上の特定のディレクトリ内の画像ファイルの一覧を取得する方法について説明します。
- ファイル数が限られており、ファイル名には規則性があるため、ループを使用して一つずつファイルを取得し、HTMLに出力する方法が考えられます。
- 具体的には、ループ内でファイル名を生成し、そのファイル名を使用してファイルを読み込みます。成功した場合は、ファイル名をHTMLに出力します。
- ベストアンサー
jQueryでサーバー上のファイル一覧取得
サーバー上のとあるディレクトリ中の画像ファイルの一覧を取得したいと思います。 サーバー側で処理すればカンタンなのは分かっているのですが、 都合があってクライアント側でjQueryを使って処理したいのです。 幸いファイル数は有限で、名前には規則性があるので、 ひとつひとつ見に行って、あればそのファイル名をHTMLに出力する、 というやりかたができるのではないかと考えました。 たとえば、サーバー上の画像ファイルの名前は IMG_1.jpg IMG_3.jpg IMG_25.jpg のような感じなので、 var ImageName = ''; for (var i = 0; i < 10; i++) { ImageName = 'IMG_' + String(i + 1) + '.jpg'; // このImageNameを使って読みにいく // 成功すればその名前をhtml上に出力する // しかし、どんな関数を使えばよい？ } のようなループを使えばできそうに思うのですが、 どのようにすれば実現可能でしょうか。 よろしくお願い致します。
- ogu-ne
- お礼率76% (23/30)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞ひとつひとつ見に行って、あればそのファイル名をHTMLに出力する およそ効率的な方法とは思えませんが、方法としては可能でしょう。 一例として。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .imageBox, .imageBox li{ list-style-type:none; matgin:0; padding:0; } .imageBox li{ float:left; margin:5px; } .imageBox img{ height:150px; width:150px; } .imageBox p{ margin:0; } </style> </head> <body> <script type="text/javascript"> (function(){ var ul = document.createElement("ul"); var li = document.createElement("li"); var caption = document.createElement("p"); var i, name, img, e, cap; ul.className = "imageBox"; li.style.display = "none"; for(i=0; i<30; i++){ e = li.cloneNode(true); cap = caption.cloneNode(true); img = new Image(); e.appendChild(img); e.appendChild(cap); ul.appendChild(e); name = "IMG_" + i + ".jpg"; cap.appendChild(document.createTextNode(name)); img.alt = ""; img.onload = (function(elm){ return function(){ elm.style.display = ""; } })(e); img.src = name; } document.body.appendChild(ul); })(); </script> </body> </html>
関連するQ&A
- jQuery 変数の代入
jQuery 変数の代入 jQueryを使って.nextを押すごとに#areaに表示する画像を img1.jpg、img2.jpg、img3.jpg、、、、 と切り替えたいと思っているのですが、 下記のように書いても変数が入ってくれません…。 どのように記述すればよいでしょうか？ よろしくお願いします。 $(function(){ var i=1; $(".next").click(function(){ i++; $("#area").attr("src","img",i,".jpg"); }) })
- ベストアンサー
- JavaScript
- jqueryで未定のファイル名を取得する
サイトでjquery.1.4.2を使っています。 javascriptないしjqueryで、/img/test01.jpg～test05.jpg、tesuto.jpgがあり、個数が6個ある（または～～というファイルがある）とアラートを返したいのですが、方法が良く分かりません。 jqueryでloadを使う事も考えましたがファイル名が一定ではないのと個数が毎回変わるため指定ができない状況です。 /index.html /js/jquery.js /img/ファイル なお特定のプラグインを使用する場合、jquery側のバージョン変更は可能です。 よろしくご教授ください。
- ベストアンサー
- JavaScript
- jQuery:インデックス番号の属性を取得するには
以下のようなHTMLで組まれている画像一覧があります。 <ul> <li><img src="sum_hoge.jpg"></li> <li><img src="sum_hoge2.jpg"></li> <li><img src="sum_hoge3.jpg"></li> </ul> jQueryを使って、各画像に拡大画像をリンクさせたいのですが 例） <li><img src="sum_hoge.jpg"></li> ↓ <li><a href="hoge.jpg"><img src="sum_hoge.jpg"></a></li> liはいくつ並ぶかわからず、hrefもimg srcから抽出してセットする必要があります。 (拡大画像は"sum_"が付かないだけで、同じファイル名です。) liの数の分だけfor文を回し、１行ずつsrcを抽出、sum_をとって<img>の前後に<a href=""></a>を付加していく・・・ということをやりたいのですが、 var j=$('ul li').length; for (var i = 0; i < j; i = i +1){ ? } でつまずいています。 インデックスで特定は $('li').eq(i) 属性の取得は $('img[src]') でできると思うのですが、 「特定のインデックス番号」の「特定の属性」を取得 ってどう書けばいいんでしょうか。 なんか回答を聞けば、あ、それでいいのか・・・と思うような気もしますが、どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryでの画像表示について
どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- JQueryでhtmlファイルをライトボックス的に
jQuery についてまなびはじめなのですが、 index.html と foo.html というファイルが同一階層にあり、 index.htmlのなかの<img src="foo.jpg" id="foo">という画像をクリックすると、 ライトボックスのように、foo.htmlの中身が出現するようにするにはどうすればいいでしょうか？ JQueryを使うらしいということはわかるのですが、それ以上わかりません。 以上、よろしくお願いします。
- 締切済み
- JavaScript
- jQueryのfadeToの動きが変（サーバ上）
サムネイル画像をクリックするとメイン画像にそれを映し出し そのメイン画像が指定した時間で薄っすらと表示されるような効果のイメージギャラリーをjQeryを使って制作しています。 jQueryバージョン：jquery-1.7.2.min.js ※（薄っすらと表示される効果：jqueryにてメイン画像のopacityを0→1)に変化させて実現しています 【問題点】 ローカルＰＣ上でテストすると意図する動作をするのにサーバ上にデータをアップしてテストすると メイン画像の移り変りにブラウザ起動後、初回サムネイルをクリックしたときのみ遅延が発生し、JqeryのfadeToも効きません。 何かjQueriのfadeto関係などソースに問題があるとか、これはキャッシュの問題で仕方ないとかあればご指導のほどよろしくお願いします。 【問題点詳細】 しかし、自分のパソコン内（ローカル環境）で動作させてみると意図したとおりになるのですが、 データをレンタルサーバ上にアップし、確認してみると、サムネイルをクリックすると jqueryのfadetoの（opacityを０から１にする部分）動作がおかしくなります。 ブラウザを起動し初回サムネイルをクリックしたときのみ、メイン画像が前の残像が残り（遅延発生）し、fadetoの（opacityの変化）が聞かなくなります。 【状況整理】 １．どのＰＣでもローカル環境（自分のＰＣ内）でテストすると意図する動作をする。 ２．レンタルサーバ上だと、ブラウザを起動後、初回サムネイルをクリックしたときのみおかしい動作をする。（メイン画像の切り替わりに遅延が発生する（fadetoも効かない）） ３．ブラウザを閉じない状態で、同じサムネイルをクリック（２回目）すると意図する動作をする。 ※２．３を考えますと２回目以降クリックしたときに大丈夫なのは１回目クリックしたときに取得したメイン画像のキャッシュがブラウザに保存されているからだと思います。 またローカルだと大丈夫なのはメイン画像取得する時間（ダウンロードがない）から じゃないかな？とも思います。 メイン画像に使っているそれぞれのファイルサイズは80KBと軽いです。 またIE 8/9でもfirefox12でも同じ状況です。 ■HTMLソース（XHTML) <div id="carousel"> <!--メイン画像--> <div><img src="img/main.jpg" alt="" class="main_img"/></div> <!--サムネイル画像--> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thumb.jpg" alt="" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thumb.jpg" alt="" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thumb.jpg" alt="" /></a></li> </ul> </div> </div> ■Javascript(jQuery) $(function() { $("#carousel .anyClass a").click(function(){ $("#carousel .main_img").css("opacity",0); ←いったんメイン画像のopacityを０に落とす $("#carousel .main_img").attr("src",$(this).attr("href")); ←メイン画像のＵＲＬにセット $("#carousel .main_img").fadeTo("normal",1); ←メイン画像のopacityを１に変化 return false; }); });
- ベストアンサー
- CSS
- jQueryにて背景のURLを取得
jQueryにて背景のURLを取得しimgを表示する場合で背景を縦横の倍率を50％に縮小するにはjavascriptをどうすればいいのでしょうか？ 【javascript】 jQuery(function($){ var ori_img = $("#crop_img"); crop_window.css({'background-image': 'url('+ori_img.attr('src')+')'}); }); 【HTML部分】 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="crop"> <img src="./test.jpg" id="crop_img" alt="" > <div id="crop_window"></div> </div>
- ベストアンサー
- AJAX
- niftyのようなサーバー
@niftyのように特殊なサーバーは他にありますでしょうか？ @niftyはcgi-binディレクトリが、通常のhtmlや画像ファイルを置くディクレクトリ(homepage/)とは独立して存在し、このcgi-binディレクトリ内ではhtmlや画像ファイルの閲覧ができません。 たとえば、/cgi-bin/bbs/内に、 ./bbs.cgi ./img/image.jpg というファイルが存在しているとき、 bbs.cgiが <html> <body> <img src="./image.jpg"> </body> </html> と出力しても画像は表示されない仕組みになっています。なので画像は /homepage/ 下（たとえば/homepage/img/image.jpg）におかなければいけません。なので、cgiスクリプトが出力するHTMLからの画像へのパスはURL指定で行います。 <img src="http://homepage3.nifty.com/xxxyyy/img/image.jpg"> こういったサーバーは他にはあるのでしょうか？
- ベストアンサー
- CGI
- jQuery 背景のURLを取得しimgで表示
スマホサイトの作成をしています。 やりたい事は、タイトル通りで jQueryを使って、 あるブロック要素の背景画像のURLを取得し、 そのデータをimgのsrc属性に入れて imgとして表示したいと考えております。 補足としいて ・imgは、同じブロック要素内に表示します。 ・取得するbackground-imageは絶対パスで書かれているものです。 スクリプトは以下のように書きました。 ---------------------------------------- var bgImg = $("#box").css("background-image"); var bgImgFile = bgImg.substring(5, bgImg.length - 2); $("#box").prepend("<img src='" + bgImgFile + "'>"); //最終的に#boxの背景画像をなくす処理 $("#box").css("background-image","none"); ---------------------------------------- ですが、bgImgの値がブラウザによって違うのです。 alert(bgImg)で確認してみると、下記のようにalert表示されました。 ●Firefoxでは url("http://****.jpg") ●ios(iphone)では url(http://***.jpg) ← " "が付いていない これにより、結果、bgImgFileの値が変わってしまい、 ios(iphone)では背景画像を表示できません。 もし可能であれば、これの原因や、 他にもし方法があれば教えて下さると助かります。 詳しい方、どうぞ宜しくお願いいたします。
- ベストアンサー
- AJAX
- 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
お礼
回答をありがとうございます。 お礼が遅くなりすみません。 大変急ぎだったもので、今回はまったく別の手段で対応したのですが、 本番までは次官の余裕があるので、 提示いただいたソースを参考にして作り直してみようと思います。 （できればサーバー側で処理させてもらえるように話を持って行きたいのですが...。） どうもありがとうございました。