Opening a photo in pop up modal - php

Question

Sorry, I have found lots of answers here regarding modals and jQuery, but I cant find anything that helps me. I have a form that has photos. People should be able to click on the photo and it would open a larger version in a modal window. For the life of me, I can't figure out how to pass the value of the photo name to the modal. Here is what I have:
php/HTML:
<?php
$imgno = 1;
$dir = "memberphotos/$id/";
$qry = "SELECT PhotoName, Visible, Likes FROM photolist WHERE UserID = " . $id;
if ($result = mysqli_query($GLOBALS['link'], $qry)) {
while ($row = $result->fetch_assoc()) {
?>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="album-image">
<a href="#" class="thumb" data-action="edit" src='<?php $dir.$row['PhotoName']; ?>'>
<img src="<?php echo $dir . $row['PhotoName'] . "_thumb.jpg"; ?>"
class="img-responsive"/>
</a>
<a href="#" class="name">
<i class="fa-heart-o"> <?php if (!empty($row['Likes'])) {echo $row['Likes']." Likes";} ?> </i>
</a>
<div class="image-options">
<i class="fa-heart-o"></i>
</div>
</div>
</div>
<?php
$imgno = $imgno+1;}
}
?>
Now for the jquery:
<script type="text/javascript">
// Sample Javascript code for this page
jQuery(document).ready(function ($) {
// Edit Modal
$('.gallery-env a[data-action="edit"]').on('click', function (ev) {
var id = ('data-id');
ev.preventDefault();
$("#gallery-image-modal").modal('show');
});
});
</script>
Now, the code... I hard coded an image name into the img src to make sure it works, which it does. I'm just trying to get the photo name from the database, stored for each photo and passed to the modal.
<div class="modal fade" id="gallery-image-modal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-gallery-image">
<img src="<?php echo $dir . '2017-02-28_1_B828A.jpg'; ?>" class="img-responsive"/>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<a href="#" class="name">
<i class="fa-heart"> <?php echo $row['Likes']; ?> Likes</i>
</a>
</div>
</div>
</div>
<?php if ($id == $_SESSION['uid']) {?>
<div class="modal-footer modal-gallery-top-controls">
<button type="button" class="btn btn-xs btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-xs btn-info">Set as Main</button>
<button type="button" class="btn btn-xs btn-red">Delete image</button>
</div>
<?php } ?>
</div>
</div>
</div>
I can't figure this out... a little help for a humble learning coder?

Answer 1

Using .on() events isn't always the best solution. You also don't need to wrap the image inside of an a tag.
<img src="<?php echo $dir . $row['PhotoName'] . "_thumb.jpg"; ?> onclick="openImgModal('<?php echo $dir . $row['PhotoName']; ?>')" class="img-responsive"/>
Javascript:
function openImgModal(img_src)
{
$('.modal-gallery-image').html('<img src="'+img_src+'" class="img-responsive" />');
$("#gallery-image-modal").modal('show');
}
maybe add some CSS to indicate the image is clickable
.img-responsive
{
cursor: pointer;
}

Answer 2

Here is an easy way that does not include inline javascript
HTML
<div class="cover"> </div>
<div class="modalPhoto">
<img src="" />
</div>
CSS (can adjust this for your needs)
.cover {
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:9997;
width:100%;
height:100%;
display:none;
}
body.open .cover {
display:block;
}
.modalPhoto {
position:fixed;
z-index:9998;
width:680px;
height:550px;
background:#fff;
text-align:center;
box-shadow:0 0 15px -5px rgba(0,0,0,0.8);
top:50%;
margin-top:-1500px;
left:50%;
margin-left:-350px;
-webkit-transition:800ms margin-top ease-in-out;
transition:800ms margin-top ease-in-out;
overflow:hidden;
border:10px solid #fff;
}
body.open .modalPhoto {
margin-top:-285px;
}
jQuery
$('.gallery-env a img').on('click', function(e) {
var photo = $(this).data('src');
$('.modalPhoto').find('img').attr('src', photo);
$('body').addClass('open');
});
$('.cover').on('click',function() {
$('body').removeClass('open');
});
Let me know if any of this doesn't make sense