在 Yii2 中的 DetailView::widget 上打开图片

Question

我想在 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 选项。

Answer 1

您可以使用 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>

Answer 2

更简单的方法是在模态框内提供默认的img 标签，并在单击DetailView 内的图像时提供源代码，这将在模态框内加载图像。

此外，图像可以是任意大小，您的模态窗口也可以是任意大小，可以使用 .modal-lg 或 .modal-sm 类将其配置为任意大小，因此请将 img-responsive 类添加到模态窗口内默认img标签，图像将根据模态窗口的大小做出响应。

所以，首先要做的是在模态框内添加一个带有img-responsive和src='//:0'类的图像标签，你可以Read Here why use ://0 for empty image tag

\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'],
                ],
            ],
        ],
    ]
)
?>

然后在您使用 DetailView 小部件的视图顶部添加以下 javascript。

$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);

现在点击图片，您将看到包含在模态窗口中的响应式图片，具有响应式尺寸。

Answer 3

我尝试了一些让我的代码看起来更好的方法：

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

所以，它看起来更好；但是，我想知道这样做是否正确。