PHP – show thumbnail image enlarged in Bootstrap 4 modal when clicked

  bootstrap-4, jquery, php

Possible duplicates:

Display image on single bootstrap modal

In Bootstrap open Enlarge image in modal

I have a table that contains an image, When I click an image it opens a modal but the clicked image is not shown in the modal.

Table data:

<tr id="<?php echo $row['id']?>">
    <td data-target="traffic_doc">
        <a href="#" data-toggle="modal" data-target="#bigger_view">
          <img src="/uploads/traffic_violations/<?php echo $row['violationStatement'];?>" style="width: 50px; height: auto;"/>
        </a>
    </td>
</tr>

Modal:

<div class="modal fade" id="bigger_view" tabindex="-1" role="dialog" aria-labelledby="bigger_view" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img class="modal-content imagepreview" src="">
      </div>
    </div>
  </div>
</div>

I also tried with Jquery but this doesn’t open the modal:

// click uploaded image to enlarge
   $(function() {
        $('#bigger_view').on('click', function() {
            $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#bigger_view').modal('toggle');   
        });     
});

Source: Ask PHP

LEAVE A COMMENT