php while loop images that store in mysql and onlick modal - php

Question

My intention is to display the content(which is stored in mysql) if the picture is clicked.
<?php
$query = "SELECT * FROM pet where pet_cat = 'D' ORDER BY petid ";
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($result))
{
$_SESSION['petname'] = $row['petname'];
$_SESSION['petdesc'] = $row['petdesc'];
$_SESSION['petimg'] = $row['petimg'];
echo '<li style="
padding-right: 20px;
padding-left: 20px;">';
echo '<a style= "cursor: pointer;"onclick= "document.getElementById(\'dogmod\').style.display=\'block\'">';
echo '<img src="data:image/jpeg;base64,'.base64_encode($_SESSION['petimg'] ).'" />';
echo '<h4>';
echo $_SESSION['petname'] ;
echo '</h4>';
include 'desca.php';
echo '</a>';
echo '</li>';
}
?>
The modal only display one content and that is the first content of the first picture.(sorry for bad english )
This is the code of my modal:
<div id="dogmod" class="modal">
<center>
<form class="modal-content animate" style="margin: 0; padding-left:50px; padding-right:50px; padding-bottom:50px;">
<div class="imgcontainer">
<span onclick="document.getElementById('dogmod').style.display='none'" class="close" title="Close">×</span>
<h1 align=center>Description</h1>
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode($_SESSION['petimg'] ).'" style="margin-top:50px;float:left; margin-right:50px;"/>'; ?>
<h1 style="margin-top:50px;margin-bottom:50px">
<?php echo $_SESSION['petname'] ;?>
</h1>
<p style="margin-bottom:50px;">
<?php echo $_SESSION['petdesc'] ;?>
</p>
<input type="button" value="Back" onclick=location.href='doga.php' class="button_1" style=" width: auto;padding: 10px 18px; background-color: #f44336; border:0px; color:white;">
<h2> </h2>
</form>
</center>
<script>
// Get the modal
var modal = document.getElementById('dogmod');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>

Answer 1

The problem is that you are generating many modals with the same "id".
What happens in this case is that you will be displayed only the last image in the table.
Generate your modal id dynamically.
Use php and add an affix to the id attribute of the modal and call that one in your onclick event.
Here is how you do it:
$query = "SELECT * FROM pet where pet_cat = 'D' ORDER BY petid ";
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($result))
{
$_SESSION['petname'] = $row['petname'];
$_SESSION['petdesc'] = $row['petdesc'];
$_SESSION['petimg'] = $row['petimg'];
$_SESSION['petid'] = $row['petid'];
echo '<li style="
padding-right: 20px;
padding-left: 20px;">';
echo '<a style= "cursor: pointer;"onclick= "document.getElementById(\'dogmod'.$row['petid'].'\').style.display=\'block\'">';
echo '<img src="data:image/jpeg;base64,'.base64_encode($_SESSION['petimg'] ).'" />';
echo '<h4>';
echo $_SESSION['petname'] ;
echo '</h4>';
include 'desca.php';
echo '</a>';
echo '</li>';
}
And in your modal php file, change only your first line to:
<div id="dogmod<?=$_SESSION['petid']?>" class="modal">
You should be good to go.
To make it close just fine, do the following in your modal php template find the 'close' link:
<span onclick="document.getElementById('dogmod<?= $_SESSION['petid'] ?>').style.display='none'" class="close" title="Close">×</span>