How to fix displaying multiple pictures from an array - php

Question

I store my pictures that are uploaded on my website in the database, then when I load them in my website, I store them in an array. My problem is I want to display the pictures in a slideshow but because sometimes the array not always is the same, I cannot display it right!
I tried to do if statement but then the function of slideshow didn't work at all!
Also, My array works fine! just having a problem with displaying
$photosarray= array(); //array to store photos names
$count=0;
while ($row2=mysqli_fetch_array($res2))
{
$image=$row2['img_name'];
$photosarray[$count]=$image;
$count=$count+1;
}
echo'
<td>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../photo/'.$photosarray[0].'" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../photo/'.$photosarray[1].'" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</td>';
echo '
<p class="font-weight-bold">click the image to view in full
size.</p>
</div>
</tbody>
';
I expect that my slideshow works depending on how many images in the array! so is the array has only 2 images then the slideshow should only have 2 slides!

Answer 1

You need to display in a loop, change:
<div class="carousel-item active">
<img src="../photo/'.$photosarray[0].'" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../photo/'.$photosarray[1].'" class="d-block w-100" alt="...">
</div>
to
foreach($photosarray as $photo){
print('
<div class="carousel-item">
<img src="../photo/'.$photo.'" class="d-block w-100" alt="...">
</div>
');
}

Answer 2

try this
<?php
$photosarray= array(); //array to store photos names
$count=0;
while ($row2=mysqli_fetch_array($res2))
{
$image=$row2['img_name'];
$photosarray[$count]=$image;
$count=$count+1;
}
echo'<td>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>';
foreach($photosarray as $photo){
echo '
<div class="carousel-item">
<img src="../photo/'.$photo.'" class="d-block w-100" alt="...">
</div>
';
}
echo '<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</td>';
echo '<p class="font-weight-bold">click the image to view in full size.</p>
</div>
</tbody>
';
or
<td>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$counter = 1;
while($row2 = mysql_fetch_array($res2)){
?>
<div class="carousel-item<?php if($counter <= 1){echo " active"; } ?>">
<img alt="First slide image" src="<?php echo '../photo/'.$row2['img_name']; ?>"/>
</div>
<?php
$counter++;
}
mysql_close($connection);
?>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
</div>
</div>
</td>
<p class="font-weight-bold">click the image to view in full size.</p>
</div>