Reputation: 27
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
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