在彈出的模式中打開一張照片

對不起，我在這裏找到了很多有關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

在彈出的模式中打開一張照片

回答

相關問題