在弹出的模式中打开一张照片

对不起，我在这里找到了很多有关modals和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>

我无法弄清楚这一点...一个简单的学习编码器的一点帮助？

来源

2017-03-01 Enemy of the State

是你的问题“我怎么根据页面中的元素将值传递给Ajax URL？“如果是这样，你可以摆脱所有这些PHP，并让你的问题更有可能得到答案。参见'ev'对象中的[mcve] – miken32

，您也有元素，触发了该事件 - >您可以从那里获取'src'。然后将模式中的图像元素的“src”（给出一个id）设置为该值 – Jeff

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

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

来源

2017-03-01 18:35:08 Lynne

你是上帝。谢谢！ –

这里不包括内嵌一个简单的方法的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'); 
});

让我知道如果任何这是没有意义的

来源

2017-03-01 19:13:56

在弹出的模式中打开一张照片

回答

相关问题