CODEWITHSUNDEEP
javascriptphpcssmysqlmodal-dialog
Gramas
Gramas

Reputation: 21

Css image modal with a MySQL database

I've been trying to figuring out how to load images from my database and then be able to click them to make them show up in a "popup window". For now I can load all my images and click them in order to see more information about every picture but I would like the picture to show up bigger. I found a tutorial on w3schools but it only works for the first picture shown.

How can I accomplish this for every picture loaded from my database?

Here's my code to read every picture from the database

<?php

$sql = "select id, image from items order by id desc";
$result = mysqli_query($con, $sql);

while($row = mysqli_fetch_array($result)){
$image = $row['image'];
$id = $row['id'];
?>
<div class="img">
    <a href="view_product.php?id=<?php echo $id; ?>">
        <img src="items/<?php echo $image; ?>">
    </a>
</div>

<?php
}

?>

UPDATE OF THE CODE:

<?php

$sql = "select id, image from items order by id desc";
$result = mysqli_query($con, $sql);

while($row = mysqli_fetch_array($result)){
$image = $row['image'];
$id = $row['id'];
?>
<img id="myImg" src="items/<?php echo $image; ?>" alt="<a  href='view_product.php?id=<?php echo $id; ?>">

<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

<?php
}

?>

<script>
// Get the modal
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('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// 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>

Upvotes: 1

Views: 1839

Answers (1)

Gramas
Gramas

Reputation: 21

I solved it myself after trying some different methods. The solution is here below:

<?php

$sql = "select id, image from items order by id desc";
$result = mysqli_query($con, $sql);

while($row = mysqli_fetch_array($result)){
$image = $row['image'];
$id = $row['id'];
?>

    <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-closebtn w3-hover-red w3-text-white w3-xxlarge w3-container  w3-display-topright">&times;</span>
<div class="w3-modal-content w3-animate-zoom">
<img id="img01" style="width:100%">
</div>
</div>

<div class="img">
<img src="items/<?php echo $image; ?>" style="width:179px; height:  135px;cursor:pointer" 
onclick="onClick(this)">
<a href="view_product.php?id=<?php echo $id; ?>">Visa information</a>
</div>

<?php
}

?>

<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>

Upvotes: 1

Related Questions