i'm trying to create a Lightbox Image Gallery using a SQL Database.
I'm storing the images as Image Hoster links in my database.
It is only showing one image using my code. Is it possible to show all?
$res = "SELECT * FROM user";
$result = $conn->query($res);
while($myRow = $result->fetch_array())
{
$Foto = $myRow["Foto"];
}
?>
<img id="myImg" src="<?php echo $Foto; ?>">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
var modal = document.getElementById("myModal");
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;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
I managend to load all Images and i can open the first image onclick. How can i open all images onclick?
<?php
$res = "SELECT * FROM user";
$result = $conn->query($res);
while($myRow = $result->fetch_array())
{
echo "<tr>";
echo "<span class='Gallerie'>" . $myRow['Foto'] . "</span>";
echo "</tr>";
}
?>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
var modal = document.getElementById("myModal");
var img = document.getElementById("image");
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;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>