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 :)
