Откройте изображение в DetailView :: widget во всплывающем окне в Yii2 - PullRequest
Новая
       49

Откройте изображение в DetailView :: widget во всплывающем окне в Yii2

0 голосов
/ 09 октября 2019

Я хочу открыть изображение во всплывающем окне после нажатия, в Yii2, DetailView :: widget, который у меня уже есть: 

<?= DetailView::widget( [
        'model'      => $user,
        'attributes' => [
            'identity_number',
            [
                'attribute'=>'identity_file',
                'value'=>$user->identity_file,
                'format' => ['image',['width'=>'120','height'=>'120']],
            ],
        ],
    ] ) ?>

Показывает картинку, теперь я хочу открыть во всплывающем окне после нажатия,Я попробовал следующее: 

<?php
    \yii\bootstrap\Modal::begin([ 'id' => 'identity_file', 'footer' => '<a href="#" class="btn btn-sm btn-primary" data-dismiss="modal">Close</a>', ]);
    \yii\bootstrap\Modal::end();
    ?>

Но это очень грязно, и я думаю, что должен быть более чистый способ сделать это, используя параметры DetailView.

Ответы [ 3 ]

1 голос
/ 09 октября 2019

Вы можете использовать jquery, чтобы открыть модальное всплывающее окно и показать изображение в нем.

, если '$ user-> identity_file' дает точный путь к изображению, тогда используйте следующий код 

<div class="detail_view">
    <?= DetailView::widget( [
        'model' => $user,
        'attributes' => [
            'identity_number',
            [
                'attribute'=>'identity_file',
                'value'=>$user->identity_file,
                'format' => ['image',['width'=>'40','height'=>'40']],
            ],
        ],
    ]) ?>
</div>

<div id="imageModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Image</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="image_holder"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).on('click','.detail_view img',function (e) {
        $('#imageModal').modal('show');
        $('#image_holder').html('<img src="'+$(this).attr('src')+'" width="120" height="120">');
    })
</script>
1 голос
/ 09 октября 2019

Более простым подходом будет предоставление тега img по умолчанию внутри модала и предоставление источника при нажатии на изображение внутри DetailView, которое загрузит изображение внутри модала.

Кроме того, изображение может быть любого размера, как и ваше модальное окно, которое можно настроить на любой размер, маленький или большой, используя классы .modal-lg или .modal-sm, поэтому добавьте img-responsiveкласс к тегу img по умолчанию внутри модального окна, и изображения будут реагировать относительно размера модального окна.

Итак, первое, что нужно сделать, это добавить тег изображения внутри модального окна с помощью классаimg-responsive и src='//:0', вы можете Читать здесь, зачем использовать ://0 для пустого тега изображения 

\yii\bootstrap\Modal::begin(['id' => 'identity_file', 'footer' => '<a href="#" class="btn btn-sm btn-primary" data-dismiss="modal">Close</a>']);
echo "<img src='//:0' class='img-responsive'>";
\yii\bootstrap\Modal::end();

Добавить класс к изображению внутри кода DetailView, яПредположим, что $user->identity_file имеет полный путь к файлу. 

<?php echo DetailView::widget(
    [
        'model' => $user,
        'attributes' => [
            'id',
            [
                'attribute' => 'identity_file',
                'value' => $user->identity_file,
                'format' => [
                    'image',
                    ['width' => '120', 'height' => '120', 'class' => 'popup-image'],
                ],
            ],
        ],
    ]
)
?>

Затем добавьте следующий javascript поверх вашего представления, где вы используете виджет DetailView. 

$js = <<<JS
    $(".popup-image").on('click',function(){
        $("#identity_file img").attr('src', $(this).attr('src'))
        $("#identity_file").modal('show');
    });
JS;
    $this->registerJs($js, View::POS_READY);

Теперь нажмите на изображение, и вы увидите адаптивное изображение, содержащееся в модальном окне с адаптивными размерами.

0 голосов
/ 10 октября 2019

Я пытаюсь сделать что-то, чтобы мой код выглядел лучше: 

<?= DetailView::widget( [
    'model'      => $user,
    'attributes' => [
        'identity_number',
        [
            'attribute'=>'identity_file',
            'format'    => 'raw',
            'value'     => function ( $model ) {
                return $this->render( '_image', [
                    'src'   => $model->identity_file,
                    'title' => $model->title
                ] );
            }
        ],
    ],
] ) ?>

, затем я добавил частичное представление _image.php следующим образом: 

<a href="<?= $src; ?>" data-popup="lightbox"><img src="<?= $src; ?>" style="width: 200px;" class="img-rounded" alt="<?= $title; ?>"></a>

Итак, он выглядит лучше;Тем не менее, мне интересно, если это правильный подход или нет.

...