Question

我会尝试使这个变得简单（它不会让上传图片）。这是我的代码。我希望第一个图像显示为一个大图像，而较小的图像则一个接一个地显示在下面。我会附上css和php。现在，图像显示如下：大，小，大，小......等等......

PHP

 // Get image
         $sqlimg= "SELECT * FROM images where Horse_ID='$hid'";   
        $resultimg = $conn->query($sqlimg);

       // $rowimg = $resultimg->fetch_assoc();       

        $a = 1;
    // Start table
    echo "<table id='horses'>";

    while($rowimg = mysqli_fetch_assoc($resultimg)){    
    if($a <= 1){ //number of cells in row  

    // Big Image
    ?>
    <tr>
    <td id="big">
    <a href="uploads/<?php echo $rowimg['imageName'];?>" data-lightbox="image-1">
    <img src="uploads/<?php echo $rowimg['imageName'];?> " />
    </td></tr><tr>


    <?php
    $a++;
    }    
    else {

    // second row
    ?>   
    <tr>

    <td id="small">
    <a href="uploads/<?php echo $rowimg['imageName'];?>" data-lightbox="image-1">
    <img src="uploads/<?php echo $rowimg['imageName'];?> " />
    </td></tr>

    <?php
    $a = 1; 
        }
    }
    echo "</table>";

CSS

#display table
{
padding:80px 0px 0px 0px;
margin:0px auto;
}

#display table td#small img
{
height:50px;
}

#display table td#big img
{
height:200px;
}

Answer 1

每次输出小图像时，您都要将$ a重置为1。这将导致下一个图像输出为大图像。您可能只想在每次输出图像时增加$ a。摆脱$ a = 1而不是else块，并将$ a ++移到if / else块之外。

// Get image
$sqlimg= "SELECT * FROM images where Horse_ID='$hid'";   
$resultimg = $conn->query($sqlimg);

$a = 1;
// Start table
echo "<table id='horses'>";

while($rowimg = mysqli_fetch_assoc($resultimg)){    
  if($a <= 1){ //number of cells in row  

  // Big Image
?>

  <tr>
    <td id="big">
      <a href="uploads/<?php echo $rowimg['imageName'];?>" data-lightbox="image-1">
        <img src="uploads/<?php echo $rowimg['imageName'];?> " />
      </a>
    </td>
  </tr>

<?php
  }    
  else {

  // second row
?>   

  <tr>
    <td id="small">
      <a href="uploads/<?php echo $rowimg['imageName'];?>" data-lightbox="image-1">
        <img src="uploads/<?php echo $rowimg['imageName'];?> " />
      </a>
    </td>
  </tr>

<?php
  }
  $a++;
}
echo "</table>";

使用table和while循环在大图像下显示较小的图像

1 个答案: