Opening modal window after clicking on image

Question

I'm trying to open modal window with full picture inside for every thumbnail on list after clicking on it. There is my code with my tries of doing that. Does anyone know how should I do that?

            <?php
                $directory = 'uploads/delivery-pictures/'; 
                // Zamieniamy znaki, bo w nazwach plikow nie ma znaku /
                $npsNumber = str_replace('/', '_', $model->getNps());
                $images = glob($directory . $npsNumber . '_' . $model->delivery_no . '*' .'*_m.jpg', GLOB_BRACE);
                $i = 0;
                if (empty($images)) {
                    echo 'Brak zdjęć';
                }
                foreach($images as $image) {
                    $i = $i + 1;
                    $id = $npsNumber . '_' . $model->delivery_no . '_' . $i;
                    echo '<img id=' . $id . ' src=https://produkcja.onix.lh/' . $image . ' />';
                }

                Modal::begin([
                        'header'=>'<h4>Zdjęcie dla dostawy'. $model->delivery_no .'</h4>',
                        'id' => 'modal',
                        'size'=>'modal-lg',
                ]);              
                echo "<div id='modalContent'>Zawartosc</div>";                   
                Modal::end();

                $this->registerJs(
                    "
                        $('".$id."').click(function (){
                            $('#modal').modal('show')
                                .find('#modalContent');
                                //.load($(this).attr('value'));
                        });
                    "
                );
            ?>

Answer 1

I have found the solution, if someone is interested in it, I have pasted my code below.

            <?php
                $directory = 'uploads/delivery-pictures/'; 
                // Zamieniamy znaki, bo w nazwach plikow nie ma znaku /
                $npsNumber = str_replace('/', '_', $model->getNps());
                $images = glob($directory . $npsNumber . '_' . $model->delivery_no . '*' .'*_m.jpg', GLOB_BRACE);
                $i = 0;
                if (empty($images)) {
                    echo 'Brak zdjęć';
                }
                echo "<script>
                    function showImg(srcImg){
                        console.log('debug2');
                        $('#modalImg').attr('src', srcImg);
                        $('#modal').modal('show');
                    };
                </script>";
                foreach($images as $image) {
                    $i = $i + 1;
                    $id = $npsNumber . '_' . $model->delivery_no . '_' . $i;
                    $fullImage = str_replace('_m', '_d', $image);
                    echo '<img id="' . $id . '" src="https://produkcja.onix.lh/' . $image . '" />';
                    echo "<script>
                            var currentId =  \"".$id."\";
                            console.log(currentId);
                            $('#".$id."').click(function(){showImg(\"https://produkcja.onix.lh/" . $fullImage . "\")});
                         </script>";
                }

                Modal::begin([
                    'header'=>'<center><h4>Zdjęcie dla dostawy '. $model->delivery_no .'</h4></center>',
                    'id' => 'modal',
                    'size'=>'modal-lg',
                ]);              
                echo '<center><img id="modalImg" src="https://produkcja.onix.lh/' . $fullImage . '" /></center>';
                Modal::end();                   
            ?>