How to display a pop-up modal for each image from a PHP image gallery? [on hold]
0
I have a page which displays images that have been uploaded into a php database. I would like to be able to click on the images to display each image in a modal pop-up. All images display fine on the page but when I click on each one to open the modal box it shows the newest image for each different image rather than the image i'm clicking on. How can I fix this?
My code:
var modal = document.getElementById('myModal');
var btn = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
for (var i = 0; i < btn.length; i++) {
var img = btn[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
}
}
//close modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}$sql = "SELECT * FROM gallery ORDER BY idGallery DESC;";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql)) {
echo "SQL statement failed";
} else {
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
echo '
<a href="#" class="myBtn">
<div class="myImg" style="background-image:
url(img/gallery/'.$row["imgFullNameGallery"].');"></div>
</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="img/gallery/'.$row["imgFullNameGallery"].'">
</div>
</div>
';javascript php image
asked 2 days ago
EbiEbi
1
New contributor
Ebi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
put on hold as off-topic by Simon Forsberg♦ 2 days ago
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – Simon Forsberg
If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
0
I have a page which displays images that have been uploaded into a php database. I would like to be able to click on the images to display each image in a modal pop-up. All images display fine on the page but when I click on each one to open the modal box it shows the newest image for each different image rather than the image i'm clicking on. How can I fix this?
My code:
var modal = document.getElementById('myModal');
var btn = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
for (var i = 0; i < btn.length; i++) {
var img = btn[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
}
}
//close modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}$sql = "SELECT * FROM gallery ORDER BY idGallery DESC;";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql)) {
echo "SQL statement failed";
} else {
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
echo '
<a href="#" class="myBtn">
<div class="myImg" style="background-image:
url(img/gallery/'.$row["imgFullNameGallery"].');"></div>
</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="img/gallery/'.$row["imgFullNameGallery"].'">
</div>
</div>
';javascript php image
asked 2 days ago
EbiEbi
1
New contributor
Ebi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
put on hold as off-topic by Simon Forsberg♦ 2 days ago
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – Simon Forsberg
If this question can be reworded to fit the rules in the help center, please edit the question.
Sorry posted this on the wrong website and can't delete it
– Ebi
2 days ago
You should be able to delete your own post - there should be a delete link under the code and tags on the left side. For more information, read this meta post.
– Sᴀᴍ Onᴇᴌᴀ
2 days ago
Welcome to Code Review! I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Simon Forsberg♦
2 days ago
@SᴀᴍOnᴇᴌᴀ Two different userids are involved. I will request a merge of them.
– Simon Forsberg♦
2 days ago
add a comment |
0
0
0
I have a page which displays images that have been uploaded into a php database. I would like to be able to click on the images to display each image in a modal pop-up. All images display fine on the page but when I click on each one to open the modal box it shows the newest image for each different image rather than the image i'm clicking on. How can I fix this?
My code:
var modal = document.getElementById('myModal');
var btn = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
for (var i = 0; i < btn.length; i++) {
var img = btn[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
}
}
//close modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}$sql = "SELECT * FROM gallery ORDER BY idGallery DESC;";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql)) {
echo "SQL statement failed";
} else {
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
echo '
<a href="#" class="myBtn">
<div class="myImg" style="background-image:
url(img/gallery/'.$row["imgFullNameGallery"].');"></div>
</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="img/gallery/'.$row["imgFullNameGallery"].'">
</div>
</div>
';javascript php image
asked 2 days ago
EbiEbi
1
New contributor
Ebi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I have a page which displays images that have been uploaded into a php database. I would like to be able to click on the images to display each image in a modal pop-up. All images display fine on the page but when I click on each one to open the modal box it shows the newest image for each different image rather than the image i'm clicking on. How can I fix this?
My code:
var modal = document.getElementById('myModal');
var btn = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
for (var i = 0; i < btn.length; i++) {
var img = btn[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
}
}
//close modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}$sql = "SELECT * FROM gallery ORDER BY idGallery DESC;";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql)) {
echo "SQL statement failed";
} else {
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
echo '
<a href="#" class="myBtn">
<div class="myImg" style="background-image:
url(img/gallery/'.$row["imgFullNameGallery"].');"></div>
</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="img/gallery/'.$row["imgFullNameGallery"].'">
</div>
</div>
';var modal = document.getElementById('myModal');
var btn = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
for (var i = 0; i < btn.length; i++) {
var img = btn[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
}
}
//close modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}$sql = "SELECT * FROM gallery ORDER BY idGallery DESC;";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql)) {
echo "SQL statement failed";
} else {
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
echo '
<a href="#" class="myBtn">
<div class="myImg" style="background-image:
url(img/gallery/'.$row["imgFullNameGallery"].');"></div>
</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="img/gallery/'.$row["imgFullNameGallery"].'">
</div>
</div>
';var modal = document.getElementById('myModal');
var btn = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
for (var i = 0; i < btn.length; i++) {
var img = btn[i];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
}
}
//close modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}$sql = "SELECT * FROM gallery ORDER BY idGallery DESC;";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql)) {
echo "SQL statement failed";
} else {
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
echo '
<a href="#" class="myBtn">
<div class="myImg" style="background-image:
url(img/gallery/'.$row["imgFullNameGallery"].');"></div>
</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="img/gallery/'.$row["imgFullNameGallery"].'">
</div>
</div>
';javascript php image
javascript php image
asked 2 days ago
EbiEbi
1
New contributor
Ebi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
EbiEbi
1
New contributor
Ebi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
EbiEbi
1
New contributor
Ebi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
EbiEbi
1
asked 2 days ago
EbiEbi
1
1
New contributor
Ebi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Ebi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Ebi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
put on hold as off-topic by Simon Forsberg♦ 2 days ago
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – Simon Forsberg
If this question can be reworded to fit the rules in the help center, please edit the question.
put on hold as off-topic by Simon Forsberg♦ 2 days ago
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – Simon Forsberg
If this question can be reworded to fit the rules in the help center, please edit the question.
Sorry posted this on the wrong website and can't delete it
– Ebi
2 days ago
You should be able to delete your own post - there should be a delete link under the code and tags on the left side. For more information, read this meta post.
– Sᴀᴍ Onᴇᴌᴀ
2 days ago
Welcome to Code Review! I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Simon Forsberg♦
2 days ago
@SᴀᴍOnᴇᴌᴀ Two different userids are involved. I will request a merge of them.
– Simon Forsberg♦
2 days ago
add a comment |
Sorry posted this on the wrong website and can't delete it
– Ebi
2 days ago
You should be able to delete your own post - there should be a delete link under the code and tags on the left side. For more information, read this meta post.
– Sᴀᴍ Onᴇᴌᴀ
2 days ago
Welcome to Code Review! I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Simon Forsberg♦
2 days ago
@SᴀᴍOnᴇᴌᴀ Two different userids are involved. I will request a merge of them.
– Simon Forsberg♦
2 days ago
Sorry posted this on the wrong website and can't delete it
– Ebi
2 days ago
Sorry posted this on the wrong website and can't delete it
– Ebi
2 days ago
You should be able to delete your own post - there should be a delete link under the code and tags on the left side. For more information, read this meta post.
– Sᴀᴍ Onᴇᴌᴀ
2 days ago
You should be able to delete your own post - there should be a delete link under the code and tags on the left side. For more information, read this meta post.
– Sᴀᴍ Onᴇᴌᴀ
2 days ago
Welcome to Code Review! I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Simon Forsberg♦
2 days ago
Welcome to Code Review! I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Simon Forsberg♦
2 days ago
@SᴀᴍOnᴇᴌᴀ Two different userids are involved. I will request a merge of them.
– Simon Forsberg♦
2 days ago
@SᴀᴍOnᴇᴌᴀ Two different userids are involved. I will request a merge of them.
– Simon Forsberg♦
2 days ago
add a comment |
0
active
oldest
votes
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sorry posted this on the wrong website and can't delete it
– Ebi
2 days ago
You should be able to delete your own post - there should be a delete link under the code and tags on the left side. For more information, read this meta post.
– Sᴀᴍ Onᴇᴌᴀ
2 days ago
Welcome to Code Review! I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Simon Forsberg♦
2 days ago
@SᴀᴍOnᴇᴌᴀ Two different userids are involved. I will request a merge of them.
– Simon Forsberg♦
2 days ago