Я новичок в программировании на PHP и JS, и мне нужна помощь с моим проектом веб-сайта.
В другом вопросе у меня возникла проблема с системой размещения изображений, которая была решена:
SOS! Как отображать альбомы изображений в сообщениях? [используя только PHP и MYSQL]..
Теперь я хочу изменить эту систему публикации с помощью динамических ползунков изображений. (следующий уровень ^^)
В конце должна быть возможность прокручивать сообщения вниз, а в каждом сообщении с более чем 1 изображением должна быть возможность пролистывать влево и прямо через изображения этого альбома.
Слайдер изображений
Меня вдохновил полноэкранный слайдер изображений: https://codepen.io/bradtraversy/pen/boydaE
и слайдер-карусель: https://www.youtube.com/watch?v=KcdBOoK3Pfw
, которые являются ванильными, но статичными (без database).
Ниже вы можете увидеть мой файл php, где все собрано вместе.
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>
Этот код отлично работает, если бы на этой странице был только 1 слайдер. Видите ли, я использовал include_once 'incl_image_slider.php'; . Если бы я использовал только include 'incl_image_slider.php'; , страница сошла бы с ума... (только слайдер изображения). Даже если все имеет класс и не имеет уникального идентификатора.
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>
Проблема в том, что я должен знать для каждого поста, сколько изображений внутри. Так что это нельзя использовать динамически с базой данных, у кого-нибудь есть идея, что изменить?
incl_image_slider_app.js
Частично это из: 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();
На самом деле этот слайдер изображений не скользит, понятия не имею, почему? Но он показывает первое изображение поста. И это невозможно указать несколько раз для каждого сообщения в моем display.php
Я надеюсь, что есть кто-то, кто может мне помочь.
С наилучшими пожеланиями :)
