trezremay
trezremay

Reputation: 27

How Can I echo an image to bootstrap carousel in php?

I've been trying to dynamically update the images in a bootstrap carousel dependant on the image URL stored in a mysql database. I have managed to get the first image ($value1), to display using a foreach but this doesn't work for the following values. Below is the carousel code which I have

<div id="carouselExampleIndicators" class="carousel slide box" 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>
    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner" data-interval="300">
    <div class="carousel-item active" id="myCarousel">
      <img class="d-block w-100" src="<?= $value1; ?>" alt="First Slide">
    </div>
    <div class="carousel-item" id="carouselImg">
      <img class="d-block w-100" src="<?= $value2; ?>" alt="Second Slide">
    </div>
    <div class="carousel-item" id="carouselImg">
      <img class="d-block w-100" src="<?= $value3; ?>" alt="Third slide"><
    </div>
     <div class="carousel-item" id="carouselImg">
      <img class="d-block w-100" src="<?= $value4; ?>" alt="Fourth slide">
    </div>
   
  </div>
</div>
```

And below is the php section which I have:

    <?php
    ini_set('display_errors', '1');
    ini_set('display_startup_errors', '1');
    error_reporting(E_ALL);
include('conn.php');    

$imgPlaceOneQuery = "SELECT imgLocation FROM image WHERE ImageID = 1";
    $imgPlaceOneRun = mysqli_query($conn, $imgPlaceOneQuery) or die(mysqli_error($conn));
    $imgPlaceOne = mysqli_fetch_row($imgPlaceOneRun);
    
$imgUrl = "img/banner/Banner1.jpg"; 

foreach($imgPlaceOne as $key => $value1)
{
}

$imgPlaceTwoQuery = "SELECT imgLocation FROM image WHERE ImageID = 2";
    $imgPlaceTwoRun = mysqli_query($conn, $imgPlaceTwoQuery) or die(mysqli_error($conn));
    $imgPlaceTwo = mysqli_fetch_row($imgPlaceTwoRun);
    
    foreach($imgPlaceTwo as $key => $value2)
{
}
$imgPlaceThreeQuery = "SELECT imgLocation FROM image WHERE ImageID = 3";
    $imgPlaceThreeRun = mysqli_query($conn, $imgPlaceThreeQuery) or die(mysqli_error($conn));
    $imgPlaceThree = mysqli_fetch_row($imgPlaceThreeRun);
    
    foreach($imgPlaceTwo as $key => $value3)
{
}
$imgPlaceFourQuery = "SELECT imgLocation FROM image WHERE ImageID = 4";
    $imgPlaceFourRun = mysqli_query($conn, $imgPlaceFourQuery) or die(mysqli_error($conn));
    $imgPlaceFour = mysqli_fetch_row($imgPlaceFourRun);
    
    foreach($imgPlaceTwo as $key => $value4)
{
}
?>

I am using the correct image URLs as I have taken the ones which I was using initially and added them into the DB, it's only not displaying through this method Please could someone point me in the right direction, thanks

Upvotes: 0

Views: 1268

Answers (1)

Thien Nguyen
Thien Nguyen

Reputation: 135

I don't get it, why do you have to use 4 query to get 4 values of the SAME table? You could just do this query:

$query = "SELECT imgLocation FROM image WHERE ImageID = 1 OR ImageID = 2 OR ImageID = 3 OR ImageID = 4"

Get the result:

$images_query = mysqli_query($conn, $query) or die(mysqli_error($conn));
$images = mysqli_fetch_row($images_query);

Put images url in Bootstrap carousel:

<div id="carouselExampleIndicators" class="carousel slide box" 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>
    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner" data-interval="300">
    <div class="carousel-item active" id="myCarousel">
      <img class="d-block w-100" src="<?= $images[0]; ?>" alt="First Slide">
    </div>
    <div class="carousel-item" id="carouselImg">
      <img class="d-block w-100" src="<?= $images[1]; ?>" alt="Second Slide">
    </div>
    <div class="carousel-item" id="carouselImg">
      <img class="d-block w-100" src="<?= $images[2]; ?>" alt="Third slide"><
    </div>
     <div class="carousel-item" id="carouselImg">
      <img class="d-block w-100" src="<?= $images[3]; ?>" alt="Fourth slide">
    </div>
   
  </div>
</div>

Or loop the results for a more flexible use:

<div id="carouselExampleIndicators" class="carousel slide box" data-ride="carousel">
  <ol class="carousel-indicators">
    <?php
    for($i = 0; $i < count($images); $i++) {
        echo '<li data-target="#carouselExampleIndicators" data-slide-to="' . $images[$i] . '" class="' . $i == 1 ? $active : "" . '"></li>';
    }
    ?>
  </ol>
  <div class="carousel-inner" data-interval="300">
    <?php
    for($i = 0; $i < count($images); $i++) {
        echo '<div class="carousel-item ' . $i == 1 ? "active" : "" . '">';
        echo '<img class="d-block w-100" src="' . $images[$i] . '">';
        echo '</div>';
    }
    ?>
  </div>
</div>

Upvotes: 1

Related Questions