Javascript: Klik thumbnail image dan tampilkan di modal - Irman Firmansyah

Cara menampilkan image di modal Bootstrap 5, saat thumbnail (dengan ukuran lebih kecil) di klik dari Datatable misalnya atau dari image biasa

<!-- Bootstrap 5 Modal -->
<div class="modal fade" id="ktpModal" tabindex="-1" aria-labelledby="ktpModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ktpModalLabel">Foto KTP</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img id="ktpModalImage" src="" alt="Foto KTP" class="img-fluid">
            </div>
        </div>
    </div>
</div>

Contoh di Laravel untuk menampilkan foto KTP customer

<!-- image thumbnail -->
<label for="foto_ktp">Foto KTP</label>
<div class="mb-2">
    <img src="{{ asset('uploads/' . $customer->foto_ktp) }}" width="150px" class="ktp-thumbnail" data-src="{{ asset('uploads/' . $customer->foto_ktp) }}" style="cursor: pointer;">
</div>

• ktp-thumbnail yang nantinya akan dipanggil dari JS
• src untuk thumbnail dan data-src untuk original image
• style="cursor: pointer;" opsional, untuk mengganti cursor menjadi icon tangan saat di hover

Untuk script JS nya menggunakan jQuery

<script>
    $(document).ready(function() {
        $('.ktp-thumbnail').on('click', function() {
            const imageSrc = $(this).data('src');
            $('#ktpModalImage').attr('src', imageSrc);
            $('#ktpModal').modal('show');
        });
    });
</script>

Contoh lainnya misal jika thumbnail ada dalam tabel (Datatable) yang isinya dinamis

<table class="table" id="datatable">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>No KTP</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($customer as $row)
            <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $row->nama }}</td>
                <td>
                    @if ($row->foto_ktp)
                        <img src="{{ asset('uploads/' . $row->foto_ktp) }}" width="50px" class="ktp-thumbnail" data-src="{{ asset('uploads/' . $row->foto_ktp) }}" style="cursor: pointer;">
                    @endif
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

Untuk script JS nya

<script>
    $(document).ready(function() {
        $('#datatable').on('click', '.ktp-thumbnail', function(event) {
            const imageSrc = $(this).data('src');
            $('#ktpModalImage').attr('src', imageSrc);
            $('#ktpModal').modal('show');
        });
    });
</script>