ウィンドウサイズを取得して、phpで使いたい

このQ&Aのポイント
  • ウィンドウサイズを取得して、phpで使用する方法について紹介します。
  • 画像のサイズによって、ライトボックスを使用するかどうかを判断する方法を紹介します。
  • javascriptのコードを使用して、ウィンドウサイズを取得する方法を説明します。
回答を見る
  • ベストアンサー

ウィンドウサイズを取得して、phpで使いたい

フォルダ内の画像を配列にして、imgタグを書き出すように、phpを書きました。 imgタグでwidth、heightを指定することで無理やり縮小させて表示し、 ライトボックスを使って元のサイズで開くようにしています。 できればああしたいこうしたい、というのはたくさんあるのですが、 とりあえず、 画像がウィンドウサイズより大きいときはライトボックスを使わないようにしたいのです。 javascriptでこのように、ウィンドウサイズを得ることはできました。 var winw = document.body.clientWidth; var winh = document.body.clientHeight; たとえば、$window_wにwinwを代入し、 このようなことをしたいのですが、なにか方法がないでしょうか。 $imgは、画像のパスがずらずら並んだ配列です。 $widthは画像サイズ、 $thumbは縮小させたいサイズで、別に定義しています。 ~前略~ if ($width>$window_w){ print "<a href=\"$img[i]\"><img src=\"~~.jpg\" width=\"$thumb\"></a>"; } ~後略~

  • PHP
  • 回答数1
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • sagamit
  • ベストアンサー率37% (39/105)
回答No.1

php はサーバーサイドで処理されています。 つまり、ブラウザが受取った段階では既に処理済みです。 クライアントサイドで JavaScript が動いた結果を php に反映させることは出来ません。 条件を満したら JavaScript 側で createElement 等を使って要素を生成する方法が妥当かと思います。

sa2874
質問者

お礼

うわあ、よくわかりました。 一方はサーバーサイド、もう一方はクライアントサイドであることは知っていたのですが、 理解してなかったです。疲れた頭で解決法など調べるものではありませんね; javascript、やってみます。 ありがとうございました!

関連するQ&A

  • JavaScript 画像のサイズを取得して、それに適したウインドウを表示したい

    画像のサイズを取得して、それに適したウインドウを表示したいと思っています。 今のところ、下記のように実装しましたがローカルで実行した際に、サイズを取得できない場合があります。 (document.write(size);で、width=0,height=0 と返ってくる) また、サーバ上で実行するとブラウザが応答なしになってしまいます…。 どのように解決すればよいか、良い案がありましたら是非ご教授下さい。 宜しくお願い致します。 function popup_img(url, title){ var tImg = new Image(); tImg.src = url; x = tImg.width; y = tImg.height; document.write(size);  //for debug if(x!=0 && y!=0){ var size = "width=" + x + ", height=" + y; a = window.open("","",size); a.document.write("<HTML>\n"); a.document.write("<TITLE>",title,"</TITLE>\n"); a.document.write("<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0>\n"); a.document.write("<IMG SRC=",url,">\n"); a.document.write("</BODY></HTML>\n"); a.document.close(); a.moveTo((a.screen.availWidth / 2 - tImg.width / 2), (a.screen.availHeight / 2 - tImg.height / 2)); } } // --> </SCRIPT> </head> <BODY> <a href="#" onClick="popup_img('TEST.jpg', 'SOME TITLE')">TEST</a>

  • ウィンドウサイズの変更を滑らかに取得したい

    <html> <head> <script type="text/javascript"> function test(){ width = document.body.clientWidth; height = document.body.clientHeight; document.getElementById("haba").value=width; document.getElementById("takasa").value=height; } </script> </head> <body onload="window.setInterval('test()',1);"> 幅<input size="20" type="text" id="haba"/> 高さ<input size="20" type="text" id="takasa"/> </body> </html> -------------------------------------------------------------- 以上のような、ブラウザのウィンドウサイズを取得する コードを書いたのですが、滑らかに高さと幅が取得出来ずに困ってます。 イメージとしては、ウィンドウサイズをマウスで変更すると 高さと幅の数値がもっと滑らかに細かく変化するように したいのです。 どなたか回答お願いします。

  • Microsoftのクリップギャラリーのように元サイズのプレビューを新しいウインドウに表示したい

    サムネイル画像をクリックすると、別ウインドウが開いて元サイズの画像を見せるページを作りたいんです。 サムネイルをクリックするたびに新しいwindowが次々に立ち上がるタイプのものは作れたのですが、別のサムネイルをクリックするとプレビュー用ウインドウの内容が変わるタイプのものが欲しいので困ってます。 サンプルを改造してみたのがこれです。 function tile(imgname){ win2=window.open("","","width=350,height=200,resizable=yes") if (win2){ win2.focus() win2.document.open() win2.document.write("<head><title>"+bgname+"</title></head>") win2.document.write("<body><img src="+'"'+imgname+'"'+">") win2.document.write("<TABLE WIDTH='100%' HEIGHT='100%'><TR><TD VALIGN='bottom' ALIGN='center'><FORM><INPUT TYPE='button' NAME='ok' VALUE='Close' onClick='window.close()'></FORM></TD></TR></TABLE>") win2.document.write("</body>") win2.document.close() } あと、サムネイル画像につけるリンク先HTMLファイルの書き方も良くわかりません。 スクリプトのほうに<head>と<body>タグがあるので<html>タグだけ書いておけば良いんでしょうか?

  • google マップ サイズ変更

    グーグルマップで、windowsのサイズ変更をしたら、地図の大きさも材レクトに変わるという処理をしたく、ウェブを参考に作ったのですが、 ローカルだと、firefox,opera,ie6でできるのですが、 HPにuploadすると、operaでしか実現できません。他のだと地図サイズが変化しません。 どなたかアドバイスいただけたら幸いです。 //<![CDATA[ //スクリプト定義 var map; var latLng = new GLatLng(43,14); // 初期位置設定 function load() { resize(); if (GBrowserIsCompatible()) { //Google Maps 利用可能? map = new GMap2(document.getElementById("map")); // マップ1 map.setCenter(latLng, 13); // 起動時初期位置 } } function resize(){ var map_obj=document.getElementById("map"); var disp=getDispSize(); map_obj.style.width=disp.width-100+"px"; map_obj.style.height=disp.height-100+"px"; } function getDispSize(){ if(document.all){ if(window.opera){ return {width:document.body.clientWidth,height:document.body.clientHeight}; } else { return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}; } } // NN else if(document.layers || document.getElementById){ return {width:window.innerWidth,height:window.innerHeight}; } } //]]>

  • サファリでポジション指定のJavascriptがうまく作動しません

    詳しい方ぜひお力をお借りしたいのですが。 以前IE用で教えていただいたオンマウスでボックスを中央に配置する スクリプトを教えていただいたのですが、Safariですとこれがうまく 作動してくれません。IEではどんなモニタの大きさでもど真ん中にいくのですが、Safariですと左に寄ってしまうのです。 これをSafariでも正常に機能させるにはどのような記述にすればよいのかを考えていましたがうまくいかないので質問させていただきます。 function show( text ) { var el = document.getElementById( "box" ); document.getElementById( "text" ).innerHTML = text; el.style.visibility = 'hidden'; el.style.display = 'block'; var width = el.clientWidth; el.style.display = 'none'; el.style.visibility = 'visible'; el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.top = ( document.body.clientWidth - width ) / 4 + document.body.scrollTop; el.style.display = 'block'; } function hide() { var el = document.getElementById( "box" ); el.style.display = 'none'; } で、 el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.top = ( document.body.clientWidth - width ) / 4 + この部分でIEでは問題ないのですが、Safariでは機能しません。 どうかお助けください。 よろしくお願いいたします。

  • javascriptで画像サイズをウィンドウのサイズに合わせて表示する方法

    javascriptを最近はじめてみました。 しかしどうも慣れないためか、最後の一歩で思うように動いてくれません。 基本的にやりたい事はウインドウサイズに合わせて画像サイズを変更できるようにしたいと思ってます。 何とかいろいろ調べて、下記のスクリプトまで来たんですが (確かこのサイトの他の方への回答からほぼ活用) これでは画面が表示されるときにスクリプトが適用されません。 その後ウィンドウのサイズ変更をすると適用してくれるのですが。 なにやらとても簡単な事で上手く動いてくれないのかもしれませんが、 どうしてもできそうにありません。 どなたかお分かりの方がいましたらご教授願えると大変助かります。 よろしくお願いします。 以下、javascript↓ <body style="overflow:hidden" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <img src="test.JPG" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()"> <div style=" color: black; font-size: medium; font-family: serif; visibility: visible; display: block; position: absolute; z-index: 1; top: -1px; left: 0"> <script type="text/javascript"> var imgObj = document.getElementById('backgroundID'); var imgSize = {w:0, h:0} window.onresize = setImg; window.onscroll = function() { var t, l; if (document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; } else if (document.body.scrollTop) { t = document.body.scrollTop; l = document.body.scrollLeft; } else { return; } imgObj.style.top = t + 'px'; imgObj.style.left = l + 'px'; } function setSize() { imgSize.w = imgObj.width; imgSize.h = imgObj.height; } function setImg() { var wh, pW, pH, c; wh = getWindowSize(); pW = wh.w / imgSize.w; pH = wh.h / imgSize.h; if (pW > 0 || pH > 0) { c = (pW > pH) ? pW : pH; imgObj.style.width = parseInt(imgSize.w * c + 1) + 'px'; imgObj.style.height = parseInt(imgSize.h * c + 1) + 'px'; } else { imgObj.style.width = imgSize.w + 'px'; imgObj.style.height = imgSize.h + 'px'; } } function getWindowSize() { var wh = {w:0, h:0}; if (document.body.clientWidth) { wh.w = document.body.clientWidth wh.h = document.body.clientHeight; } else if(document.documentElement.clientWidth) { wh.w = document.documentElement.clientWidth; wh.h = document.documentElement.clientHeight; } else if(window.innerWidth) { wh.w = window.innerWidth; wh.h = window.innerHeight; } return wh; } </script> </body>

  • ウィンドウの高さによって画像のサイズも変更したい

    よろしくお願いいたします。 ウィンドウサイズの高さが800px以下の場合、 〇〇.jpgを80%のサイズで表示させたいのですが、 うまく行かず、質問させていただいました。 下記のように書いてみたのですが、 全く動かず。。 $(document).ready(function(){ var HHeight = $(window).height(); if(HHeight <= 800){ $(".wrap img").attr({width: "60%"}); }else{ $(".wrap img").attr({width: "100%"}); } }); すごく検討違いな書き方なのかもしれません・・。 ご存知の方おられましたら、アドバイスいただければと思います。 javascriptでもjqueryでもどちらでもかまいません。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • Java
  • 指定サイズウィンドウが開かない

    ビルダーでサイトを作成しているのですが JAVAスクリプトを使用したサイズ指定ウィンドウが ビルダーのプレビューではちゃんと開くのにFTPツールで転送し、ネット上で開こうとすると開きません。 タグの書いてあったサイトのサンプルでもちゃんと開きます。 タグは <A href="javascript:void(0);" onClick="window.open('file:///○○.html', 'newwin', 'width=900,height=600')" ><IMG src="○○.gif" width="68" height="79" border="0"></A> です。これを<BODY></BODY>に埋め込んでいます。 ○○はファイル名です。一体何処が悪いのでしょうか? 教えてください。

  • 背景画像を画面サイズで固定しても縮小される

    画面サイズいっぱいに1枚の画像を背景にしたいです。 プレビューするとちゃんとできているのですが、ctrlと-で縮小すると固定しているはずの背景画像まで縮小されてしまします。 解決する方法はありますか。 html、cssなどは下記の通りです。よろしくお願いいたします。 【html】(img/bg.jpgは背景画像) <body> <img src="img/bg.jpg" width="100%" height="100%" id="bg" /> <div id="contents"> <h1>背景<h1> <p>ここにコンテンツが入ります。</p> </div> </body> 【css】 *{ margin:0; padding:0; border:0; } #bg { z-index: -1; position:fixed; } #contents{ width:950px; background-color:#FFF; } 【jquery】 <script> $(function() { setSize(); $(window).resize(function(){ setSize(); }); }); function setSize() { var imgW = 2000; var imgH = 1332; //ウィンドウサイズ取得 var winW = $(window).width(); var winH = $(window).height(); var scaleW = winW / imgW; var scaleH = winH / imgH; var fixScale = Math.max(scaleW, scaleH); var setW = imgW * fixScale; var setH = imgH * fixScale; var moveX = Math.floor((winW - setW) / 2); var moveY = Math.floor((winH - setH) / 2); $('#bg').css({ 'width': setW, 'height': setH, 'left' : moveX, 'top' : moveY }); } </script>

  • 画像リンクを別ウインドウでサイズ指定で開くように

    <a href="http大きいサイズの画像" onclick="javascript:window.open('1.html','win1','width=400,height=550');return false;"><IMG SRC="http小さいサイズの画像.jpg" width=60,height=60></a> 小さなサイズの画像をクリックすると、別ウインドウで大きな画像が開くタグを作りたいのですが、 その際に大きいサイズの画像を400×550サイズでぴったりと開くようにしたいのです。 上記のタグでは、別ウインドウでは開くのですがサイズは変わりません… Javascriptを使わないといけないのでしょうか? その辺のことが全くわからないので どなたかわかりやすく添削してもらえないでしょうか。