在弹出模式中打开照片

Question

对不起，我在这里找到了很多关于模式和jQuery的答案，但是我找不到任何对我有帮助的东西。我有一个有照片的表格。人们应该能够单击照片，并且它将在模态窗口中打开较大的版本。对于我的一生，我不知道如何将照片名称的价值传递给模态。这是我所拥有的：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">
                        <a href="#" data-action="edit" data-id="<?php echo $row['PhotoName'];?>"><i class="fa-heart-o"></i></a>
                    </div>
                </div>
            </div>
<?php
            $imgno = $imgno+1;}
    } 
?>

现在为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>

现在，代码...我将图像名称硬编码到IMG SRC中，以确保其有效，并且可以。我只是想从数据库中获取照片名称，并存储每张照片并传递给模态。

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

我无法弄清楚...对谦虚的学习编码员有一点帮助？

Answer 1

使用.on（）事件并不总是最好的解决方案。您也不需要包装A标签内部的图像。

<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');
}

也许添加一些CSS表示图像可单击

.img-responsive
{
    cursor: pointer;
}

Answer 2

这是一种简单的方法，不包括Inline JavaScript

html

<div class="cover">&nbsp;</div>
<div class="modalPhoto">
    <img src="" />
</div>

CSS（可以根据您的需求进行调整）

.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');
});

让我知道是否有意义