Question

我正在尝试打开模式窗口，在点击它之后为列表中的每个缩略图打开全部图片。我尝试这样做的代码。有谁知道我该怎么做？

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

我找到了解决方案，如果有人对此感兴趣，我已粘贴下面的代码。

            <?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();                   
            ?>

单击图像后打开模态窗口

1 个答案: