0

では、ユーザーがアップロードしたサーバーに多数の画像があるとしましょう。各画像には、ファイル名、カテゴリ、ファ​​イルサイズ、拡張子、場所などの情報を含むデータベースの行もあります。

これらの画像を表示したいときは、mysql_query と while ループを使用します。これは機能しますが、写真はすべて異なるサイズであり、隣同士または下に表示され、非常に見栄えが悪くなります。

これらの画像が 20 枚あると仮定しましょう。5 つの画像を 4 行に並べて表示するにはどうすればよいでしょうか?

4

2 に答える 2

2

画像データを含む数値的にインデックス付けされたオブジェクトの配列を想定すると、次のようになります。

<div class="row">
<?php
// loop through all my images taking the index and image object
foreach( $images as $idx=>$image ) {

    // If this isn't the 1st image & the modulus of 5 and $idx is 0, make a new row.
    if( $idx > 0 && !(5%$idx) ) {
        </div><div class="row">
    }
    // Print out the image
    echo '<img src="' . $image->filename . '" />';
} ?>
</div>

モジュラスは基本的に、最初の数値を 2 番目の数値で割った余りです。したがって、5 つの画像を印刷した場合、5/5=1 で余りがないため、新しい行を作成します。

私はそれが次のようなものを作成すると信じています:

<div class="row">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
</div>
<div class="row">
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
<img src="img9.jpg" />
<img src="img10.jpg" />
</div>

次に、CSS を使用してスタイルを設定できます。

<style type="text/css">
    div.row {
       clear:left;
    }
    div.row img {
       float:left;
    }
</style>

画像のサイズ変更に関しては、次の 2 つのオプションがあります。

  1. 簡単なオプション: CSS で画像の幅を設定します (高さはそれに応じてスケーリングされます)。これは完璧とは言えず、画像の縦横比 (幅と高さ) が異なる場合でも、乱雑に見えます。
  2. GD や imagick (imagemagick 上の PHP レイヤー) などの PHP ライブラリを使用してサイズ変更 (および必要に応じてトリミング) します。個人的には GD の方が好きです。GD は PHP と一緒にパッケージ化されているため、幅広いサポートが得られます。そうは言っても、imagick はより速く、より単純なコードなので、それはあなた次第です。このサイトでは、画像のサイズ変更について 2 つを比較しています。

編集:あなたの質問に答えて、画像の配列を取得するには、次のようなことをする必要があります:

<?php
// Build an array of images
$sql = 'SELECT * FROM images';
$result = mysql_query( $sql );

while( $obj = mysql_fetch_object( $result ) ) {
    $images[] = $obj;
}
?>
于 2012-05-30T16:49:14.010 に答える
0

疑似コード

$i = 0;
while($row = mysql_fetch_object($result) {
   //displaying image
   ....
   if($i % 4 == 0) {
          echo '<BR>';
   }
   $i++;
}
于 2012-05-30T16:48:40.250 に答える