Question

我有一个gridview，显示已保存到mysql中的图像缩略图。我需要在点击时将图像显示为弹出窗口。

这是我在 index.php 中的gridview视图

这是代码[UPDATE]

<?php
<div class="license-index">

<h1><?= Html::encode($this->title) ?></h1>
<?php // echo $this->render('_search', ['model' => $searchModel]); ?>

<p>
    <?= Html::a('Create License', ['create'], ['class' => 'btn btn-success']) ?>
</p>

<?=
GridView::widget([
    'filterModel' => $searchModel,
    'dataProvider' => $dataProvider,
    'pjax' => true,
    'pjaxSettings' => [
        'neverTimeout' => true,
        'options' => [
            'id' => '-pjax',
            'enableReplaceState' => false,
            'enablePushState' => false,
        ],
    ],
    'columns' => [
        ['class' => 'yii\grid\SerialColumn',
            'header' => 'No',
            'options' => [
                'width' => '10px',
            ],
        ],
        'company',
        'address',
        [
            'attribute' => 'bukti',
            'value' => function ($data) {
                return Html::a(Html::img(Yii::getAlias('@web') . '/file/' . $data->bukti, ['alt' => 'some', 'class' => 'fancy-box', 'height' => '100px', 'width' => '100px']), ['site/zoom']);
    },
    'format' => ['raw'],
        ],
        ['class' => 'yii\grid\ActionColumn'],
    ],
]);
?>
</div>
<?php 
$this->registerJs('jQuery(document).ready(function(){
jQuery("a.fancy-box").fancybox();
});');
?>

如何在点击图片时将该图片显示为弹出窗口？

由于

Answer 1

你可以像这样使用jQuery插件： http://dimsemenov.com/plugins/magnific-popup/

设置非常简单（http://dimsemenov.com/plugins/magnific-popup/documentation.html）

添加插件的资源

<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<script src="magnific-popup/jquery.magnific-popup.js"></script>

然后添加这段代码

$(document).ready(function() {
  $('.thing').magnificPopup({type:'image'});
});

希望这会有所帮助！

Answer 2

您可以简单地使用任何模态框插件（例如http://fancybox.net/，https://github.com/newerton/yii2-fancybox-3）并按类名进行初始化。

library(data.table)

df <- setDT(df)
n <- 100
df.lower <- df[, .(ymin = seq(lower, value, length.out = n + 1)[1:n],
                   ymax = seq(lower, value, length.out = n + 1)[2:(n+1)],
                   alpha = seq(0, 1, length.out = n)), by = .(zz)]
df.upper <- df[, .(ymin = seq(value, upper, length.out = n + 1)[1:n],
                   ymax = seq(value, upper, length.out = n + 1)[2:(n+1)],
                   alpha = seq(1, 0, length.out = n)), by = .(zz)]
df.new <- rbind(df.lower, df.upper)
df.new$x <- as.integer(df.new$zz)
df.new$xmin <- df.new$x - 0.2
df.new$xmax <- df.new$x + 0.2

> df.new
     zz   ymin   ymax      alpha x xmin xmax
  1:  A 52.100 52.129 0.00000000 1  0.8  1.2
  2:  A 52.129 52.158 0.01010101 1  0.8  1.2
  3:  A 52.158 52.187 0.02020202 1  0.8  1.2
  4:  A 52.187 52.216 0.03030303 1  0.8  1.2
  5:  A 52.216 52.245 0.04040404 1  0.8  1.2
 ---                                        
596:  C  7.755  7.784 0.04040404 3  2.8  3.2
597:  C  7.784  7.813 0.03030303 3  2.8  3.2
598:  C  7.813  7.842 0.02020202 3  2.8  3.2
599:  C  7.842  7.871 0.01010101 3  2.8  3.2
600:  C  7.871  7.900 0.00000000 3  2.8  3.2

Yii2显示图像弹出时单击图像

2 个答案: