Q&A
前提・実現したいこと
php, javascriptを使って、あるディレクトリ内の画像を表示するページを作ろうとしています。
google画像検索の結果画面のように、それぞれ縦横比の違う画像を綺麗にならべたいと思っています。
画像はサイズや縦横比がそれぞれ異なる為、縦横比は変えずに、指定した高さに合わせて拡大・縮小する形で表示します。
また、画像は無理のない枚数を横並びに表示し、画面内に収まらなくなる時、改行します。
その時、各行はそれぞれ左端・右端が同じ位置になるよう配置したいです。
そのために<div class="justify">として、
css
1.justify{ 2 display: flex; 3 justify-content: space-between; 4}
というcssを書きました。
結果、とりあえず1行に5枚ずつ表示するようにし、同じ行の各画像間の空白が調節される形で、左端・右端が各行同じ位置になることは確認できました。
次に、1行に5枚ずつではなく、改行するタイミングを画面内に収まる枚数とすべく、とりあえず画面幅を1000pxと仮定して、
その後、とりあえず画面横幅から最大値を決める処理を書く前に、適当に折り返す位置を1000pxを超えた時として、各画像の幅(固定された高さに合わせて拡大・縮小された後のもの)を取得・加算し、その合計が1000を超えた時点で改行するプログラムを書きました。下記が全容です。
php
1<?php 2//imagesディレクトリ内に保管された各ファイルの名前を配列へ格納 3foreach (glob("images/*") as $image) { 4 if (is_file($image)) { 5 $images[] = htmlspecialchars($image); 6 } 7} 8$itemPage = "../blank.php"; 9$countImg = 0; 10$totalWidth = 0; 11 ?> 12 13<!DOCUTYPE html> 14<html lang="ja"> 15<head> 16 <meta charset="utf-8"> 17 <title>画像</title> 18 <link rel="stylesheet" href="images.css"> 19<body marginwidth="30"> 20 21 <div class="justify"> 22 23 //配列に格納された画像を表示していくループ 24 <?php foreach ($images as $image): ?> 25 26 //各画像の幅をjavascriptで取得する為に "img + 数字($countImg)" をidに指定 27 <?php $countImg++; ?> 28 <span><a href="<?= $itemPage ?>"><img id="<?= "img$countImg" ?>" src="<?= $image ?>" alt="image"></a></span> 29 <script> 30 //phpの$countImg変数を、javascriptのcountImgへ渡す 31 var countImg = <?= $countImg ?>; 32 //画像の幅を取得 (※問題点: 正しく取得できる時と0が取得される場合があり、更新する度に変わる) 33 var imgWidth = document.getElementById('img' + countImg).width; 34 </script> 35 <?php 36 //javascriptのimgWidth変数を、phpの$imgWidthへ整数型で渡す(※問題点: 0になって渡される) 37 $imgWidth = intval('<script>document.write(imgWidth);</script>'); 38 $totalWidth += $imgWidth; 39 40 //出力確認ここから 41 var_dump('<script>document.write(imgWidth);</script>'); 42 var_dump($imgWidth); 43 echo "画像幅:$imgWidth 計幅$totalWidth"; 44 //出力確認ここまで 45 46 //画像幅の合計が1000を超えたら次のdivへ 47 if ($totalWidth > 1000) { 48 echo "</div><div class=\"justify\">"; 49 $totalWidth = 0; 50 } 51 ?> 52 <?php endforeach; ?> 53 </div> 54 55 <script type="text/javascript" src="../script.js"></script> 56</body> 57</html>
css
1img{ 2 height: 230px; 3} 4 5div{ 6 margin: 0px 40px 10px 40px; 7} 8 9.justify{ 10 display: flex; 11 justify-content: space-between; 12}
問題点
上記のコードだと、まずjavascriptで画像の幅を取得し、それをphpに渡すところでString型になっていたので、intvalして数値に変換しようとしたのですが、なぜか0が渡されてしまいます。
結果$totalWidthにはどんどん0が足されるのみで改行してくれない状況です。
また、javascriptで取得した画像の幅(String型)を確認したところ、なぜか"0"になっていることがあります。
これについては読み込みを行う度に"0"だったり"307"だったりするので、同じコードを実行しているのに安定して取得できないという感じです。
学習中の身であり、コードがごちゃごちゃしてて申し訳ないんですが、頭が着いていかないので助言いただけるとありがたいです。
よろしくお願いします。
回答1件
0
まず、javascriptとphpが同時に動くと思っている、その前提が誤っています。
phpはサーバー側で処理されるもの、
javascriptはクライアント側（ブラウザ内）で処理されるもの
です。
illbenocさんの書かれたものは、
①サーバー側でphpの部分だけが処理される
②ブラウザ側で表示される（javascriptが処理される）
の順番で処理が行われていますので、
php内で使おうとしている「javascriptで取得した画像サイズ」はいつでも0です。
phpのお勉強をされているならば、
phpにも画像サイズを取得する関数はありますので、そちらを使ってはどうですか？
javascriptのお勉強をされているのであれば、
htmlのタグ調整も含めて、javascript側で処理するようにしてはどうでしょうか。
なお、
javascriptで取得した画像の幅(String型)を確認したところ、なぜか"0"になっていることがあります。
これについては読み込みを行う度に"0"だったり"307"だったりするので、同じコードを実行しているのに安定して取得できない
こちらの原因は、javascriptで画像のサイズを取得する処理の前に
「画像ファイルの読込が終わっているか、いないか」の差です。
1回表示したことのある画像（同じパス・ファイル名）は、ブラウザ側でキャッシュされていれば、初めて表示する画像より早く読み込みができますし、初めて表示する画像でもサイズが変われば読み込みにかかる時間は変わります。（当然大きい方が時間がかかります）
javascript
1document.getElementById('img' + countImg).width
この記述で、画像サイズを計るつもりなのであれば、「画像の読込が終わってから計る」ようにしなければ、安定した動作は得られません。
投稿2018/05/25 01:06
編集2018/05/25 01:09
総合スコア1910
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/25 01:10