Öffnen eines Fotos in Pop Up Modal

Question

Entschuldigung, ich habe viele Antworten hier bezüglich modals und jQuery gefunden, aber ich kann nichts finden, das mir hilft. Ich habe ein Formular mit Fotos. Personen sollten in der Lage sein, auf das Foto zu klicken und es würde eine größere Version in einem modalen Fenster öffnen. Für das Leben von mir kann ich nicht herausfinden, wie man den Wert des Fotonamens an das Modal weitergibt. Hier ist, was ich habe: 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;} 
    } 
?> 

Jetzt für die 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> 

nun der Code ... ich hart einen Bildnamen in das img src codiert, um sicherzustellen, es funktioniert, was es tut. Ich versuche nur den Foto-Namen aus der Datenbank zu bekommen, für jedes Foto gespeichert und an das Modal übergeben.

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

Ich kann das nicht herausfinden ... ein wenig Hilfe für einen bescheidenen Lerncoder?

Answer 1

Die Verwendung von .on() - Ereignissen ist nicht immer die beste Lösung. Sie müssen das Bild auch nicht innerhalb eines Tags einbinden.

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

vielleicht etwas CSS fügen Sie das Bild, um anzuzeigen, anklickbare

.img-responsive 
{ 
    cursor: pointer; 
} 

Answer 2

Hier ist eine einfache Möglichkeit, die nicht inline enthält javascript

HTML

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

CSS (kann für Ihre Bedürfnisse anpassen diese)

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

Lassen Sie mich wissen, wenn irgendetwas davon nicht Sinn macht