Я создаю социальную сеть, и мне нужна помощь с модальными изображениями. Я помещаю модальные изображения в свою ленту новостей, но только первое изображение действует как модальное изображение, когда я нажимаю на него, а другие нет. Я думаю, что это может быть что-то с JS. Когда я наводю курсор на все изображения, они отбрасывают тень. Может кто-нибудь, пожалуйста, помогите мне? Я пробовал с прошлой ночи.
Пост. php:
while($row = mysqli_fetch_array($data_query)) {
$id = $row['id'];
$body = $row['body'];
$added_by = $row['added_by'];
$date_time = $row['date_added'];
$imagePath = $row['image'];
if($imagePath != "") {
$imageDiv = "<div class='postedImageDiv'>
<div class='postedImage' >
<img src='$imagePath' id='postImg'>
</div>
</div>";
echo '<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
</div>';
echo '<script>
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("postImg");
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>';
}
else {
$imageDiv = "";
}
РЕДАКТИРОВАТЬ:
модальный. html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
</div>
<script type="text/javascript">
window.onload = function(){
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("postImg");
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
};
</script>
</body>
</html>