I'm new to PHP and JS programming and need help with my website project.
In a other question, I had a problem with an image posting system, which is solved:
SOS! How to display image albums in posts? [using PHP and MYSQL only].
Now I want to modify this posting system with dynamic image sliders. (next Level ^^)
At the end, it must be possible to scroll down trough the posts and in each post with more then 1 image, it must be possible to slide left & right through the images of this album.
Image Slider
I inspired me by a full screen image slider: https://codepen.io/bradtraversy/pen/boydaE
and a carousel slider: https://www.youtube.com/watch?v=KcdBOoK3Pfw
which are both vanilla but static (without database).
Below you can see my php file, where everything comes together.
display.php
<!DOCTYPE html>
<html>
<body>
<?php
$db = mysqli_connect("localhost", "root", "", "post_images");
$result = mysqli_query($db, "SELECT * FROM posts");
while ($row = mysqli_fetch_array($result)) {
echo "<div class=\"post_container\">";
echo $row['post_title'];
echo "<div class=\"image_container\">";
SELECT img_file, img_title FROM images WHERE post_id = " .$rowx['id_post']);
if(mysqli_num_rows($resultx) > 0) {
if(mysqli_num_rows($resultx) == 1) {
echo "<div class=\"post_image_displayer\">";
while ($rowx = mysqli_fetch_array($resultx)) {
echo "<img src='../folder_image_uploads/".$rowx['img_file']."' >";
echo $rowx['img_title'];
}
echo "</div>";
}
elseif(mysqli_num_rows($resultx) > 1) {
echo "<div class=\"post_image_slider\">";
include_once 'incl_image_slider.php';
echo "</div>";
}
}
echo "</div>";
echo "</div>";
}
?>
</body>
</html>
This code works perfectly, if there would be only 1 slider on this page. You see, I used include_once 'incl_image_slider.php'; . If I would use only include 'incl_image_slider.php'; , the page go crazy ... (only by the image slider). Even if everything has a class and no unique id.
incl_image_slider.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="includes/incl_carousel_slider_style.css">
</head>
<div class="carousel-container">
<div class="carousel-slide">
<?php
$db = mysqli_connect("localhost", "root", "", "post_images");
$result = mysqli_query($db, "SELECT * FROM posts");
$row = mysqli_fetch_array($result);
$resultx = mysqli_query($db, "SELECT img_file, img_title FROM images WHERE post_id =".$row['id_post']);
$rowz = mysqli_fetch_all($resultx, MYSQLI_ASSOC);
echo "<img src='folder_img_uploads/".$rowz[0]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[1]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[2]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[3]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[4]['img_file']."' >";
?>
</div>
</div>
<button class="prevBtn">Prev</button>
<button class="nextBtn">Next</button>
<script src="incl_image_slider_app.js"></script>
The problem with this is, I have to know for each post, how many images inside. So this can't be used dynamically with a database, someone have an idea what to change?
incl_image_slider_app.js
Partly this is from: https://codepen.io/bradtraversy/pen/boydaE
let sliderImages = document.querySelectorAll(".carousel-slide"),
arrowLeft = document.querySelector(".prevBtn"),
arrowRight = document.querySelector(".nextBtn"),
current = 0;
// Clear all images
function reset()
{
for (let i = 0; i < sliderImages.length; i++)
{
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide()
{
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft()
{
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Show next
function slideRight()
{
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function()
{
if (current === 0)
{
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function()
{
if (current === sliderImages.length - 1)
{
current = -1;
}
slideRight();
});
startSlide();
Actually this image slider don't slide, no idea why? But it shows the first image of a post. And it is not possible to bring this multiple times for each post, in my display.php
I hope there is someone who can help me.
Best Regards :)
