CODEWITHSUNDEEP
phphtmlcssmysqli
Char
Char

Reputation: 318

Display smaller images under big image using table and while loop

I'll try make this simple (it wouldn't let upload a picture). This is my code. I want the first image to display as a big image and the smaller images to display one after the other underneath. I'll attach css and php. Right now the images are display like this: Big, small, big small, big..etc...

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;
}

Upvotes: 1

Views: 331

Answers (1)

Tyler Marien
Tyler Marien

Reputation: 762

You are resetting $a to 1 each time you output a small image. This will cause the next image to be output to be a large one. You probably just want to increment $a each time you output an image. Get rid of the $a = 1 instead the else block and move $a++ outside of the if/else block.

// 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>";

Upvotes: 1

Related Questions